/*
  Theme Name: Goldion Theme
  Theme URI: https://goldion.tbernat.hu/
  Version: 1.0.0
  Template: Divi
  Author: Bernat
  Author URI: https://tbernat.hu/
  Description: Goldion Theme for Divi
  Text Domain: goldion-theme
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==============================================================
   GOLDION RESPONSIVE DESIGN SYSTEM
   Divi 4 Child Theme
   ============================================================== */


/* ==============================================================
   1. DESIGN TOKENS
   ============================================================== */

:root {

	/* Brand colors */
	--goldion-color-white: #ffffff;
	--goldion-color-text: #161616;
	--goldion-color-primary: #001f33;
	--goldion-color-accent: #e47617;
	--goldion-color-light-blue: #e3f2fd;
	--goldion-color-light-grey: #eeeeee;
	--goldion-color-blue: #3f84e5;
	--goldion-color-black: #000000;

	/* Typography */
	--goldion-font-heading:
		"Montserrat",
		Arial,
		sans-serif;

	--goldion-font-body:
		"Roboto",
		Arial,
		sans-serif;

	--goldion-body-size:
		clamp(1rem, 0.25vw + 0.94rem, 1.125rem);

	--goldion-body-line-height: 1.7;

	/* Content widths */
	--goldion-content-max: 1200px;
	--goldion-content-narrow: 780px;
	--goldion-content-wide: 1440px;

	/*
	 * The gutter sits outside the 1200px content area.
	 *
	 * Approximate result:
	 * Mobile:  20px
	 * Tablet:  24–32px
	 * Desktop: up to 40px
	 */
	--goldion-page-gutter:
		clamp(20px, 3vw, 40px);

	/* Section spacing */
	--goldion-section-space-small:
		clamp(32px, 4vw, 56px);

	--goldion-section-space:
		clamp(48px, 7vw, 96px);

	--goldion-section-space-large:
		clamp(72px, 10vw, 140px);

	/* Grid and column gaps */
	--goldion-gap-xs: 8px;

	--goldion-gap-small:
		clamp(12px, 1.5vw, 20px);

	--goldion-gap-medium:
		clamp(20px, 2.5vw, 32px);

	--goldion-gap-large:
		clamp(32px, 4vw, 56px);

	--goldion-gap-xl:
		clamp(44px, 6vw, 80px);

	/* Accessibility */
	--goldion-focus-width: 3px;
	--goldion-focus-offset: 3px;
}


/* ==============================================================
   2. SAFE GLOBAL DEFAULTS
   ============================================================== */

html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

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

