/**
 * Georgia Outsourcing — shared design system.
 * Source of truth: docs/BRAND.md, docs/pages/HOME-PAGE.md §2 and §5.
 */

/* ---------- Fonts (self-hosted, latin subset) ---------- */

@font-face {
	font-family: "Schibsted Grotesk";
	src: url("../fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
	--go-ink: #111111;
	--go-white: #ffffff;
	--go-mint: #a0e2cf;
	--go-lavender: #a9a2f2;
	--go-lime: #d2ff1f;
	--go-mist: #f4fff9;

	--go-text-2: #555555;
	--go-text-body: #3a3a3a;
	--go-ink-hover: #2a2a2a;
	--go-line: #e6e6e6;
	--go-surface: #f3f4f1;
	--go-error: #b3261e;

	--go-font-sans: "Schibsted Grotesk", system-ui, sans-serif;
	--go-font-mono: "JetBrains Mono", ui-monospace, monospace;

	--go-container: 1280px;
	--go-marker: 6px;
	--go-gutter: clamp(16px, 4vw, 64px);
	--go-pad-x: clamp(20px, 3vw, 40px);
	--go-container-w: min(var(--go-container), calc(100% - 2 * var(--go-gutter)));
	--go-header-h: 77px;
	--go-ease: cubic-bezier(.2, .7, .2, 1);

	/* Grain texture (SVG fractal noise) shared by gradients and illustrations. */
	--go-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Anchor links land below the fixed header. */
html:has(.go-header) {
	scroll-padding-top: calc(var(--go-header-h) + var(--wp-admin--admin-bar--height, 0px));
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.go-header) {
		scroll-behavior: smooth;
	}
}

/* ---------- Frame: container edges and dividers (HOME-PAGE.md §2) ---------- */

.go-frame {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--go-container-w);
	margin-inline: auto;
	border-inline: 1px solid var(--go-line);
}

/* Elementor containers size themselves from --width and margins from --margin-*. */
.e-con.go-frame {
	--width: var(--go-container-w);
	--margin-left: auto;
	--margin-right: auto;
}

/* Beats Elementor's `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }`. */
.elementor.elementor .e-con > .elementor-widget.go-frame {
	width: 100%;
	max-width: var(--go-container-w);
}

/*
 * Dividers and bands work on plain elements and on Elementor containers. On containers
 * `.e-con:before` is Elementor's background-overlay layer (it sets content, position, size,
 * border, opacity and blend mode), so the :is() selectors carry the extra specificity and
 * every marker rule restates those properties.
 */

/* A full-width 1 px line with 6 px Ink markers on the container edges. */
:is(.go-divider, .e-con.go-divider) {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--min-height: 0px;
	position: relative;
	z-index: 6;
	height: 0;
	min-height: 0;
	border-top: 1px solid var(--go-line);
}

:is(.go-divider, .e-con.go-divider)::before,
:is(.go-divider, .e-con.go-divider)::after {
	content: "";
	position: absolute;
	top: -.5px;
	left: calc((100% - var(--go-container-w)) / 2);
	width: var(--go-marker);
	height: var(--go-marker);
	border: 0;
	border-radius: 0;
	background: var(--go-ink);
	opacity: 1;
	mix-blend-mode: normal;
	transition: none;
	translate: -50% -50%;
}

:is(.go-divider, .e-con.go-divider)::after {
	left: auto;
	right: calc((100% - var(--go-container-w)) / 2);
	translate: 50% -50%;
}

/* A full-width band with a divider above and below it (markers on all four crossings). */
:is(.go-band, .e-con.go-band) {
	position: relative;
	border-block: 1px solid var(--go-line);
}

:is(.go-band, .e-con.go-band)::before,
:is(.go-band, .e-con.go-band)::after {
	content: "";
	position: absolute;
	z-index: 6;
	top: calc(-.5px - var(--go-marker) / 2);
	bottom: calc(-.5px - var(--go-marker) / 2);
	left: calc((100% - var(--go-container-w)) / 2);
	width: var(--go-marker);
	height: auto;
	border: 0;
	border-radius: 0;
	background:
		linear-gradient(var(--go-ink) 0 0) top / 100% var(--go-marker) no-repeat,
		linear-gradient(var(--go-ink) 0 0) bottom / 100% var(--go-marker) no-repeat;
	opacity: 1;
	mix-blend-mode: normal;
	transition: none;
	translate: -50% 0;
	pointer-events: none;
}

:is(.go-band, .e-con.go-band)::after {
	left: auto;
	right: calc((100% - var(--go-container-w)) / 2);
	translate: 50% 0;
}

/* ---------- Pill button with pixel arrow (BRAND.md §10) ---------- */

.go-btn {
	--go-btn-bg: var(--go-ink);
	--go-btn-fg: var(--go-white);
	--go-btn-arrow: var(--go-lime);
	--go-btn-border: transparent;
	--go-btn-bg-hover: var(--go-ink-hover);
	--go-btn-border-hover: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 14px 24px;
	border: 1px solid var(--go-btn-border);
	border-radius: 999px;
	background: var(--go-btn-bg);
	color: var(--go-btn-fg);
	font-family: var(--go-font-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s var(--go-ease);
}

.go-btn:hover,
.go-btn:focus-visible {
	background: var(--go-btn-bg-hover);
	border-color: var(--go-btn-border-hover);
	color: var(--go-btn-fg);
	text-decoration: none;
}

.go-btn:hover {
	transform: translateY(-1px);
}

.go-btn:active {
	transform: scale(.97);
}

.go-btn:focus-visible {
	outline: 2px solid var(--go-lavender);
	outline-offset: 3px;
}

.go-btn--secondary {
	--go-btn-bg: rgba(255, 255, 255, .75);
	--go-btn-fg: var(--go-ink);
	--go-btn-arrow: var(--go-ink);
	--go-btn-border: rgba(17, 17, 17, .14);
	--go-btn-bg-hover: var(--go-white);
	--go-btn-border-hover: var(--go-ink);
}

.go-btn--on-ink {
	--go-btn-bg: var(--go-lime);
	--go-btn-fg: var(--go-ink);
	--go-btn-arrow: var(--go-ink);
	--go-btn-bg-hover: #ddff55;
}

.go-btn--sm {
	min-height: 40px;
	padding: 11px 18px;
	font-size: 14px;
	line-height: 16px;
}

/* Back arrow: mirrored and placed before the label (NOT-FOUND.md §4); the hover step then points back. */
.go-btn--back {
	flex-direction: row-reverse;
}

.go-btn--back .go-btn__arrow {
	scale: -1 1;
	margin-right: -6px;
}

.go-btn__arrow {
	flex: none;
	width: 20px;
	height: 14px;
	overflow: visible;
	color: var(--go-btn-arrow);
	rotate: var(--go-arrow-rot, 0deg);
	transition: rotate .35s var(--go-ease);
}

.go-btn__arrow g {
	transition: transform .32s steps(2, end);
}

.go-btn:hover .go-btn__arrow g,
.go-btn:focus-visible .go-btn__arrow g {
	transform: translateX(6px);
}

.go-btn__trail {
	opacity: 0;
	transition: opacity .01s linear;
}

.go-btn:hover .go-btn__trail--1,
.go-btn:focus-visible .go-btn__trail--1 {
	opacity: 1;
	transition-delay: .1s;
}

.go-btn:hover .go-btn__trail--2,
.go-btn:focus-visible .go-btn__trail--2 {
	opacity: 1;
	transition-delay: .2s;
}

/* ---------- Eyebrow pill ---------- */

/* .elementor-widget raises specificity above the kit's `.elementor-widget-heading .elementor-heading-title`. */
.elementor-widget.go-pill .elementor-heading-title,
.go-pill__inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 8px 14px;
	border: 1px solid rgba(17, 17, 17, .1);
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	color: var(--go-ink);
	font-family: var(--go-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

/*
 * Georgian flag, decorative (the label already says "Georgia"). The static image shows
 * without JS and under reduced motion; go-motion.js swaps in the waving SVG (same 20 × 16 box).
 */
.go-pill--flag .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 20px;
	height: 16px;
	background: url("../icons/flag-ge.svg") center / 100% 100% no-repeat;
}

.go-pill--flag .elementor-heading-title.has-live-flag::before {
	content: none;
}

.go-flag {
	flex: none;
	width: 20px;
	height: 16px;
}

/* Each pixel column bobs one cell, offset per column, in whole-pixel steps. */
.go-flag__col {
	animation: go-flag-wave 1.6s step-end infinite paused;
	animation-delay: calc(var(--c) * -80ms);
}

.go-flag.is-inview .go-flag__col {
	animation-play-state: running;
}

@keyframes go-flag-wave {
	0%   { transform: translateY(0); }
	25%  { transform: translateY(-1px); }
	50%  { transform: translateY(0); }
	75%  { transform: translateY(1px); }
}

/* ---------- Eyebrow label (BRAND.md §9): 6 px Ink square, 10 px gap, mono 13 px ---------- */

.elementor-widget.go-eyebrow .elementor-heading-title,
.go-eyebrow__text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--go-text-2);
	font-family: var(--go-font-mono);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
}