body {
	margin: 0;
	background-color: var(--goldion-color-white);
	color: var(--goldion-color-text);
	font-family: var(--goldion-font-body);
	font-size: var(--goldion-body-size);
	font-weight: 400;
	line-height: var(--goldion-body-line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input,
textarea,
select {
	font-family: var(--goldion-font-body);
}

/*
 * Prevent media from exceeding its container.
 */
img,
picture,
video,
canvas,
svg,
iframe {
	max-width: 100%;
}

img,
picture,
video {
	height: auto;
}

/*
 * Prevent long text, URLs and filenames from creating
 * horizontal scrolling.
 */
p,
li,
blockquote,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/*
 * Allow Divi columns and modules to shrink properly inside
 * CSS Grid and Flexbox layouts.
 */
.et_pb_column,
.et_pb_module,
.et_pb_module_inner {
	min-width: 0;
}


/* ==============================================================
   3. GLOBAL TYPOGRAPHY
   ============================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--goldion-color-primary);
	font-family: var(--goldion-font-heading);
	font-style: normal;
	font-weight: 700;
	letter-spacing: normal;
}

h1 {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.08;
}

h2 {
	font-size: clamp(2rem, 3.6vw, 3.5rem);
	line-height: 1.12;
}

h3 {
	font-size: clamp(1.625rem, 2.4vw, 2.5rem);
	line-height: 1.18;
}

h4 {
	font-size: clamp(1.375rem, 1.6vw, 1.875rem);
	line-height: 1.25;
}

h5 {
	font-size: clamp(1.125rem, 1vw, 1.5rem);
	line-height: 1.3;
}

h6 {
	font-size: clamp(1rem, 0.65vw, 1.25rem);
	line-height: 1.35;
}

/*
 * These are baseline values.
 *
 * A heading or text module configured through a Divi Preset
 * can still use its own font size, line height, weight or color.
 */


/* ==============================================================
   4. STANDARD DIVI SECTION SYSTEM
   ============================================================== */

/*
 * Normal sections:
 *
 * - Full-width background
 * - Responsive outer gutter
 * - Responsive vertical spacing
 *
 * Theme Builder header and footer layouts are not targeted.
 */
#main-content .et_pb_section:not(.et_pb_fullwidth_section),
.et-l--body .et_pb_section:not(.et_pb_fullwidth_section) {
	padding-block: var(--goldion-section-space);
	padding-inline: var(--goldion-page-gutter);
}

/*
 * Normal rows:
 *
 * - 100% width inside the section gutter
 * - Maximum 1200px usable content width
 * - Centered
 * - No default row padding
 */
#main-content .et_pb_row,
.et-l--body .et_pb_row {
	width: 100%;
	max-width: var(--goldion-content-max);
	margin-inline: auto;
	padding: 0;
}


/* ==============================================================
   5. SECTION SPACING UTILITIES
   Add these classes to a Divi Section.
   ============================================================== */

.goldion-section-small {
	padding-block: var(--goldion-section-space-small) !important;
}

.goldion-section-standard {
	padding-block: var(--goldion-section-space) !important;
}

.goldion-section-large {
	padding-block: var(--goldion-section-space-large) !important;
}

.goldion-section-none {
	padding-block: 0 !important;
}

.goldion-section-top-none {
	padding-top: 0 !important;
}

.goldion-section-bottom-none {
	padding-bottom: 0 !important;
}


/* ==============================================================
   6. ROW WIDTH UTILITIES
   Add these classes to a Divi Row.
   ============================================================== */

/*
 * Standard row:
 * 1200px maximum.
 *
 * No class is necessary because this is the global default.
 */
.goldion-row-standard {
	max-width: var(--goldion-content-max) !important;
}

/*
 * Recommended for long-form text and simple introductions.
 */
.goldion-row-narrow {
	max-width: var(--goldion-content-narrow) !important;
}

/*
 * Optional wider layout for large service grids.
 */
.goldion-row-wide {
	max-width: var(--goldion-content-wide) !important;
}

/*
 * Uses all available width inside the section gutter.
 */
.goldion-row-fluid {
	max-width: none !important;
}


/* ==============================================================
   7. OPT-IN GRID SYSTEM
   Add the classes to a Divi Row.
   ============================================================== */

/*
 * Basic example:
 *
 * goldion-grid goldion-cols-3
 *
 * Gap example:
 *
 * goldion-grid goldion-cols-3 goldion-gap-large
 */
.goldion-grid {
	--goldion-grid-columns: 1;
	--goldion-grid-gap-current: var(--goldion-gap-medium);

	display: grid !important;
	grid-template-columns:
		repeat(
			var(--goldion-grid-columns),
			minmax(0, 1fr)
		);

	gap: var(--goldion-grid-gap-current) !important;
	align-items: stretch;
}

/*
 * Divi uses clearfix pseudo-elements on rows.
 * They must not become extra grid items.
 */
.goldion-grid::before,
.goldion-grid::after {
	display: none !important;
}

/*
 * Remove Divi's percentage column widths and margins
 * when the opt-in Grid system is active.
 */
.goldion-grid > .et_pb_column {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	min-width: 0;
}


/* ==============================================================
   8. GRID COLUMN COUNTS
   ============================================================== */

.goldion-cols-1 {
	--goldion-grid-columns: 1;
}

.goldion-cols-2 {
	--goldion-grid-columns: 2;
}

.goldion-cols-3 {
	--goldion-grid-columns: 3;
}

.goldion-cols-4 {
	--goldion-grid-columns: 4;
}

.goldion-cols-5 {
	--goldion-grid-columns: 5;
}

.goldion-cols-6 {
	--goldion-grid-columns: 6;
}


/* ==============================================================
   9. GRID GAP SIZES
   ============================================================== */

.goldion-gap-none {
	--goldion-grid-gap-current: 0px;
}

.goldion-gap-xs {
	--goldion-grid-gap-current: var(--goldion-gap-xs);
}

.goldion-gap-small {
	--goldion-grid-gap-current: var(--goldion-gap-small);
}

.goldion-gap-medium {
	--goldion-grid-gap-current: var(--goldion-gap-medium);
}

.goldion-gap-large {
	--goldion-grid-gap-current: var(--goldion-gap-large);
}

.goldion-gap-xl {
	--goldion-grid-gap-current: var(--goldion-gap-xl);
}


/* ==============================================================
   10. RESPONSIVE GRID BEHAVIOUR
   ============================================================== */

/*
 * Narrow desktop and landscape tablet.
 *
 * Five- and six-column grids become three columns before
 * individual cards become too narrow.
 */
@media (max-width: 1180px) {

	.goldion-grid.goldion-cols-5,
	.goldion-grid.goldion-cols-6 {
		--goldion-grid-columns: 3;
	}
}


/*
 * Divi tablet range:
 * 768px–980px.
 *
 * Three- to six-column grids become two columns.
 */
@media (max-width: 980px) {

	.goldion-grid.goldion-cols-3,
	.goldion-grid.goldion-cols-4,
	.goldion-grid.goldion-cols-5,
	.goldion-grid.goldion-cols-6 {
		--goldion-grid-columns: 2;
	}
}


/*
 * Divi phone range:
 * Below 768px.
 *
 * All grids become one column by default.
 */
@media (max-width: 767px) {

	.goldion-grid {
		--goldion-grid-columns: 1;
	}
}


/* ==============================================================
   11. OPTIONAL TABLET COLUMN OVERRIDES
   Add one of these classes to the same Grid Row.
   ============================================================== */

@media (min-width: 768px) and (max-width: 980px) {

	.goldion-grid.goldion-tablet-1 {
		--goldion-grid-columns: 1 !important;
	}

	.goldion-grid.goldion-tablet-2 {
		--goldion-grid-columns: 2 !important;
	}

	.goldion-grid.goldion-tablet-3 {
		--goldion-grid-columns: 3 !important;
	}

	.goldion-grid.goldion-tablet-4 {
		--goldion-grid-columns: 4 !important;
	}
}


/* ==============================================================
   12. OPTIONAL MOBILE COLUMN OVERRIDES
   ============================================================== */

@media (max-width: 767px) {

	/*
	 * Useful for very simple icon, logo or compact service cards.
	 */
	.goldion-grid.goldion-mobile-2 {
		--goldion-grid-columns: 2 !important;
	}
}


/* ==============================================================
   13. OPTIONAL EQUAL-HEIGHT CARD STRUCTURE
   ============================================================== */

/*
 * Add goldion-equal-cards to the Grid Row.
 *
 * Add goldion-card to the card module inside each column.
 *
 * This does not add visual card styling. Backgrounds, borders,
 * shadows and radii remain controlled by Divi Presets.
 */
.goldion-equal-cards > .et_pb_column {
	display: flex;
	flex-direction: column;
}

.goldion-equal-cards .goldion-card {
	flex: 1 1 auto;
	width: 100%;
}


/* ==============================================================
   14. ACCESSIBILITY
   ============================================================== */

:where(
	a,
	button,
	input,
	textarea,
	select,
	summary,
	[tabindex]
):focus-visible {
	outline:
		var(--goldion-focus-width)
		solid
		var(--goldion-color-accent);

	outline-offset: var(--goldion-focus-offset);
}


/*
 * Respect reduced-motion preferences.
 */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==============================================================
   15. GOLDION SPEED-SHINE HOVER EFFECT
   Use on Button modules or card modules.
   ============================================================== */

/*
 * The class does not add a background, border, radius, shadow
 * or typography. Those remain controlled by your Divi Presets.
 *
 * It adds:
 * - A very small forward/upward movement
 * - A quick angled reflection passing across the element
 *
 * Divi Button modules are handled automatically.
 */
.goldion-speed-shine,
.et_pb_button_module_wrapper.goldion-speed-shine .et_pb_button {
	position: relative;
	isolation: isolate;
}

.goldion-speed-shine {
	transition:
		transform 280ms
		cubic-bezier(0.2, 0.75, 0.25, 1);
}

/*
 * Clipping keeps the moving reflection inside the card or button.
 */
.goldion-speed-shine:not(.et_pb_button_module_wrapper),
.et_pb_button_module_wrapper.goldion-speed-shine .et_pb_button {
	overflow: hidden;
}

/*
 * Angled reflection layer.
 */
.goldion-speed-shine:not(.et_pb_button_module_wrapper)::before,
.et_pb_button_module_wrapper.goldion-speed-shine .et_pb_button::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: -45%;
	left: -38%;
	width: 28%;
	height: 190%;
	pointer-events: none;
	opacity: 0;

	background:
		linear-gradient(
			105deg,
			transparent 0%,
			transparent 18%,
			rgb(255 255 255 / 0.12) 34%,
			rgb(255 255 255 / 0.55) 48%,
			rgb(63 132 229 / 0.22) 61%,
			transparent 78%,
			transparent 100%
		);

	transform:
		translate3d(-260%, 0, 0)
		skewX(-18deg);

	will-change: transform, opacity;
}


/*
 * Run the hover effect only on devices with a real mouse
 * or similar precise pointing device.
 */
@media (hover: hover) and (pointer: fine) {

	.goldion-speed-shine:hover {
		transform: translate3d(2px, -2px, 0);
	}

	.goldion-speed-shine:not(.et_pb_button_module_wrapper):hover::before,
	.et_pb_button_module_wrapper.goldion-speed-shine:hover
	.et_pb_button::before {
		animation:
			goldion-speed-shine-pass
			680ms
			cubic-bezier(0.2, 0.7, 0.2, 1)
			both;
	}
}


/*
 * Keyboard-accessible version of the effect.
 */
.goldion-speed-shine:focus-within {
	transform: translate3d(2px, -2px, 0);
}

.goldion-speed-shine:not(.et_pb_button_module_wrapper):focus-within::before,
.et_pb_button_module_wrapper.goldion-speed-shine:focus-within
.et_pb_button::before {
	animation:
		goldion-speed-shine-pass
		680ms
		cubic-bezier(0.2, 0.7, 0.2, 1)
		both;
}


@keyframes goldion-speed-shine-pass {

	0% {
		opacity: 0;

		transform:
			translate3d(-260%, 0, 0)
			skewX(-18deg);
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 0;

		transform:
			translate3d(650%, 0, 0)
			skewX(-18deg);
	}
}


/* ==============================================================
   16. H1 AND H2 DIRECTIONAL REVEAL
   Use on a Text or Heading module.
   ============================================================== */

/*
 * The heading enters subtly from the left while being revealed
 * in the direction of travel.
 *
 * The class works when:
 * - Applied directly to an H1 or H2
 * - Applied to a Divi Text module containing an H1 or H2
 * - Applied to a Divi Heading module
 */
.goldion-heading-reveal:is(h1, h2),
.goldion-heading-reveal h1,
.goldion-heading-reveal h2 {
	transform-origin: left center;
	backface-visibility: hidden;

	animation:
		goldion-heading-directional-reveal
		760ms
		cubic-bezier(0.18, 0.75, 0.25, 1)
		both;

	animation-delay:
		var(--goldion-heading-delay, 0ms);
}


@keyframes goldion-heading-directional-reveal {

	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translate3d(-22px, 0, 0);
	}

	55% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translate3d(0, 0, 0);
	}
}


/* ==============================================================
   17. STATIC SVG SECTION BACKGROUNDS
   Use these classes on Divi Sections.
   ============================================================== */

/*
 * Shared pattern behaviour.
 */
.goldion-pattern-angular-light,
.goldion-pattern-flow-light,
.goldion-pattern-angular-dark {
	background-repeat: repeat;
	background-position: center top;
	background-attachment: scroll;
}


/*
 * PATTERN 1 — ANGULAR TRANSIT NETWORK
 *
 * Designed for a white section.
 * Inspired by routes, mechanical connections and the angular
 * line-and-node pattern visible on the bus seats.
 */
.goldion-pattern-angular-light {
	background-color: var(--goldion-color-white);

	background-image:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NjAiIGhlaWdodD0iMzYwIiB2aWV3Qm94PSIwIDAgNzYwIDM2MCIgZmlsbD0ibm9uZSI+CjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxwYXRoIGQ9Ik0tNTAgMjg2TDEzMiA4NEwzMjQgMjM4TDUxOCA0OEw4MTAgMjE0IiBzdHJva2U9IiMzRjg0RTUiIHN0cm9rZS1vcGFjaXR5PSIuMTIiIHN0cm9rZS13aWR0aD0iMS4zNSIvPgo8cGF0aCBkPSJNLTM4IDQ0TDE4NCAyMTRMMzc0IDc0TDgwMiAzMzAiIHN0cm9rZT0iIzAwMUYzMyIgc3Ryb2tlLW9wYWNpdHk9Ii4wNzUiIHN0cm9rZS13aWR0aD0iMS4xIi8+CjxwYXRoIGQ9Ik02NiAzNTJMMjA2IDE0OEw0MzggMzE4TDY1MCAxMDIiIHN0cm9rZT0iI0U0NzYxNyIgc3Ryb2tlLW9wYWNpdHk9Ii4wNyIgc3Ryb2tlLXdpZHRoPSIxLjE1Ii8+CjxwYXRoIGQ9Ik0xMTIgMThMMzI0IDIzOEw2NDAgMzQ4IiBzdHJva2U9IiMzRjg0RTUiIHN0cm9rZS1vcGFjaXR5PSIuMDciIHN0cm9rZS13aWR0aD0iMSIvPgo8ZyBmaWxsPSIjM0Y4NEU1IiBmaWxsLW9wYWNpdHk9Ii4xNiI+CjxjaXJjbGUgY3g9IjEzMiIgY3k9Ijg0IiByPSIzLjIiLz48Y2lyY2xlIGN4PSIzMjQiIGN5PSIyMzgiIHI9IjMuMiIvPjxjaXJjbGUgY3g9IjUxOCIgY3k9IjQ4IiByPSIzLjIiLz48Y2lyY2xlIGN4PSIxODQiIGN5PSIyMTQiIHI9IjIuNiIvPjxjaXJjbGUgY3g9IjM3NCIgY3k9Ijc0IiByPSIyLjYiLz48Y2lyY2xlIGN4PSI0MzgiIGN5PSIzMTgiIHI9IjIuNiIvPgo8L2c+CjxjaXJjbGUgY3g9IjY1MCIgY3k9IjEwMiIgcj0iMyIgZmlsbD0iI0U0NzYxNyIgZmlsbC1vcGFjaXR5PSIuMTMiLz4KPC9nPgo8L3N2Zz4=");

	background-size: 760px 360px;
}


/*
 * PATTERN 2 — FLOWING TRANSIT LINES
 *
 * Designed for a white section.
 * Softer and more directional than the angular network.
 * Suitable for sustainability, electric buses or future-focused
 * service sections.
 */
.goldion-pattern-flow-light {
	background-color: var(--goldion-color-white);

	background-image:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MjAiIGhlaWdodD0iNDIwIiB2aWV3Qm94PSIwIDAgOTIwIDQyMCIgZmlsbD0ibm9uZSI+CjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CjxwYXRoIGQ9Ik0tMTEwIDMzMkMxMDggMTI2IDI4NiA0MjQgNTMwIDE5MEM3MDAgMjggNzk0IDE4NCAxMDMwIC00MiIgc3Ryb2tlPSIjMDAxRjMzIiBzdHJva2Utb3BhY2l0eT0iLjA2NSIgc3Ryb2tlLXdpZHRoPSIxLjI1Ii8+CjxwYXRoIGQ9Ik0tMTE4IDM1NkMxMDYgMTUwIDI5MiA0NDggNTQ4IDIwOEM3MTQgNTIgODE0IDIwMCAxMDQyIC0xOCIgc3Ryb2tlPSIjM0Y4NEU1IiBzdHJva2Utb3BhY2l0eT0iLjEwNSIgc3Ryb2tlLXdpZHRoPSIxLjM1Ii8+CjxwYXRoIGQ9Ik0tOTIgMzA2QzExOCAxMDQgMjc4IDM5MiA1MTYgMTY2QzY4MCAxMiA3NzAgMTYwIDEwMTIgLTY2IiBzdHJva2U9IiMzRjg0RTUiIHN0cm9rZS1vcGFjaXR5PSIuMDU1IiBzdHJva2Utd2lkdGg9IjEiLz4KPHBhdGggZD0iTTExNiAyMTZMMTcyIDI3ME0zMzQgMjkwTDM4OCAzNDRNNTgyIDE1OEw2NDAgMjE0TTc3NiAxMTJMODM0IDE2OCIgc3Ryb2tlPSIjRTQ3NjE3IiBzdHJva2Utb3BhY2l0eT0iLjA3IiBzdHJva2Utd2lkdGg9IjEuMSIvPgo8ZyBmaWxsPSIjM0Y4NEU1IiBmaWxsLW9wYWNpdHk9Ii4xMyI+CjxjaXJjbGUgY3g9IjE3MiIgY3k9IjI3MCIgcj0iMi44Ii8+PGNpcmNsZSBjeD0iMzg4IiBjeT0iMzQ0IiByPSIyLjgiLz48Y2lyY2xlIGN4PSI2NDAiIGN5PSIyMTQiIHI9IjIuOCIvPjxjaXJjbGUgY3g9IjgzNCIgY3k9IjE2OCIgcj0iMi44Ii8+CjwvZz4KPC9nPgo8L3N2Zz4=");

	background-size: 920px 420px;
	background-position: center center;
}


/*
 * PATTERN 3 — ELECTRIC NETWORK ON DARK BLUE
 *
 * Sets the section background to Goldion dark blue.
 * Uses pale-blue and electric-blue lines with occasional
 * orange connection points.
 */
.goldion-pattern-angular-dark {
	background-color: var(--goldion-color-primary);

	background-image:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NjAiIGhlaWdodD0iMzYwIiB2aWV3Qm94PSIwIDAgNzYwIDM2MCIgZmlsbD0ibm9uZSI+CjxnIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxwYXRoIGQ9Ik0tNDYgMjkyTDEyNiA3OEwzMjAgMjQwTDUyMCA0Mkw4MDYgMjE4IiBzdHJva2U9IiNFM0YyRkQiIHN0cm9rZS1vcGFjaXR5PSIuMTMiIHN0cm9rZS13aWR0aD0iMS4yNSIvPgo8cGF0aCBkPSJNLTI4IDM2TDE4OCAyMTRMMzc4IDcyTDgwNCAzMzIiIHN0cm9rZT0iIzNGODRFNSIgc3Ryb2tlLW9wYWNpdHk9Ii4yMCIgc3Ryb2tlLXdpZHRoPSIxLjI1Ii8+CjxwYXRoIGQ9Ik02NCAzNTRMMjEwIDE0Nkw0NDIgMzE4TDY1MiAxMDAiIHN0cm9rZT0iI0UzRjJGRCIgc3Ryb2tlLW9wYWNpdHk9Ii4wNzUiIHN0cm9rZS13aWR0aD0iMSIvPgo8cGF0aCBkPSJNMTEwIDE2TDMyMCAyNDBMNjQyIDM1MCIgc3Ryb2tlPSIjM0Y4NEU1IiBzdHJva2Utb3BhY2l0eT0iLjEwIiBzdHJva2Utd2lkdGg9IjEiLz4KPGcgZmlsbD0iIzNGODRFNSIgZmlsbC1vcGFjaXR5PSIuMzQiPgo8Y2lyY2xlIGN4PSIxMjYiIGN5PSI3OCIgcj0iMy4xIi8+PGNpcmNsZSBjeD0iMzIwIiBjeT0iMjQwIiByPSIzLjEiLz48Y2lyY2xlIGN4PSI1MjAiIGN5PSI0MiIgcj0iMy4xIi8+PGNpcmNsZSBjeD0iMTg4IiBjeT0iMjE0IiByPSIyLjYiLz48Y2lyY2xlIGN4PSIzNzgiIGN5PSI3MiIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iNDQyIiBjeT0iMzE4IiByPSIyLjYiLz4KPC9nPgo8Y2lyY2xlIGN4PSI2NTIiIGN5PSIxMDAiIHI9IjMiIGZpbGw9IiNFNDc2MTciIGZpbGwtb3BhY2l0eT0iLjMwIi8+CjwvZz4KPC9zdmc+");

	background-size: 760px 360px;
}


/* ==============================================================
   18. REDUCED-MOTION PROTECTION FOR NEW EFFECTS
   ============================================================== */

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

	.goldion-speed-shine {
		transform: none !important;
	}

	.goldion-speed-shine:not(.et_pb_button_module_wrapper)::before,
	.et_pb_button_module_wrapper.goldion-speed-shine
	.et_pb_button::before {
		display: none !important;
		animation: none !important;
	}

	.goldion-heading-reveal:is(h1, h2),
	.goldion-heading-reveal h1,
	.goldion-heading-reveal h2 {
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
		animation: none !important;
	}
}