.elementor-widget.go-eyebrow .elementor-heading-title::before,
.go-eyebrow__text::before {
	content: "";
	flex: none;
	width: var(--go-marker);
	height: var(--go-marker);
	background: var(--go-ink);
}

/* ---------- Text link with the 10 px pixel arrow (LEGAL.md §A5 "Other policies") ---------- */
.go-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--go-text-2);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color .2s ease;
}

.go-link-arrow:hover,
.go-link-arrow:focus-visible {
	color: var(--go-ink);
}

.go-link-arrow:focus-visible {
	outline: 2px solid var(--go-lavender);
	outline-offset: 3px;
}

.go-arrow-sm {
	flex: none;
}

/* ---------- Section H2 (HOME-PAGE.md §5): size and colour come from Elementor ---------- */

.go-h2 .elementor-heading-title {
	max-width: 14em;
	text-wrap: balance;
}

/* ---------- Pixel icon echo (BRAND.md §11): hidden at rest, the component shows it on hover ---------- */

/*
 * Fade with fill-opacity, not opacity: animating opacity on an SVG child makes Chrome
 * re-rasterise the icon for a frame (the Ink glyph visibly jumps or resizes).
 */
.go-icon__echo {
	fill-opacity: 0;
	transition: fill-opacity .35s ease;
}

/* ---------- Hover cards (GO Cards widget, HOME-PAGE.md §5): tint + accent bar + icon echo ---------- */

.go-cards {
	display: grid;
	grid-template-columns: repeat(var(--go-cards-cols, 3), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.go-card {
	--go-card-accent: var(--go-mint);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--go-card-gap, clamp(56px, 7vw, 112px));
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--go-card-min-h, 0);
	margin: 0;
	padding: clamp(28px, 3vw, 40px) var(--go-pad-x);
	background: var(--go-white);
	cursor: default;
	transition: background-color .35s ease;
}

.go-card + .go-card {
	border-left: 1px solid var(--go-line);
}

.go-card--lavender {
	--go-card-accent: var(--go-lavender);
}

.go-card--lime {
	--go-card-accent: var(--go-lime);
}

.go-card::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--go-card-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--go-ease);
}