/* ==============================================================
   19. GOLDION MECHANICAL LIFT
   Use on cards, columns, modules or other interactive elements.
   ============================================================== */

/*
 * Creates a short, firm upward movement with a technical-looking
 * hover shadow and a narrow accent line along the bottom.
 *
 * The element's normal appearance remains controlled by Divi.
 */
.goldion-mechanical-lift {
	--goldion-lift-distance: -6px;
	--goldion-lift-scale: 1.008;
	--goldion-lift-accent: var(--goldion-color-accent);
	--goldion-lift-shadow:
		0 18px 42px rgb(0 31 51 / 0.16);

	position: relative;
	backface-visibility: hidden;

	transition:
		transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1),
		box-shadow 280ms cubic-bezier(0.2, 0.75, 0.25, 1);
}


@media (hover: hover) and (pointer: fine) {

	.goldion-mechanical-lift:hover {
		transform:
			translate3d(0, var(--goldion-lift-distance), 0)
			scale(var(--goldion-lift-scale));

		box-shadow:
			var(--goldion-lift-shadow),
			inset 0 -3px 0 var(--goldion-lift-accent);
	}
}


/*
 * Also activate the effect when an interactive element inside
 * the card receives keyboard focus.
 */
.goldion-mechanical-lift:focus-within {
	transform:
		translate3d(0, var(--goldion-lift-distance), 0)
		scale(var(--goldion-lift-scale));

	box-shadow:
		var(--goldion-lift-shadow),
		inset 0 -3px 0 var(--goldion-lift-accent);
}


/* ==============================================================
   20. GOLDION TECHNICAL CORNER FRAME
   Use on cards, rows, columns or highlighted modules.
   ============================================================== */

/*
 * Adds small technical corner lines without creating a complete
 * border around the element.
 *
 * It does not add backgrounds, padding, shadows or border radii.
 */
.goldion-tech-frame {
	--goldion-frame-color: rgb(63 132 229 / 0.62);
	--goldion-frame-length: 28px;
	--goldion-frame-width: 1px;
	--goldion-frame-inset: 0px;

	position: relative;
	isolation: isolate;
}


.goldion-tech-frame::after {
	content: "";
	position: absolute;
	z-index: 5;
	inset: var(--goldion-frame-inset);
	pointer-events: none;
	border-radius: inherit;

	background:
		/* Top-left corner */
		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		top left /
		var(--goldion-frame-length)
		var(--goldion-frame-width)
		no-repeat,

		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		top left /
		var(--goldion-frame-width)
		var(--goldion-frame-length)
		no-repeat,

		/* Top-right corner */
		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		top right /
		var(--goldion-frame-length)
		var(--goldion-frame-width)
		no-repeat,

		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		top right /
		var(--goldion-frame-width)
		var(--goldion-frame-length)
		no-repeat,

		/* Bottom-left corner */
		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		bottom left /
		var(--goldion-frame-length)
		var(--goldion-frame-width)
		no-repeat,

		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		bottom left /
		var(--goldion-frame-width)
		var(--goldion-frame-length)
		no-repeat,

		/* Bottom-right corner */
		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		bottom right /
		var(--goldion-frame-length)
		var(--goldion-frame-width)
		no-repeat,

		linear-gradient(
			var(--goldion-frame-color),
			var(--goldion-frame-color)
		)
		bottom right /
		var(--goldion-frame-width)
		var(--goldion-frame-length)
		no-repeat;
}


/*
 * Optional modifier for elements on dark backgrounds.
 */
.goldion-tech-frame-on-dark {
	--goldion-frame-color: rgb(227 242 253 / 0.55);
}


/*
 * Optional orange variation.
 */
.goldion-tech-frame-accent {
	--goldion-frame-color: rgb(228 118 23 / 0.72);
}


/* ==============================================================
   21. GOLDION DIRECTIONAL EDGE TRACE
   Use on cards, columns, buttons or highlighted modules.
   ============================================================== */

/*
 * Creates a narrow blue/orange energy segment that quickly moves
 * around the edge of the element on hover.
 *
 * This does not add a permanent border.
 */

@property --goldion-edge-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}


.goldion-edge-trace {
	--goldion-edge-width: 1.5px;
	--goldion-edge-angle: 0deg;

	position: relative;
	isolation: isolate;
}


.goldion-edge-trace::before {
	content: "";
	position: absolute;
	z-index: 6;
	inset: 0;
	padding: var(--goldion-edge-width);
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;

	background:
		conic-gradient(
			from var(--goldion-edge-angle),

			transparent 0deg,
			transparent 270deg,

			rgb(63 132 229 / 0.15) 288deg,
			rgb(63 132 229 / 0.95) 310deg,
			rgb(228 118 23 / 0.95) 326deg,

			transparent 346deg,
			transparent 360deg
		);

	/*
	 * Keep only the narrow outer ring of the generated layer.
	 */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);

	-webkit-mask-composite: xor;

	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);

	mask-composite: exclude;
}


@media (hover: hover) and (pointer: fine) {

	.goldion-edge-trace:hover::before {
		animation:
			goldion-edge-trace-pass
			900ms
			cubic-bezier(0.2, 0.7, 0.2, 1)
			both;
	}
}


.goldion-edge-trace:focus-within::before {
	animation:
		goldion-edge-trace-pass
		900ms
		cubic-bezier(0.2, 0.7, 0.2, 1)
		both;
}


@keyframes goldion-edge-trace-pass {

	0% {
		--goldion-edge-angle: 0deg;
		opacity: 0;
	}

	12% {
		opacity: 1;
	}

	82% {
		opacity: 1;
	}

	100% {
		--goldion-edge-angle: 360deg;
		opacity: 0;
	}
}


/* ==============================================================
   22. GOLDION ROUTE-LINE CONNECTOR
   Use on Divi Rows containing process or service columns.
   ============================================================== */

/*
 * Add goldion-route-row to a Divi Row.
 *
 * The direct Divi columns automatically become route steps.
 * No additional class is normally necessary on the columns.
 *
 * Desktop:
 * A horizontal route line connects the columns.
 *
 * Mobile:
 * The route becomes vertical.
 */
.goldion-route-row {
	--goldion-route-line:
		rgb(63 132 229 / 0.34);

	--goldion-route-node:
		var(--goldion-color-accent);

	--goldion-route-node-border:
		var(--goldion-color-blue);

	--goldion-route-surface:
		var(--goldion-color-white);

	--goldion-route-node-size: 12px;
	--goldion-route-node-ring: 5px;
	--goldion-route-line-y: 18px;
	--goldion-route-item-space: 48px;

	position: relative;
	isolation: isolate;
}


/*
 * Horizontal connector line.
 */
.goldion-route-row::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--goldion-route-line-y);
	left: 4%;
	right: 4%;
	height: 1px;
	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			var(--goldion-route-line) 8%,
			var(--goldion-route-line) 92%,
			transparent 100%
		);
}


/*
 * The earlier Goldion Grid system hides row pseudo-elements.
 * This restores the route line when both classes are combined.
 */
.goldion-grid.goldion-route-row::before {
	display: block !important;
}

.goldion-grid.goldion-route-row::after {
	display: none !important;
}


/*
 * Standard Divi columns become route items automatically.
 *
 * The goldion-route-item selector also supports custom direct
 * children when needed.
 */
.goldion-route-row > .et_pb_column,
.goldion-route-row > .goldion-route-item {
	position: relative;
	z-index: 1;
	padding-top: var(--goldion-route-item-space);
}


/*
 * Route connection node.
 */
.goldion-route-row > .et_pb_column::before,
.goldion-route-row > .goldion-route-item::before {
	content: "";
	position: absolute;
	z-index: 4;
	top:
		calc(
			var(--goldion-route-line-y) -
			(var(--goldion-route-node-size) / 2)
		);

	left: 50%;

	width: var(--goldion-route-node-size);
	height: var(--goldion-route-node-size);

	border:
		2px solid
		var(--goldion-route-node-border);

	border-radius: 50%;

	background:
		var(--goldion-route-node);

	box-shadow:
		0 0 0
		var(--goldion-route-node-ring)
		var(--goldion-route-surface);

	transform: translateX(-50%);
}


/*
 * Optional modifier for a route row placed on a dark section.
 */
.goldion-route-dark {
	--goldion-route-line:
		rgb(227 242 253 / 0.28);

	--goldion-route-node:
		var(--goldion-color-accent);

	--goldion-route-node-border:
		var(--goldion-color-light-blue);

	--goldion-route-surface:
		var(--goldion-color-primary);
}


/*
 * Mobile route:
 * Convert the horizontal line into a vertical route.
 */
@media (max-width: 767px) {

	.goldion-route-row::before {
		top: 0;
		bottom: 0;
		left: 16px;
		right: auto;
		width: 1px;
		height: auto;

		background:
			linear-gradient(
				180deg,
				transparent 0%,
				var(--goldion-route-line) 5%,
				var(--goldion-route-line) 95%,
				transparent 100%
			);
	}

	.goldion-route-row > .et_pb_column,
	.goldion-route-row > .goldion-route-item {
		padding-top: 0;
		padding-left: 48px;
	}

	.goldion-route-row > .et_pb_column::before,
	.goldion-route-row > .goldion-route-item::before {
		top: 1.15em;
		left: 16px;

		transform:
			translate(-50%, -50%);
	}
}


/* ==============================================================
   23. GOLDION ANGLED CONTENT REVEAL
   Use on Sections, Rows, Columns or Modules.
   ============================================================== */

/*
 * Creates a short directional reveal with an angled leading edge.
 *
 * This is a CSS page-load animation. It does not wait until the
 * visitor scrolls the element into view.
 */
.goldion-angled-reveal {
	transform-origin: left center;
	backface-visibility: hidden;

	animation:
		goldion-angled-reveal-left
		780ms
		cubic-bezier(0.18, 0.74, 0.22, 1)
		both;

	animation-delay:
		var(--goldion-reveal-delay, 0ms);
}


@keyframes goldion-angled-reveal-left {

	0% {
		opacity: 0;

		clip-path:
			polygon(
				0 0,
				8% 0,
				0 100%,
				0 100%
			);

		transform:
			translate3d(-24px, 0, 0);
	}

	50% {
		opacity: 1;
	}

	98% {
		opacity: 1;

		clip-path:
			polygon(
				0 0,
				100% 0,
				100% 100%,
				0 100%
			);

		transform:
			translate3d(0, 0, 0);
	}

	100% {
		opacity: 1;
		clip-path: none;
		transform: none;
	}
}


/*
 * Optional right-to-left variation.
 *
 * Use both classes:
 * goldion-angled-reveal goldion-reveal-from-right
 */
.goldion-angled-reveal.goldion-reveal-from-right {
	transform-origin: right center;

	animation-name:
		goldion-angled-reveal-right;
}


@keyframes goldion-angled-reveal-right {

	0% {
		opacity: 0;

		clip-path:
			polygon(
				92% 0,
				100% 0,
				100% 100%,
				100% 100%
			);

		transform:
			translate3d(24px, 0, 0);
	}

	50% {
		opacity: 1;
	}

	98% {
		opacity: 1;

		clip-path:
			polygon(
				0 0,
				100% 0,
				100% 100%,
				0 100%
			);

		transform:
			translate3d(0, 0, 0);
	}

	100% {
		opacity: 1;
		clip-path: none;
		transform: none;
	}
}


/* ==============================================================
   24. GOLDION TECH GRID SVG BACKGROUNDS
   Use on Sections, Rows, Columns or Modules.
   ============================================================== */

/*
 * These classes add only the SVG grid pattern.
 *
 * They do not set a background color, allowing you to select the
 * section, row or module background normally in Divi.
 *
 * Light version:
 * Dark grid lines for white or pale backgrounds.
 *
 * Dark version:
 * Pale-blue grid lines for dark backgrounds.
 */
.goldion-tech-grid-light,
.goldion-tech-grid-dark {
	--goldion-tech-grid-size: 48px;

	background-repeat: repeat;
	background-position: center top;
	background-attachment: scroll;

	background-size:
		var(--goldion-tech-grid-size)
		var(--goldion-tech-grid-size);
}


/*
 * Grid for white and light backgrounds.
 */
.goldion-tech-grid-light {
	background-image:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTYgMFY2NE0zMiAwVjY0TTQ4IDBWNjRNMCAxNkg2NE0wIDMySDY0TTAgNDhINjQiIHN0cm9rZT0iIzAwMUYzMyIgc3Ryb2tlLW9wYWNpdHk9Ii4wMzUiIHN0cm9rZS13aWR0aD0iMSIvPjxwYXRoIGQ9Ik0wIC41SDY0TS41IDBWNjQiIHN0cm9rZT0iIzAwMUYzMyIgc3Ryb2tlLW9wYWNpdHk9Ii4wODUiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==");
}


/*
 * Grid for dark-blue, black or similarly dark backgrounds.
 */
.goldion-tech-grid-dark {
	background-image:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTYgMFY2NE0zMiAwVjY0TTQ4IDBWNjRNMCAxNkg2NE0wIDMySDY0TTAgNDhINjQiIHN0cm9rZT0iI0UzRjJGRCIgc3Ryb2tlLW9wYWNpdHk9Ii4wNTUiIHN0cm9rZS13aWR0aD0iMSIvPjxwYXRoIGQ9Ik0wIC41SDY0TS41IDBWNjQiIHN0cm9rZT0iIzNGODRFNSIgc3Ryb2tlLW9wYWNpdHk9Ii4xNiIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+");
}


/*
 * Recommended for full-width Sections.
 *
 * Creates a larger, quieter grid.
 */
.goldion-tech-grid-section {
	--goldion-tech-grid-size: 64px;
}


/*
 * Recommended for Rows, Columns and Modules.
 */
.goldion-tech-grid-compact {
	--goldion-tech-grid-size: 40px;
}


/*
 * Optional finer pattern for small cards or labels.
 */
.goldion-tech-grid-fine {
	--goldion-tech-grid-size: 28px;
}


/* ==============================================================
   25. REDUCED-MOTION SUPPORT FOR NEW EFFECTS
   ============================================================== */

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

	.goldion-mechanical-lift,
	.goldion-mechanical-lift:hover,
	.goldion-mechanical-lift:focus-within {
		transform: none !important;
		box-shadow: inherit;
	}

	.goldion-edge-trace::before,
	.goldion-edge-trace:hover::before,
	.goldion-edge-trace:focus-within::before {
		opacity: 0 !important;
		animation: none !important;
	}

	.goldion-angled-reveal,
	.goldion-angled-reveal.goldion-reveal-from-right {
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
		animation: none !important;
	}
}

/* =========================================================
   GOLDION — FULLSCREEN VIDEO HERO
   Desktop + tablet: full viewport
   Mobile: half viewport
   ========================================================= */

.goldion-video-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    overflow: hidden;
}

/* Force Divi's video background to fill the entire hero */
.goldion-video-hero .et_pb_section_video_bg {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

/* Behave like CSS background-size: cover */
.goldion-video-hero .et_pb_section_video_bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover;
    object-position: center center;

    transform: translate(-50%, -50%);

    /* Video cannot be clicked, paused or interacted with */
    pointer-events: none;
}

/* Mobile — half-screen hero */
@media only screen and (max-width: 767px) {

    .goldion-video-hero {
        height: 50vh;
        height: 50dvh;
        min-height: 50vh;
        min-height: 50dvh;
    }

}

/* ==============================================================
   26. GOLDION RESPONSIVE THEME BUILDER HEADER
   ============================================================== */

/*
 * THEME BUILDER STRUCTURE
 *
 * DESKTOP SECTION:
 * goldion-header goldion-header-desktop
 *
 * DESKTOP ROW:
 * goldion-header-row goldion-header-row-desktop
 *
 * DESKTOP LOGO IMAGE MODULE:
 * goldion-header-logo
 *
 * DESKTOP MENU MODULE:
 * goldion-header-menu
 *
 * DESKTOP CTA BUTTON MODULE:
 * goldion-header-cta goldion-speed-shine
 *
 *
 * TABLET / MOBILE SECTION:
 * goldion-header goldion-header-mobile
 *
 * TABLET / MOBILE ROW:
 * goldion-header-row goldion-header-row-mobile
 *
 * TABLET / MOBILE MENU MODULE:
 * goldion-mobile-menu
 */


/* ==============================================================
   HEADER VARIABLES
   ============================================================== */

:root {

	--goldion-header-bg:
		rgb(0 31 51 / 0.97);

	--goldion-header-border:
		rgb(227 242 253 / 0.10);

	--goldion-header-menu-hover:
		var(--goldion-color-accent);
}


/* ==============================================================
   SHARED HEADER SHELL
   ============================================================== */

.et-l--header {
	position: relative;
	z-index: 9999;
}