.go-card:hover {
	background: var(--go-card-tint, #f5f5f3);
}

.go-card:hover::after {
	transform: scaleX(1);
}

.go-card:hover .go-icon__echo {
	fill-opacity: 1;
}

.go-card__icon {
	flex: none;
	width: 50px;
}

.go-card__icon svg {
	display: block;
	width: 100%;
	height: auto;
}

.go-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.go-card__num {
	color: var(--go-text-2);
	font-family: var(--go-font-mono);
	font-size: 13px;
	line-height: 1.3;
}

/* .go-cards prefix beats the kit's global h3 rules. */
.go-cards .go-card__title {
	margin: 0;
	color: var(--go-ink);
	font-family: var(--go-font-sans);
	font-size: clamp(19px, 1.6vw, 22px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.go-cards .go-card__text {
	margin: 0;
	color: var(--go-text-body);
	font-family: var(--go-font-sans);
	font-size: 15px;
	line-height: 1.55;
	text-wrap: balance;
	hyphens: none;
}

@media (max-width: 999.98px) {
	.go-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The stacked row layout is for the GO Cards list only, not every .go-card (pricing cards stay columns). */
	.go-cards .go-card {
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(20px, 4vw, 32px);
		min-height: 0;
	}

	.go-card + .go-card {
		border-left: 0;
		border-top: 1px solid var(--go-line);
	}
}

/* ---------- Grayscale photo with slow hover zoom (HOME-PAGE.md §5) ---------- */

.go-photo {
	position: relative;
	overflow: hidden;
}

.elementor .go-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: transform 1.2s var(--go-ease);
}

.go-photo:hover img {
	transform: scale(1.04);
}

/* ---------- Pixel check list (Elementor Icon List with no icons) ---------- */

.go-checks .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.go-checks .elementor-icon-list-items .elementor-icon-list-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 24px var(--go-pad-x);
	color: var(--go-ink);
	font-family: var(--go-font-sans);
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 500;
	line-height: 1.3;
}

.go-checks .elementor-icon-list-item + .elementor-icon-list-item {
	border-left: 1px solid var(--go-line);
}

.go-checks .elementor-icon-list-item::before {
	content: "";
	flex: none;
	width: 14px;
	height: 12px;
	background: url("../icons/check.svg") center / 100% 100% no-repeat;
}

/* Elementor styles the text span from the kit (secondary colour, text weight); inherit the item's instead. */
.go-checks .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text {
	padding: 0;
	color: inherit;
	font: inherit;
}

@media (max-width: 999.98px) {
	.go-checks .elementor-icon-list-items {
		grid-template-columns: minmax(0, 1fr);
	}

	.go-checks .elementor-icon-list-item + .elementor-icon-list-item {
		border-left: 0;
		border-top: 1px solid var(--go-line);
	}
}

/* ---------- Pixel check list, stacked (HOW-IT-WORKS.md §5, §7) ---------- */

/* Works on a plain <ul class="go-checklist"> and on an Elementor Icon List with no icons. */
.go-checklist,
.go-checklist .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: var(--go-checklist-gap, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.go-checklist > li,
.go-checklist .elementor-icon-list-items .elementor-icon-list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	color: var(--go-ink-hover);
	font-family: var(--go-font-sans);
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 400;
	line-height: 1.45;
}

.go-checklist > li::before,
.go-checklist .elementor-icon-list-item::before {
	content: "";
	flex: none;
	width: 14px;
	height: 12px;
	margin-top: var(--go-checklist-check-top, 6px);
	background: url("../icons/check.svg") center / 100% 100% no-repeat;
}

.go-checklist .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text {
	padding: 0;
	color: inherit;
	font: inherit;
}

/* ---------- Animated brand gradient (BRAND.md §6) ---------- */

/*
 * clip, not hidden: overflow: hidden makes the block a scroll container, and scroll-driven
 * animations inside it (.go-scrub, view() timeline) would then track this block, which never
 * scrolls, instead of the page, freezing the heading mid-reveal.
 */
.e-con.go-has-gradient {
	isolation: isolate;
	overflow: clip;
	background-color: var(--go-mint);
}

/* Content (widgets and containers) paints above the absolutely positioned gradient. */
.e-con.go-has-gradient > :not(.elementor-widget-go-gradient) {
	position: relative;
	z-index: 1;
}

.e-con > .elementor-widget-go-gradient {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: auto;
	max-width: none;
	margin: 0;
	pointer-events: none;
}

.go-gradient {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--go-mint);
	pointer-events: none;
}

.go-gradient__conic,
.go-gradient__band,
.go-gradient__grain {
	position: absolute;
	pointer-events: none;
}