.goldion-header {
	position: relative;
	z-index: 9999;

	margin: 0 !important;
	padding: 0 !important;

	background:
		var(--goldion-header-bg);

	border-bottom:
		1px solid
		var(--goldion-header-border);

	box-shadow:
		0 10px 34px
		rgb(0 15 28 / 0.10);
}


/*
 * Thin Goldion technical accent beneath the header.
 */
.goldion-header::after {
	content: "";

	position: absolute;
	z-index: 5;

	left: 0;
	right: 0;
	bottom: -1px;

	height: 1px;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgb(63 132 229 / 0.14) 18%,
			rgb(63 132 229 / 0.72) 47%,
			rgb(228 118 23 / 0.78) 72%,
			transparent 100%
		);
}


/*
 * Subtle glass effect.
 * Header dimensions remain unchanged.
 */
@supports (
	(-webkit-backdrop-filter: blur(10px)) or
	(backdrop-filter: blur(10px))
) {

	.goldion-header {
		-webkit-backdrop-filter:
			blur(10px);

		backdrop-filter:
			blur(10px);
	}
}


/* ==============================================================
   SHARED HEADER ROW
   ============================================================== */

.goldion-header-row {
	width:
		calc(
			100% -
			(2 * var(--goldion-page-gutter))
		)
		!important;

	max-width:
		var(--goldion-content-max)
		!important;

	margin:
		0 auto
		!important;
}


/* ==============================================================
   DESKTOP HEADER
   981px AND ABOVE
   ============================================================== */

@media (min-width: 981px) {

	/*
	 * Safety:
	 * desktop only.
	 */
	.goldion-header-mobile {
		display: none !important;
	}


	/* ----------------------------------------------------------
	   DESKTOP ROW
	   ---------------------------------------------------------- */

	.goldion-header-row-desktop {
		display: flex !important;

		align-items: center;

		padding:
			15px 0
			!important;
	}


	/*
	 * Remove Divi clearfix elements so they don't become
	 * flex children.
	 */
	.goldion-header-row-desktop::before,
	.goldion-header-row-desktop::after {
		display: none !important;
	}


	.goldion-header-row-desktop >
	.et_pb_column {
		float: none !important;

		margin: 0 !important;

		min-width: 0;

		display: flex;

		align-items: center;
	}


	/* ----------------------------------------------------------
	   COLUMN 1 — LOGO
	   ---------------------------------------------------------- */

	.goldion-header-row-desktop >
	.et_pb_column:nth-child(1) {
		flex:
			0 0 auto;

		justify-content:
			flex-start;
	}


	/* ----------------------------------------------------------
	   COLUMN 2 — NAVIGATION
	   ---------------------------------------------------------- */

	.goldion-header-row-desktop >
	.et_pb_column:nth-child(2) {
		flex:
			1 1 auto;

		justify-content:
			center;

		padding-inline:
			clamp(18px, 2.5vw, 40px);
	}


	/* ----------------------------------------------------------
	   COLUMN 3 — CTA
	   ---------------------------------------------------------- */

	.goldion-header-row-desktop >
	.et_pb_column:nth-child(3) {
		flex:
			0 0 auto;

		justify-content:
			flex-end;
	}


	/* ==========================================================
	   DESKTOP LOGO
	   ========================================================== */

	/*
	 * IMPORTANT:
	 *
	 * No width, max-width, height or max-height is specified.
	 *
	 * Logo sizing is controlled completely from Divi.
	 */
	.goldion-header-logo {
		margin: 0 !important;
	}


	.goldion-header-logo
	.et_pb_image_wrap {
		display: block;
	}


	.goldion-header-logo img,
	.goldion-header-logo svg {
		display: block;
	}


	/* ==========================================================
	   DESKTOP MENU MODULE
	   ========================================================== */

	.goldion-header-menu {
		width: 100%;

		margin: 0 !important;

		background:
			transparent
			!important;
	}


	.goldion-header-menu
	.et_pb_menu_inner_container {
		width: 100%;
	}


	.goldion-header-menu
	.et_pb_menu__wrap {
		justify-content:
			center;
	}


	.goldion-header-menu
	.et-menu {
		align-items: center;

		margin: 0 !important;
	}


	/* ----------------------------------------------------------
	   MAIN MENU ITEMS
	   ---------------------------------------------------------- */

	.goldion-header-menu
	.et-menu >
	li {
		position: relative;

		margin:
			0
			!important;

		padding:
			0 clamp(8px, 0.9vw, 15px)
			!important;
	}


	.goldion-header-menu
	.et-menu >
	li >
	a {
		padding:
			10px 0
			!important;

		color:
			var(--goldion-color-white)
			!important;

		font-family:
			var(--goldion-font-heading);

		font-size:
			14px;

		font-weight:
			600;

		line-height:
			1.25;

		letter-spacing:
			0.025em;

		white-space:
			nowrap;

		transition:
			color 180ms ease;
	}


	/* ----------------------------------------------------------
	   MENU ACTIVE / HOVER INDICATOR
	   ---------------------------------------------------------- */

	.goldion-header-menu
	.et-menu >
	li::before {
		content: "";

		position: absolute;

		left: 50%;
		bottom: 2px;

		width: 0;
		height: 2px;

		border-radius:
			2px;

		background:
			var(--goldion-color-accent);

		transform:
			translateX(-50%);

		transition:
			width 220ms
			cubic-bezier(
				0.2,
				0.75,
				0.25,
				1
			);
	}


	.goldion-header-menu
	.et-menu >
	li:hover >
	a,

	.goldion-header-menu
	.et-menu >
	li.current-menu-item >
	a,

	.goldion-header-menu
	.et-menu >
	li.current-menu-ancestor >
	a {
		color:
			var(--goldion-header-menu-hover)
			!important;
	}


	.goldion-header-menu
	.et-menu >
	li:hover::before,

	.goldion-header-menu
	.et-menu >
	li.current-menu-item::before,

	.goldion-header-menu
	.et-menu >
	li.current-menu-ancestor::before {
		width:
			22px;
	}


	/* ==========================================================
	   DESKTOP DROPDOWN MENU
	   ========================================================== */

	.goldion-header-menu
	.nav
	li
	ul {
		width:
			240px;

		padding:
			8px 0
			!important;

		border-top:
			2px solid
			var(--goldion-color-accent)
			!important;

		border-radius:
			0 0 4px 4px;

		background:
			var(--goldion-color-primary)
			!important;

		box-shadow:
			0 18px 46px
			rgb(0 10 20 / 0.25);
	}


	.goldion-header-menu
	.nav
	li
	ul
	a {
		width:
			100%;

		padding:
			11px 18px
			!important;

		color:
			rgb(255 255 255 / 0.90)
			!important;

		font-size:
			13px;

		line-height:
			1.35;

		transition:
			color 180ms ease,
			background-color 180ms ease;
	}


	.goldion-header-menu
	.nav
	li
	ul
	a:hover {
		color:
			var(--goldion-color-white)
			!important;

		background:
			rgb(63 132 229 / 0.13)
			!important;

		opacity:
			1
			!important;
	}


	/* ==========================================================
	   DESKTOP CTA
	   ========================================================== */

	.goldion-header-cta {
		margin:
			0
			!important;
	}


	.goldion-header-cta
	.et_pb_button {
		white-space:
			nowrap;

		border:
			1px solid
			var(--goldion-color-accent)
			!important;

		border-radius:
			2px
			!important;

		background:
			var(--goldion-color-accent)
			!important;

		color:
			var(--goldion-color-white)
			!important;

		padding:
			0.72em 1.25em
			!important;

		font-family:
			var(--goldion-font-heading);

		font-size:
			14px
			!important;

		font-weight:
			700
			!important;

		line-height:
			1.25
			!important;

		letter-spacing:
			0.025em;
	}


	.goldion-header-cta
	.et_pb_button:hover {
		padding:
			0.72em 1.25em
			!important;

		background:
			#f08322
			!important;

		border-color:
			#f08322
			!important;
	}


	/*
	 * Prevent Divi's button arrow from changing
	 * the button width on hover.
	 */
	.goldion-header-cta
	.et_pb_button::after {
		display:
			none
			!important;
	}
}


/* ==============================================================
   SMALLER DESKTOP / LAPTOP
   ============================================================== */

@media (
	min-width: 981px
) and (
	max-width: 1180px
) {

	.goldion-header-row-desktop >
	.et_pb_column:nth-child(2) {
		padding-inline:
			12px;
	}


	.goldion-header-menu
	.et-menu >
	li {
		padding-inline:
			7px
			!important;
	}


	.goldion-header-menu
	.et-menu >
	li >
	a {
		font-size:
			13px;
	}


	.goldion-header-cta
	.et_pb_button {
		font-size:
			13px
			!important;

		padding:
			0.68em 1em
			!important;
	}


	.goldion-header-cta
	.et_pb_button:hover {
		padding:
			0.68em 1em
			!important;
	}
}


/* ==============================================================
   TABLET + MOBILE HEADER
   980px AND BELOW
   ============================================================== */

@media (max-width: 980px) {

	/*
	 * Safety:
	 * mobile/tablet only.
	 */
	.goldion-header-desktop {
		display:
			none
			!important;
	}


	/* ----------------------------------------------------------
	   MOBILE ROW
	   ---------------------------------------------------------- */

	.goldion-header-row-mobile {
		display:
			block
			!important;

		padding:
			10px 0
			!important;
	}


	.goldion-header-row-mobile >
	.et_pb_column {
		float:
			none
			!important;

		width:
			100%
			!important;

		margin:
			0
			!important;
	}


	/* ==========================================================
	   MOBILE MENU MODULE
	   ========================================================== */

	.goldion-mobile-menu {
		width:
			100%;

		margin:
			0
			!important;

		background:
			transparent
			!important;

		overflow:
			visible
			!important;
	}


	/*
	 * Important for keeping the Menu module logo and
	 * hamburger side-by-side.
	 */
	.goldion-mobile-menu
	.et_pb_menu_inner_container {
		position:
			relative;

		display:
			flex
			!important;

		align-items:
			center
			!important;

		justify-content:
			space-between
			!important;

		width:
			100%;
	}


	/* ==========================================================
	   MOBILE MENU LOGO
	   ========================================================== */

	/*
	 * The following rules intentionally contain NO:
	 *
	 * width
	 * max-width
	 * height
	 * max-height
	 *
	 * Divi therefore remains responsible for SVG sizing.
	 *
	 * These rules only make sure that Divi's Menu-module logo
	 * stays rendered on tablet and mobile.
	 */

	.goldion-mobile-menu
	.et_pb_menu__logo-wrap {
		display:
			flex
			!important;

		flex:
			0 1 auto;

		align-items:
			center;

		margin:
			0
			!important;

		visibility:
			visible
			!important;

		opacity:
			1
			!important;
	}


	.goldion-mobile-menu
	.et_pb_menu__logo {
		display:
			flex
			!important;

		align-items:
			center;

		margin:
			0
			!important;

		visibility:
			visible
			!important;

		opacity:
			1
			!important;
	}


	.goldion-mobile-menu
	.et_pb_menu__logo
	img,

	.goldion-mobile-menu
	.et_pb_menu__logo
	svg {
		display:
			block
			!important;

		visibility:
			visible
			!important;

		opacity:
			1
			!important;
	}


	/* ==========================================================
	   MOBILE NAVIGATION WRAPPER
	   ========================================================== */

	/*
	 * Force the normal desktop menu links off at this
	 * breakpoint.
	 */
	.goldion-mobile-menu
	.et_pb_menu__menu {
		display:
			none
			!important;
	}


	/*
	 * Keep Divi's mobile navigation / hamburger visible.
	 */
	.goldion-mobile-menu
	.et_mobile_nav_menu {
		display:
			flex
			!important;

		align-items:
			center;

		margin:
			0
			!important;
	}


	/*
	 * Push hamburger to the far right.
	 */
	.goldion-mobile-menu
	.et_pb_menu__wrap {
		flex:
			0 0 auto
			!important;

		justify-content:
			flex-end
			!important;

		margin-left:
			auto;
	}


	/* ==========================================================
	   HAMBURGER ICON
	   ========================================================== */

	.goldion-mobile-menu
	.mobile_menu_bar {
		display:
			flex;

		align-items:
			center;

		justify-content:
			center;

		padding:
			6px
			!important;

		line-height:
			1;
	}


	.goldion-mobile-menu
	.mobile_menu_bar::before {
		color:
			var(--goldion-color-accent)
			!important;

		font-size:
			32px;
	}


	/* ==========================================================
	   MOBILE DROPDOWN PANEL
	   ========================================================== */

	.goldion-mobile-menu
	.et_mobile_menu {
		left:
			50%
			!important;

		top:
			calc(100% + 10px)
			!important;

		width:
			100vw
			!important;

		max-width:
			none
			!important;

		margin:
			0
			!important;

		padding:
			8px
			var(--goldion-page-gutter)
			14px
			!important;

		border:
			0
			!important;

		border-top:
			2px solid
			var(--goldion-color-accent)
			!important;

		background:
			var(--goldion-color-primary)
			!important;

		box-shadow:
			0 22px 44px
			rgb(0 10 20 / 0.28);

		transform:
			translateX(-50%);

		z-index:
			99999;
	}


	/* ----------------------------------------------------------
	   MOBILE MENU ITEMS
	   ---------------------------------------------------------- */

	.goldion-mobile-menu
	.et_mobile_menu
	li {
		margin:
			0;
	}


	.goldion-mobile-menu
	.et_mobile_menu
	li
	a {
		padding:
			13px 8px
			!important;

		border-bottom:
			1px solid
			rgb(255 255 255 / 0.08)
			!important;

		color:
			rgb(255 255 255 / 0.92)
			!important;

		font-family:
			var(--goldion-font-heading);

		font-size:
			14px;

		font-weight:
			600;

		line-height:
			1.35;

		letter-spacing:
			0.02em;

		background:
			transparent
			!important;

		transition:
			color 180ms ease,
			padding-left 180ms ease;
	}


	.goldion-mobile-menu
	.et_mobile_menu
	li:last-child >
	a {
		border-bottom:
			0
			!important;
	}


	.goldion-mobile-menu
	.et_mobile_menu
	li
	a:hover {
		color:
			var(--goldion-color-accent)
			!important;

		padding-left:
			14px
			!important;

		background:
			transparent
			!important;

		opacity:
			1
			!important;
	}


	/* ----------------------------------------------------------
	   CURRENT MOBILE PAGE
	   ---------------------------------------------------------- */

	.goldion-mobile-menu
	.et_mobile_menu
	.current-menu-item >
	a,

	.goldion-mobile-menu
	.et_mobile_menu
	.current-menu-ancestor >
	a {
		color:
			var(--goldion-color-accent)
			!important;
	}


	/* ----------------------------------------------------------
	   MOBILE SUBMENUS
	   ---------------------------------------------------------- */

	.goldion-mobile-menu
	.et_mobile_menu
	.sub-menu {
		padding-left:
			14px
			!important;
	}


	.goldion-mobile-menu
	.et_mobile_menu
	.sub-menu
	a {
		font-size:
			13px;

		font-weight:
			500;

		opacity:
			0.86;
	}
}


/* ==============================================================
   PHONE REFINEMENT
   ============================================================== */

@media (max-width: 767px) {

	.goldion-header-row-mobile {
		padding:
			10px 0
			!important;
	}


	.goldion-mobile-menu
	.mobile_menu_bar::before {
		font-size:
			30px;
	}


	.goldion-mobile-menu
	.et_mobile_menu
	li
	a {
		padding:
			12px 6px
			!important;
	}
}


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

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

	.goldion-header-menu
	.et-menu >
	li >
	a,

	.goldion-header-menu
	.et-menu >
	li::before,

	.goldion-mobile-menu
	.et_mobile_menu
	li
	a {
		transition:
			none
			!important;
	}
}

/* =========================================================
   GOLDiON – Reference cards
   Equal card heights + bottom-aligned CTA
   ========================================================= */