.go-gradient__conic {
	left: -40%;
	top: -90%;
	width: 180%;
	height: 280%;
	background: conic-gradient(from 0deg at 50% 50%,
		#a0e2cf 0deg, #a9a2f2 80deg, #f4fff9 150deg, #d2ff1f 220deg, #a0e2cf 290deg, #a9a2f2 360deg);
	filter: blur(80px) saturate(1.2);
	animation: go-g-spin 28s linear infinite paused;
}

.go-gradient__band {
	inset: -40%;
	background: linear-gradient(115deg,
		rgba(169, 162, 242, 0) 18%, rgba(169, 162, 242, .75) 36%, rgba(244, 255, 249, 0) 52%,
		rgba(210, 255, 31, .6) 70%, rgba(210, 255, 31, 0) 88%);
	filter: blur(50px);
	animation: go-g-band 11s ease-in-out infinite alternate paused;
}

.go-gradient__grain {
	inset: 0;
	background-image: var(--go-grain);
	opacity: .3;
	mix-blend-mode: overlay;
}

/* go-motion.js adds .is-inview while the block is on screen. */
.go-gradient.is-inview .go-gradient__conic,
.go-gradient.is-inview .go-gradient__band {
	animation-play-state: running;
	will-change: transform;
}

/*
 * Blob variant (FOOTER.md §5): three radial blobs (Mist, Lime, Lavender) over Mint, drifting on slow
 * sine paths. The outer span moves on x, the inner on y (alternate + easeInOutSine is a sine); the
 * offsets are relative to the t = 0 position, which is also the reduced-motion frame.
 * Ellipse radii --rx/--ry and centre --x/--y are percentages of the block, as in the design.
 */
.go-gradient__blob,
.go-gradient__blob > span {
	position: absolute;
	inset: 0;
	animation: go-g-blob-x var(--dur-x) cubic-bezier(.37, 0, .63, 1) var(--delay-x) infinite alternate paused;
}

.go-gradient__blob > span {
	animation-name: go-g-blob-y;
	animation-duration: var(--dur-y);
	animation-delay: var(--delay-y);
}

.go-gradient__blob > span::before {
	content: "";
	position: absolute;
	left: calc(var(--x) - var(--rx));
	top: calc(var(--y) - var(--ry));
	width: calc(2 * var(--rx));
	height: calc(2 * var(--ry));
	background: radial-gradient(closest-side, var(--c), transparent var(--stop));
}

.go-gradient__blob--mist {
	--c: var(--go-mist); --x: 10%; --y: 42%; --rx: 55%; --ry: 70%; --stop: 70%;
	--from-x: -26%; --to-x: 26%; --dur-x: 29.92s; --delay-x: -14.96s;
	--from-y: -56%; --to-y: 0%; --dur-y: 34.91s; --delay-y: -34.91s;
}

.go-gradient__blob--lime {
	--c: var(--go-lime); --x: 96.4%; --y: 98.1%; --rx: 45%; --ry: 80%; --stop: 70%;
	--from-x: -46.37%; --to-x: 1.63%; --dur-x: 40.54s; --delay-x: -35.75s;
	--from-y: -46.11%; --to-y: 1.89%; --dur-y: 33.07s; --delay-y: -37.28s;
}

.go-gradient__blob--lavender {
	--c: var(--go-lavender); --x: 98%; --y: 42.1%; --rx: 60%; --ry: 65%; --stop: 75%;
	--from-x: -44%; --to-x: 0%; --dur-x: 46.54s; --delay-x: -46.54s;
	--from-y: -48.09%; --to-y: 7.91%; --dur-y: 38.08s; --delay-y: -28.74s;
}

.go-gradient.is-inview .go-gradient__blob,
.go-gradient.is-inview .go-gradient__blob > span {
	animation-play-state: running;
	will-change: translate;
}

@keyframes go-g-blob-x {
	from { translate: var(--from-x) 0; }
	to { translate: var(--to-x) 0; }
}

@keyframes go-g-blob-y {
	from { translate: 0 var(--from-y); }
	to { translate: 0 var(--to-y); }
}

/*
 * Radial-masked variant: white block, gradient glows up from the bottom centre (WHY-GEORGIA.md §4).
 * Sections can reshape the glow with --go-gradient-mask (How It Works uses a wider one).
 */
.e-con.go-has-gradient--rise {
	--go-gradient-mask: radial-gradient(60% 110% at 50% 100%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%);
	background-color: var(--go-white);
}

.go-has-gradient--rise > .elementor-widget-go-gradient {
	-webkit-mask-image: var(--go-gradient-mask);
	mask-image: var(--go-gradient-mask);
}

/* Wider, softer glow (How It Works, Capabilities). */
.e-con.go-has-gradient--wide {
	--go-gradient-mask: radial-gradient(95% 120% at 50% 100%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%);
}

/* ---------- Section intro header: full-bleed gradient, centred content (HOW-IT-WORKS.md §4) ---------- */

.e-con.go-intro {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

.e-con.go-intro__inner {
	--padding-top: clamp(72px, 9vw, 136px);
	--padding-bottom: clamp(64px, 8vw, 120px);
	--padding-left: var(--go-pad-x);
	--padding-right: var(--go-pad-x);
	--gap: 28px;
	--row-gap: 28px;
	text-align: center;
	/* As in the hero: no frame lines inside a full-bleed gradient; the content keeps the container width. */
	border-inline: 0;
}

.go-intro .go-h2 .elementor-heading-title {
	margin-inline: auto;
}

/* ---------- Section header: gradient clipped to the frame, eyebrow + H2 + lead (OUR-MODEL.md §4, PRICING.md §4) ---------- */

.e-con.go-head {
	--padding-top: clamp(48px, 6vw, 88px);
	--padding-bottom: clamp(48px, 6vw, 88px);
	--padding-left: var(--go-pad-x);
	--padding-right: var(--go-pad-x);
	--gap: 20px;
	--row-gap: 20px;
	text-align: center;
}

/* Sections set --go-head-h2 and --go-head-lead (max widths). */
.go-head .go-h2 .elementor-heading-title {
	max-width: var(--go-head-h2, 14em);
	margin-inline: auto;
}

.go-head__lead .elementor-heading-title {
	max-width: var(--go-head-lead, 44em);
	margin-inline: auto;
	text-wrap: pretty;
}

/* ---------- go "dot" icon tile (Our Model client list, Pricing cards) ---------- */

/* 26 px tile, 2 × 2 grid of 6 px cells (2 px gap), pixels on the diagonal. */
.go-dot {
	--go-dot-bg: var(--go-mint);
	--go-dot-px: var(--go-ink);
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background:
		linear-gradient(var(--go-dot-px) 0 0) 6px 6px / 6px 6px no-repeat,
		linear-gradient(var(--go-dot-px) 0 0) 14px 14px / 6px 6px no-repeat,
		var(--go-dot-bg);
}

.go-dot--lavender {
	--go-dot-bg: var(--go-lavender);
}

.go-dot--lime {
	--go-dot-bg: var(--go-lime);
}

.go-dot--ink {
	--go-dot-bg: var(--go-ink);
	--go-dot-px: var(--go-white);
}

/* ---------- Colour surfaces with a white corner highlight (Our Model cards, Pricing band) ---------- */

.e-con.go-surface {
	--go-surface: var(--go-lime);
	background:
		radial-gradient(120% 100% at 100% 100%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .22) 40%, rgba(255, 255, 255, 0) 80%),
		var(--go-surface);
}

.e-con.go-surface--lavender {
	--go-surface: var(--go-lavender);
}

/* ---------- Ink photo panel: grayscale photo + overlay behind the content (HOME-PAGE.md §5) ---------- */

/* Sections set --go-photo-overlay; the photo is an Elementor Image widget with .go-photo. */
.e-con.go-photo-panel {
	--go-photo-overlay: linear-gradient(to top, rgba(17, 17, 17, .6) 0%, rgba(17, 17, 17, .25) 55%, rgba(17, 17, 17, .1) 100%);
	position: relative;
	overflow: clip;
	isolation: isolate;
	background: var(--go-ink);
}

.e-con.go-photo-panel > .elementor-widget-image.go-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: auto;
	max-width: none;
	margin: 0;
}