@media only screen and (min-width: 981px) {

    /* Keep all columns in the reference row the same height */
    .goldion-reference-row {
        display: flex;
        align-items: stretch;
    }

    /* Turn each reference card / column into a vertical flex container */
    .goldion-reference-row > .et_pb_column {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* Push the final CTA module to the bottom of the card */
    .goldion-reference-row .goldion-reference-link {
        margin-top: auto !important;
    }

}

/* ==============================================================
   27. UNIVERSAL TECH-GRID FADE SYSTEM
   Works with all Goldion tech-grid colors and sizes.
   ============================================================== */


/*
 * Re-declare the two SVG grids as reusable variables.
 *
 * This does not visually change your existing grid classes.
 * It simply allows the fade modifiers below to reuse the exact
 * same SVG regardless of grid size.
 */

.goldion-tech-grid-light {
	--goldion-tech-grid-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M16 0V64M32 0V64M48 0V64M0 16H64M0 32H64M0 48H64' stroke='%23001F33' stroke-opacity='.035' stroke-width='1'/%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%23001F33' stroke-opacity='.085' stroke-width='1'/%3E%3C/svg%3E");

	background-image:
		var(--goldion-tech-grid-image);
}


.goldion-tech-grid-dark {
	--goldion-tech-grid-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M16 0V64M32 0V64M48 0V64M0 16H64M0 32H64M0 48H64' stroke='%23E3F2FD' stroke-opacity='.055' stroke-width='1'/%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%233F84E5' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");

	background-image:
		var(--goldion-tech-grid-image);
}


/*
 * Fade effects are enabled on Divi Desktop only:
 * 981px and above.
 *
 * Tablet and mobile automatically return to the normal,
 * non-faded grid background.
 */
@media (min-width: 981px) {

	/* ----------------------------------------------------------
	   SHARED FADE LAYER
	   ---------------------------------------------------------- */

	.goldion-tech-grid-left-fade,
	.goldion-tech-grid-right-fade,
	.goldion-tech-grid-vertical-fade,
	.goldion-tech-grid-left-fade-vertical,
	.goldion-tech-grid-right-fade-vertical {
		position: relative;
		isolation: isolate;

		/*
		 * Remove the normal grid from the element itself.
		 * The pseudo-element below will render it instead.
		 */
		background-image: none !important;
	}


	.goldion-tech-grid-left-fade::before,
	.goldion-tech-grid-right-fade::before,
	.goldion-tech-grid-vertical-fade::before,
	.goldion-tech-grid-left-fade-vertical::before,
	.goldion-tech-grid-right-fade-vertical::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;

		pointer-events: none;

		border-radius: inherit;

		background-image:
			var(--goldion-tech-grid-image);

		background-repeat: repeat;

		background-position:
			center top;

		background-size:
			var(--goldion-tech-grid-size)
			var(--goldion-tech-grid-size);
	}


	/* ==========================================================
	   LEFT FADE

	   Grid:
	   transparent at left edge
	   ↓
	   gradually appears
	   ↓
	   fully visible from center toward the right
	   ========================================================== */

	.goldion-tech-grid-left-fade::before {
		-webkit-mask-image:
			linear-gradient(
				to right,
				transparent 0%,
				rgb(0 0 0 / 0.12) 14%,
				rgb(0 0 0 / 0.42) 28%,
				#000 50%,
				#000 100%
			);

		mask-image:
			linear-gradient(
				to right,
				transparent 0%,
				rgb(0 0 0 / 0.12) 14%,
				rgb(0 0 0 / 0.42) 28%,
				#000 50%,
				#000 100%
			);
	}


	/* ==========================================================
	   RIGHT FADE

	   Grid:
	   fully visible from left toward center
	   ↓
	   gradually disappears
	   ↓
	   transparent at right edge
	   ========================================================== */

	.goldion-tech-grid-right-fade::before {
		-webkit-mask-image:
			linear-gradient(
				to right,
				#000 0%,
				#000 50%,
				rgb(0 0 0 / 0.42) 72%,
				rgb(0 0 0 / 0.12) 86%,
				transparent 100%
			);

		mask-image:
			linear-gradient(
				to right,
				#000 0%,
				#000 50%,
				rgb(0 0 0 / 0.42) 72%,
				rgb(0 0 0 / 0.12) 86%,
				transparent 100%
			);
	}


	/* ==========================================================
	   VERTICAL FADE

	   0%    = transparent
	   30%   = fully visible
	   70%   = fully visible
	   100%  = transparent

	   This leaves the central area clear and visible while the
	   grid dissolves toward both the top and bottom.
	   ========================================================== */

	.goldion-tech-grid-vertical-fade::before {
		-webkit-mask-image:
			linear-gradient(
				to bottom,
				transparent 0%,
				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,
				#000 30%,
				#000 70%,
				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,
				transparent 100%
			);

		mask-image:
			linear-gradient(
				to bottom,
				transparent 0%,
				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,
				#000 30%,
				#000 70%,
				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,
				transparent 100%
			);
	}


	/* ==========================================================
	   LEFT + VERTICAL FADE

	   Combines:
	   - transparent toward the left edge
	   - visible toward the right
	   - transparent at top and bottom

	   Especially useful when text/content sits on the left and
	   the technical pattern should live mainly on the right.
	   ========================================================== */

	.goldion-tech-grid-left-fade-vertical::before {
		-webkit-mask-image:
			linear-gradient(
				to right,
				transparent 0%,
				rgb(0 0 0 / 0.12) 14%,
				rgb(0 0 0 / 0.42) 28%,
				#000 50%,
				#000 100%
			),
			linear-gradient(
				to bottom,
				transparent 0%,
				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,
				#000 30%,
				#000 70%,
				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,
				transparent 100%
			);

		-webkit-mask-composite:
			source-in;

		mask-image:
			linear-gradient(
				to right,
				transparent 0%,
				rgb(0 0 0 / 0.12) 14%,
				rgb(0 0 0 / 0.42) 28%,
				#000 50%,
				#000 100%
			),
			linear-gradient(
				to bottom,
				transparent 0%,
				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,
				#000 30%,
				#000 70%,
				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,
				transparent 100%
			);

		mask-composite:
			intersect;
	}


	/* ==========================================================
	   RIGHT + VERTICAL FADE

	   Included as the mirrored equivalent because it is useful
	   for alternating left/right content layouts.
	   ========================================================== */

	.goldion-tech-grid-right-fade-vertical::before {
		-webkit-mask-image:
			linear-gradient(
				to right,
				#000 0%,
				#000 50%,
				rgb(0 0 0 / 0.42) 72%,
				rgb(0 0 0 / 0.12) 86%,
				transparent 100%
			),
			linear-gradient(
				to bottom,
				transparent 0%,
				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,
				#000 30%,
				#000 70%,
				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,
				transparent 100%
			);

		-webkit-mask-composite:
			source-in;

		mask-image:
			linear-gradient(
				to right,
				#000 0%,
				#000 50%,
				rgb(0 0 0 / 0.42) 72%,
				rgb(0 0 0 / 0.12) 86%,
				transparent 100%
			),
			linear-gradient(
				to bottom,
				transparent 0%,
				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,
				#000 30%,
				#000 70%,
				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,
				transparent 100%
			);

		mask-composite:
			intersect;
	}
}

/* ==============================================================
   28. MOBILE TECH GRID — RIGHT + VERTICAL FADE
   Desktop can retain another fade effect independently.
   ============================================================== */

@media (max-width: 767px) {

	/*
	 * Move the normal grid background onto a pseudo-element
	 * so we can mask it without affecting the section content.
	 */
	.goldion-tech-grid-mobile-right-fade-vertical {
		position: relative;
		isolation: isolate;

		background-image: none !important;
	}


	.goldion-tech-grid-mobile-right-fade-vertical::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;

		pointer-events: none;
		border-radius: inherit;

		background-image:
			var(--goldion-tech-grid-image);

		background-repeat: repeat;

		background-position:
			center top;

		background-size:
			var(--goldion-tech-grid-size)
			var(--goldion-tech-grid-size);


		/*
		 * MASK 1:
		 *
		 * Full grid on the LEFT,
		 * fading toward transparent on the RIGHT.
		 *
		 * MASK 2:
		 *
		 * Transparent at top,
		 * fully visible around 30%,
		 * remains visible until 70%,
		 * then fades toward transparent at bottom.
		 */

		-webkit-mask-image:

			linear-gradient(
				to right,

				#000 0%,
				#000 50%,

				rgb(0 0 0 / 0.42) 72%,
				rgb(0 0 0 / 0.12) 86%,

				transparent 100%
			),

			linear-gradient(
				to bottom,

				transparent 0%,

				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,

				#000 30%,
				#000 70%,

				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,

				transparent 100%
			);

		-webkit-mask-composite:
			source-in;


		mask-image:

			linear-gradient(
				to right,

				#000 0%,
				#000 50%,

				rgb(0 0 0 / 0.42) 72%,
				rgb(0 0 0 / 0.12) 86%,

				transparent 100%
			),

			linear-gradient(
				to bottom,

				transparent 0%,

				rgb(0 0 0 / 0.15) 10%,
				rgb(0 0 0 / 0.55) 20%,

				#000 30%,
				#000 70%,

				rgb(0 0 0 / 0.55) 80%,
				rgb(0 0 0 / 0.15) 90%,

				transparent 100%
			);

		mask-composite:
			intersect;
	}
}