.go-photo-panel > .go-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--go-photo-overlay);
	pointer-events: none;
}

.go-photo-panel:hover .go-photo img {
	transform: scale(1.04);
}

.e-con.go-photo-panel > :not(.go-photo) {
	position: relative;
	z-index: 1;
}

/* ---------- Glass frame around a white card (HOW-IT-WORKS.md §5, CAPABILITIES.md §5) ---------- */

/*
 * .go-glass (glow) > .go-glass__frame (tinted, blurred) > .go-glass__card (white). The glow sits
 * on the wrapper, not the frame: backdrop-filter makes the frame its own stacking context, which
 * would paint a z-index -1 glow above the frame's background. The parent must isolate.
 * Defaults are the symmetric Lavender version; the Measure card overrides them.
 */
.go-glass {
	--go-glass-rgb: 169, 162, 242;
	--go-glass-glow-inset: -24px;
	--go-glass-pad: 10px 10px 0;
	--go-glass-border: 1px 1px 0 1px;
	--go-glass-radius: 28px 28px 0 0;
	--go-glass-card-radius: 18px 18px 0 0;
	position: relative;
}

.go-glass::before {
	content: "";
	position: absolute;
	inset: var(--go-glass-glow-inset);
	z-index: -1;
	border-radius: 80px;
	background: rgb(var(--go-glass-rgb));
	filter: blur(40px);
	opacity: .28;
}

.go-glass__frame {
	box-sizing: border-box;
	padding: var(--go-glass-pad);
	border: solid rgba(var(--go-glass-rgb), .6);
	border-width: var(--go-glass-border);
	border-radius: var(--go-glass-radius);
	background: rgba(var(--go-glass-rgb), .22);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.go-glass__card {
	box-sizing: border-box;
	border: solid var(--go-line);
	border-width: var(--go-glass-border);
	border-radius: var(--go-glass-card-radius);
	background: var(--go-white);
	box-shadow: 0 30px 60px -30px rgba(17, 17, 17, .3);
}

@keyframes go-g-spin {
	to { transform: rotate(360deg); }
}

@keyframes go-g-band {
	0% { transform: translate(-16%, -8%) rotate(-8deg); }
	100% { transform: translate(16%, 8%) rotate(10deg); }
}

/* ---------- Word rise reveal (HEADER-HERO.md §6) ---------- */

/* Text is visible without JS; go-motion.js adds .is-split only once it has wrapped the words. */
.go-reveal.is-split .go-reveal__w {
	display: inline-block;
	opacity: 0;
	transform: translateY(.45em);
	filter: blur(6px);
}

/*
 * Timing follows scroll-reveal.js: each word runs 55 % of the total duration and starts
 * 12 % after the previous one. Hero H1: delay 200 ms, duration 1300 ms.
 */
.go-reveal {
	--go-reveal-delay: 200ms;
	--go-reveal-word: .715s;
	--go-reveal-step: 156ms;
}

/* Section H2s: delay 700 ms, duration 1400 ms (THE-PROBLEM.md §4). */
.go-reveal--late {
	--go-reveal-delay: 700ms;
	--go-reveal-word: .77s;
	--go-reveal-step: 168ms;
}

.go-reveal.is-in .go-reveal__w {
	animation: go-rise var(--go-reveal-word) cubic-bezier(.215, .61, .355, 1) both;
	animation-delay: calc(var(--go-reveal-delay) + var(--i, 0) * var(--go-reveal-step));
}

@keyframes go-rise {
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* ---------- Scroll-linked word reveal (WHY-GEORGIA.md §4) ---------- */

/*
 * Progress (--go-scrub, 0 → 1) follows scroll position: 0 when 10 % of the heading has entered,
 * 1 when its top reaches 30 % of the viewport. Reversible. Each word fades .1 → 1 and unblurs
 * over half the range, 0.06 apart; the heading untilts from 3deg. Pure CSS scroll-driven
 * animation: go-motion.js only splits the words, and only where animation-timeline is supported.
 * Elsewhere (no JS, no support, reduced motion) --go-scrub keeps its initial value 1: final state.
 */
@property --go-scrub {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@supports (animation-timeline: view()) {
	/* A heading can hold several .go-scrub__line spans; each then reveals on its own. */
	.go-scrub.is-split .elementor-heading-title:not(:has(.go-scrub__line)),
	.go-scrub.is-split .go-scrub__line {
		transform-origin: left center;
		rotate: calc((1 - var(--go-scrub)) * 3deg);
		animation: go-scrub linear both;
		animation-timeline: view();
		animation-range: entry 10% cover 70vh;
	}

	.go-scrub.is-split .go-reveal__w {
		--go-scrub-w: clamp(0, (var(--go-scrub) - var(--i, 0) * .06) / .5, 1);
		display: inline-block;
		opacity: calc(.1 + .9 * var(--go-scrub-w));
		filter: blur(calc((1 - var(--go-scrub-w)) * 4px));
	}
}

@keyframes go-scrub {
	from { --go-scrub: 0; }
	to { --go-scrub: 1; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.go-gradient__conic,
	.go-gradient__band,
	.go-gradient__blob,
	.go-gradient__blob > span,
	.go-flag__col {
		animation: none;
	}

	.go-btn,
	.go-btn__arrow,
	.go-btn__arrow g,
	.go-btn__trail {
		transition: none;
	}

	.go-btn:hover,
	.go-btn:active {
		transform: none;
	}

	.go-btn__arrow {
		rotate: none;
	}

	.elementor .go-photo img {
		transition: none;
	}

	.go-photo:hover img,
	.go-photo-panel:hover .go-photo img {
		transform: none;
	}

	.go-card,
	.go-card::after,
	.go-icon__echo,
	.go-link-arrow {
		transition: none;
	}
}