/* Gigant Media 2026 pages. Loaded only on pages with the Elementor Canvas template (see gigant-site.php).
   Colours, type and spacing follow the design handoff (design/README.md). Content styling lives in
   Elementor; this file covers the chrome (header, footer), things free Elementor has no controls for,
   and the classes the page templates put on elements (Advanced -> CSS Classes). */

/* ---------- Page base (also neutralises the Most theme's body/html rules on these pages) ---------- */
body.gm-page {
	--gm-top: var(--wp-admin--admin-bar--height, 0px);
	display: block;
	height: auto;
	min-height: 100vh;
	margin: 0;
	overflow-x: clip;
	background: #FFFFFF;
	color: #163300;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}
body.gm-page *, body.gm-page *::before, body.gm-page *::after { box-sizing: border-box; }
body.gm-page a { text-decoration: none; }
body.gm-page :focus-visible { outline: 2px solid #9FE870; outline-offset: 3px; }
body.gm-page ::selection { background: #9FE870; color: #163300; }

/* Elementor's kit fonts are replaced by the page font; sizes and weights stay per element. */
body.gm-page .elementor-widget-heading .elementor-heading-title,
body.gm-page .elementor-widget-text-editor,
body.gm-page .elementor-widget-icon-list .elementor-icon-list-text,
body.gm-page .elementor-widget-button .elementor-button,
body.gm-page .e-n-accordion-item-title-text,
body.gm-page .e-n-tab-title,
body.gm-page .wpcf7 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.gm-page .elementor-heading-title { text-wrap: pretty; }
.gm-page .elementor-widget-text-editor p { margin: 0; }
.gm-page .elementor-widget-text-editor p + p { margin-top: 1em; }
/* Spacing between widgets is set per element (top margins, container gaps). */
body.gm-page .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Readable measures from the design (max-width in ch of the element's own font). */
.gm-mw-17 :is(.elementor-heading-title, p) { max-width: 16ch; }
.gm-mw-18 :is(.elementor-heading-title, p) { max-width: 18ch; }
.gm-mw-20 :is(.elementor-heading-title, p) { max-width: 20ch; }
.gm-mw-22 :is(.elementor-heading-title, p) { max-width: 22ch; }
.gm-mw-24 :is(.elementor-heading-title, p) { max-width: 24ch; }
.gm-mw-26 :is(.elementor-heading-title, p) { max-width: 26ch; }
.gm-mw-32 :is(.elementor-heading-title, p) { max-width: 32ch; }
.gm-mw-44 :is(.elementor-heading-title, p) { max-width: 44ch; }
.gm-mw-46 :is(.elementor-heading-title, p) { max-width: 46ch; }
.gm-mw-50 :is(.elementor-heading-title, p) { max-width: 50ch; }
.gm-mw-52 :is(.elementor-heading-title, p) { max-width: 52ch; }
.gm-mw-54 :is(.elementor-heading-title, p) { max-width: 54ch; }
.gm-mw-56 :is(.elementor-heading-title, p) { max-width: 56ch; }
.gm-mw-58 :is(.elementor-heading-title, p) { max-width: 58ch; }
.gm-mw-60 :is(.elementor-heading-title, p) { max-width: 60ch; }
.gm-mw-62 :is(.elementor-heading-title, p) { max-width: 62ch; }
.gm-mx :is(.elementor-heading-title, p) { margin-left: auto; margin-right: auto; }

/* Small layout helpers used by the page templates.
   Widget rules use "body.gm-page .e-con .elementor-widget.x" (0,4,1): Elementor's own
   ".elementor.elementor .e-con>.elementor-widget{max-width:100%}" is (0,4,0). */
body.gm-page .gm-box-46 { width: auto; max-width: 46ch; }
body.gm-page .e-con .elementor-widget.gm-maxw-640 { max-width: 640px; }
body.gm-page .gm-cl-left { min-width: 230px; }
body.gm-page .gm-min-280 { min-width: min(280px, 100%); }
body.gm-page .gm-step { max-width: 940px; }
body.gm-page .e-con .elementor-widget.gm-push-end { margin-top: auto; padding-top: 26px; }
body.gm-page .e-con .elementor-widget.gm-noshrink { flex: none; }
.gm-duo img { width: 100%; object-position: center 30%; display: block; }
.gm-why-note p { max-width: 22ch; margin: 0 0 10px auto; }
/* The note stays at the right end also when a longer heading (SV "Varför Gigant", DE "Warum Gigant") pushes it onto its own line. */
body.gm-page .e-con .elementor-widget.gm-why-note { margin-left: auto; }
.gm-num .elementor-heading-title { display: flex; align-items: center; gap: 10px; }
.gm-num .gm-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 999px; }
body.gm-page .gm-quote blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: flex; gap: 12px; quotes: none; font: inherit; font-style: normal; color: inherit; }
body.gm-page .gm-quote blockquote::before { content: "\201C"; content: "\201C" / ""; position: static; flex: none; font-size: 44px; line-height: 0.8; color: #9FE870; font-weight: 800; font-style: normal; background: none; }
body.gm-page .gm-quote blockquote::after { content: none; }
body.gm-page .gm-quote blockquote p { margin: 0; font-style: normal; letter-spacing: -0.015em; }
.gm-plain-link a { color: #163300; }
body.gm-page .gm-plain-link a:hover { color: #2C5A0B; }
.gm-prose p + p { margin-top: 14px; }
.gm-prose a { color: #163300; font-weight: 600; border-bottom: 2px solid #9FE870; padding-bottom: 1px; }
/* Lists in page text (privacy policy). ".gm-page" is needed to outweigh ".gm-page .elementor-widget-text-editor p { margin: 0 }". */
.gm-page .gm-prose ul { margin: 0; }
.gm-page .gm-prose p + ul { margin-top: 8px; }
.gm-page .gm-prose ul + p { margin-top: 1em; }
.gm-page .gm-prose li + li { margin-top: 6px; }
body.gm-page .e-con .elementor-widget.gm-client { width: 100%; max-width: 190px; height: 62px; display: flex; align-items: center; justify-content: center; }
.gm-client > .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* ---------- Header ---------- */
.gm-header {
	position: sticky;
	top: var(--gm-top);
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid #ECEFE8;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	line-height: normal;
}
.gm-head {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 28px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.gm-logo { margin-right: auto; display: flex; align-items: center; }
.gm-logo img { height: 34px; width: auto; max-width: none; display: block; }
.gm-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; }
.gm-nav a { color: #163300; }
.gm-nav a:hover { color: #2C5A0B; }
.gm-nav a.is-current { font-weight: 700; border-bottom: 2px solid #9FE870; padding-bottom: 2px; }
.gm-pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	flex: none;
	min-height: 44px;
	padding: 11px 22px;
	border-radius: 999px;
	background: #9FE870;
	color: #163300;
	font-size: 15px;
	font-weight: 700;
}
body.gm-page .gm-pill:hover { background: #8AD95B; color: #163300; }

.gm-burger { display: none; position: relative; }
.gm-burger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border-radius: 999px;
	border: 1.5px solid #C9D6C0;
	background: transparent;
	color: #163300;
	cursor: pointer;
}
.gm-burger-btn svg { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; }
.gm-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 14px);
	min-width: 210px;
	background: #FFFFFF;
	border: 1px solid #ECEFE8;
	border-radius: 20px;
	box-shadow: 0 18px 44px rgba(22, 51, 0, 0.14);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 60;
}
.gm-menu[hidden] { display: none; }
.gm-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 14px; font-size: 16px; font-weight: 500; color: #163300; }
body.gm-page .gm-menu a:hover { background: #F1F7EC; color: #163300; }
.gm-menu a.is-current { font-weight: 700; }

/* Language switcher: a dropdown (EN SV DE, only the languages this page exists in) right of the Contact button, on
   phones left of the burger button. gm.js opens and closes it like the burger menu, and the list looks the same.
   The negative margin lines the text up with its neighbours while the hover background stays around it. */
.gm-lang { position: relative; flex: none; margin: 0 -12px; }
body.gm-page .gm-lang-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 12px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #163300;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	cursor: pointer;
}
body.gm-page .gm-lang-btn:hover,
body.gm-page .gm-lang-btn[aria-expanded="true"] { background: #F1F7EC; color: #163300; }
.gm-lang-btn svg { width: 12px; height: 12px; display: block; stroke: currentColor; fill: none; transition: transform 200ms ease; }
.gm-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gm-lang-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	min-width: 180px;
	background: #FFFFFF;
	border: 1px solid #ECEFE8;
	border-radius: 20px;
	box-shadow: 0 18px 44px rgba(22, 51, 0, 0.14);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 60;
}
.gm-lang-menu[hidden] { display: none; }
.gm-lang-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; font-size: 15px; font-weight: 500; color: #163300; }
body.gm-page .gm-lang-menu a:hover { background: #F1F7EC; color: #163300; }
.gm-lang-menu b { width: 22px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.gm-lang-menu a.is-current { font-weight: 700; }
.gm-lang-menu a.is-current::after { content: ""; margin-left: auto; width: 5px; height: 10px; border: solid #163300; border-width: 0 2px 2px 0; transform: translate(-3px, -2px) rotate(45deg); }

/* Home: transparent header over the hero photo ... */
.gm-header--hero {
	position: absolute;
	top: var(--gm-top);
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.gm-header--hero .gm-head { padding-top: 26px; padding-bottom: 26px; }
.gm-header--hero .gm-logo img { height: 62px; }
.gm-header--hero .gm-nav a { color: #FFFFFF; }
body.gm-page .gm-header--hero .gm-nav a:hover { color: #9FE870; }
.gm-header--hero .gm-burger-btn { border-color: rgba(255, 255, 255, 0.55); color: #FFFFFF; }
body.gm-page .gm-header--hero .gm-lang-btn { color: #FFFFFF; }
body.gm-page .gm-header--hero .gm-lang-btn:hover,
body.gm-page .gm-header--hero .gm-lang-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }

/* ... and the white bar that slides in once the hero is scrolled past (gm.js toggles .is-shown). */
.gm-header--bar {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--gm-top);
	z-index: 70;
	background: rgba(255, 255, 255, 0.94);
	transform: translateY(-110%);
	transition: transform 260ms cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.gm-header--bar.is-shown { transform: translateY(0); }
.gm-header--bar .gm-head { padding-top: 14px; padding-bottom: 14px; }
.gm-header--bar .gm-logo img { height: 32px; }
body.gm-page .gm-header--bar .gm-pill:hover { background: #8FDD5C; }

@media (max-width: 760px) {
	.gm-head { padding-left: 18px; padding-right: 18px; gap: 16px; }
	.gm-nav, .gm-pill { display: none !important; }
	.gm-burger { display: block; }
}

/* ---------- Footer ---------- */
.gm-footer { background: #0F2400; color: #A8C199; font-family: "Plus Jakarta Sans", system-ui, sans-serif; line-height: normal; }
.gm-foot {
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
}
.gm-foot-logo { display: flex; align-items: center; margin-right: 8px; }
.gm-foot-logo img { height: 30px; width: auto; max-width: none; display: block; }
.gm-foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 14px; }
.gm-foot-nav a { color: #A8C199; }
.gm-foot-nav .gm-foot-in { display: flex; }
.gm-foot-in svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.gm-foot-meta { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: #7F9773; }
.gm-foot-meta a { color: #7F9773; }
.gm-foot-meta a.is-current { font-weight: 700; }
body.gm-page .gm-foot-nav a:hover,
body.gm-page .gm-foot-meta a:hover { color: #9FE870; }
@media (max-width: 760px) {
	.gm-foot { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 26px; padding-bottom: 26px; }
	.gm-foot-logo { margin-right: 0; }
	.gm-foot-logo img { height: 40px; }
	.gm-foot-meta { margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(168, 193, 153, 0.22); }
}

/* ---------- Decorations drawn in CSS (::after, so Elementor's ::before overlay stays free) ---------- */
.gm-hero, .gm-cluster, .gm-cta, .gm-why, .gm-talk { position: relative; }
.gm-hero > *, .gm-cluster > *, .gm-cta > *, .gm-why > *, .gm-talk > * { position: relative; z-index: 1; }

/* Home hero: vertical dark gradient over the background photo. */
.gm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(11, 26, 0, 0.72) 0%, rgba(11, 26, 0, 0.42) 42%, rgba(11, 26, 0, 0.8) 100%);
}
.gm-caret { color: #9FE870; font-weight: 400; margin-left: 2px; animation: gm-caret 1s steps(1) infinite; }
@keyframes gm-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* Service clusters: decorative illustration, grows slightly on hover, hidden on phones. */
.gm-cluster { overflow: hidden; }
.gm-cluster::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: no-repeat center / 100% 100%;
	transform-origin: bottom right;
	transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.gm-cluster:hover::after { transform: scale(1.035); }
.gm-illo-seo::after { background-image: url("illo-seo.svg"); aspect-ratio: 1 / 1; opacity: 0.15; }
.gm-illo-ads::after { background-image: url("illo-ads.svg"); aspect-ratio: 1 / 1; opacity: 0.15; }
.gm-illo-analytics::after { background-image: url("illo-analytics.svg"); aspect-ratio: 360 / 200; left: 0; right: -24px; bottom: 0; }
.gm-illo-web::after { background-image: url("illo-web.svg"); aspect-ratio: 240 / 200; opacity: 0.15; }
/* positions: Home */
.gm-illo-home.gm-illo-seo::after { left: 17%; bottom: 16px; width: min(300px, 32%); }
.gm-illo-home.gm-illo-ads::after { right: -70px; bottom: -70px; width: min(300px, 34%); }
.gm-illo-home.gm-illo-analytics::after { opacity: 0.18; }
.gm-illo-home.gm-illo-web::after { right: -40px; bottom: -34px; width: min(320px, 34%); }
/* positions: Services */
.gm-illo-services.gm-illo-seo::after { right: 8%; bottom: -40px; width: min(300px, 30%); }
.gm-illo-services.gm-illo-analytics::after { opacity: 0.16; }
@media (max-width: 760px) { .gm-cluster::after { display: none; } }

/* Lime CTA block: the Gigant "G" as a mask behind the text. Numbers tuned by the designer; keep them. */
.gm-cta { overflow: hidden; }
.gm-cta::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: calc(-1.5% + 7px);
	top: 50%;
	transform: translateY(calc(-50% + 3px));
	height: 105%;
	aspect-ratio: 252 / 266;
	background: #163300;
	opacity: 0.15;
	-webkit-mask: url("gigant-mark-dark.svg") center / contain no-repeat;
	mask: url("gigant-mark-dark.svg") center / contain no-repeat;
	pointer-events: none;
}
@media (max-width: 760px) { .gm-cta::after { height: auto; width: 88%; left: 6%; } }

/* About "Why Gigant": giant question mark in the background. */
.gm-why { overflow: hidden; }
.gm-why::after {
	content: "?";
	content: "?" / "";
	position: absolute;
	z-index: 0;
	right: 2%;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: min(78vh, 32vw);
	line-height: 0.78;
	font-weight: 800;
	color: #254C08;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 760px) { .gm-why::after { font-size: min(70vh, 92vw); right: -6%; } }

/* Contact "Let's talk.": the "G" as a watermark behind the heading; inline next to it on phones. */
.gm-talk::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: -8%;
	top: 50%;
	transform: translateY(-50%);
	height: clamp(240px, 28vw, 420px);
	aspect-ratio: 252 / 266;
	background: #EAF5DE;
	-webkit-mask: url("gigant-mark-dark.svg") center / contain no-repeat;
	mask: url("gigant-mark-dark.svg") center / contain no-repeat;
	pointer-events: none;
}
@media (max-width: 760px) {
	.gm-talk::after { position: static; transform: none; height: clamp(34px, 9vw, 46px); flex: none; order: 2; background: #CFE7B8; }
	.gm-talk > .elementor-widget-heading { order: 1; }
}

/* ---------- Home: chat threads ---------- */
body.gm-page .e-con .elementor-widget.gm-b {
	width: fit-content;
	max-width: 32ch;
	margin-top: 8px;
	padding: 16px 20px;
	border-radius: 18px;
	background: #F1F7EC;
	color: #163300;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	align-self: flex-start;
}
body.gm-page .e-con .elementor-widget.gm-b.gm-first { margin-top: 0; }
body.gm-page .e-con .elementor-widget.gm-b-out { background: #9FE870; font-weight: 500; align-self: flex-end; }
body.gm-page .e-con .elementor-widget.gm-b-in.gm-tail { border-radius: 18px 18px 18px 6px; }
body.gm-page .e-con .elementor-widget.gm-b-out.gm-tail { border-radius: 18px 18px 6px 18px; }
.gm-page .gm-b p { color: inherit; font: inherit; }
.gm-page .gm-sig { align-self: flex-end; width: auto; margin: 16px 0 8px; }
.gm-avatar .elementor-heading-title {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #163300;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gm-typing { display: none; align-self: flex-end; background: #9FE870; border-radius: 18px; padding: 14px 18px; margin-top: 16px; }
.gm-typing.is-on { display: block; }
.gm-typing span { display: flex; gap: 5px; }
.gm-typing i { display: block; width: 7px; height: 7px; border-radius: 999px; background: #163300; animation: gm-typing 1.2s infinite; }
.gm-typing i:nth-child(2) { animation-delay: .2s; }
.gm-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes gm-typing { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Sliders: chat cards (<=860px) and About role cards (<=900px). Dots are added by gm.js. */
.gm-dots { display: none; justify-content: center; gap: 10px; margin-top: 20px; }
.gm-dots button { width: 9px; height: 9px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 999px; background: #C3D7B6; cursor: pointer; }
.gm-dots button.is-on { background: #163300; }
@media (max-width: 860px) {
	body.gm-page .gm-chats {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 14px;
		margin-left: -28px;
		margin-right: -28px;
		width: calc(100% + 56px);
		max-width: none;
		padding: 0 28px 4px;
	}
	.gm-chats::-webkit-scrollbar { display: none; }
	body.gm-page .gm-chats > .gm-chat { flex: 0 0 86%; width: 86%; scroll-snap-align: center; }
	.gm-dots--chats { display: flex; }
}
@media (max-width: 900px) {
	body.gm-page .gm-team {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 14px;
		margin-left: -28px;
		margin-right: -28px;
		width: calc(100% + 56px);
		max-width: none;
		padding: 0 28px 4px;
	}
	.gm-team::-webkit-scrollbar { display: none; }
	body.gm-page .gm-team > .e-con { flex: 0 0 82%; width: 82%; min-width: 0; scroll-snap-align: center; }
	.gm-dots--team { display: flex; margin-top: 18px; }
}

/* ---------- Home: process steps (Nested Tabs; styled through the widget's own CSS variables) ---------- */
.gm-page .gm-steps {
	--n-tabs-gap: 34px;
	--n-tabs-title-gap: 10px;
	--n-tabs-heading-justify-content: flex-start;
	--n-tabs-title-width: 46px;
	--n-tabs-title-height: 46px;
	--n-tabs-title-padding-top: 0px;
	--n-tabs-title-padding-bottom: 0px;
	--n-tabs-title-padding-left: 0px;
	--n-tabs-title-padding-right: 0px;
	--n-tabs-title-border-radius: 999px;
	--n-tabs-title-font-size: 16px;
	--n-tabs-title-transition: 250ms;
	--n-tabs-title-color: #163300;
	--n-tabs-title-color-hover: #163300;
	--n-tabs-title-color-active: #FFFFFF;
	--n-tabs-title-background-color: #FFFFFF;
	--n-tabs-title-background-color-hover: #FFFFFF;
	--n-tabs-title-background-color-active: #163300;
	--n-tabs-border-width: 0px;
}
.gm-page .gm-steps .e-n-tabs-heading { gap: 10px; }
.gm-page .gm-steps .e-n-tabs-heading .e-n-tab-title {
	flex: none;
	width: 46px;
	height: 46px;
	padding: 0;
	justify-content: center;
	align-items: center;
	border: 1.5px solid #C9D6C0;
	font-weight: 700;
}
.gm-page .gm-steps .e-n-tab-title[aria-selected="true"] { border-color: #163300; }
.gm-page .gm-steps .e-n-tab-title-text { font-weight: 700; line-height: 1; }
.gm-page .gm-steps .e-n-tabs-content > .e-con { padding: 0; border: 0; background: transparent; }

/* ---------- Home: client logos ---------- */
/* The image box always keeps the logo's own proportions (max 190 x 62), so clip-path trims the grey frame
   of the supplied PNGs exactly at the edge; transparent logos can replace them later without CSS changes. */
body.gm-page .gm-client img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80px;
	object-fit: contain;
	mix-blend-mode: multiply;
	clip-path: inset(1.5px);
	/*filter: grayscale(1) contrast(1.05);*/
	opacity: 0.78;
	transition: filter 600ms ease, opacity 600ms ease;
}
.gm-client:hover img { filter: none; opacity: 1; }

/* ---------- Services ---------- */
body.gm-page .gm-chipbar {
	position: sticky;
	top: calc(82px + var(--gm-top));
	z-index: 30;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid #ECEFE8;
	border-bottom: 1px solid #ECEFE8;
}
.gm-page .gm-chip .elementor-button {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1.5px solid #C9D6C0;
	background: #FFFFFF;
	color: #163300;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	transition: background 250ms ease, border-color 250ms ease;
}
.gm-page .gm-chip.is-active .elementor-button { background: #9FE870; border-color: #9FE870; }
.gm-page .gm-chip .elementor-button:hover { color: #163300; }
.gm-sect { scroll-margin-top: calc(156px + var(--gm-top)); }
.gm-anchor { scroll-margin-top: calc(88px + var(--gm-top)); }
@media (max-width: 760px) {
	body.gm-page .gm-chipbar { top: calc(81px + var(--gm-top)); }
	.gm-page .gm-chip .elementor-button { white-space: normal; font-size: 13px; padding: 9px 13px; line-height: 1.2; }
	.gm-sect { scroll-margin-top: calc(190px + var(--gm-top)); }
}

/* "Tools we work with" pills (Icon List widget, inline). */
.gm-page .gm-tools .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
.gm-page .gm-tools .elementor-icon-list-item {
	margin: 0 !important;
	padding: 8px 15px;
	border: 1.5px solid rgba(22, 51, 0, 0.18);
	border-radius: 999px;
	white-space: nowrap;
}
.gm-page .gm-tools .elementor-icon-list-item::after { display: none !important; }
.gm-page .gm-tools .elementor-icon-list-text { font-size: 13px; font-weight: 600; line-height: normal; color: #163300; padding: 0 !important; }
/* "What you get" dots: the dot takes its own width (7px), not Elementor's 1.25em icon box. */
.gm-page .elementor-widget-icon-list:not(.gm-tools) .elementor-icon-list-icon i { width: auto; }
.gm-page .gm-tools .elementor-icon-list-icon { display: none; }
/* Package list: three columns on wide screens. */
.gm-page .gm-grid-list .elementor-icon-list-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 26px; }
.gm-page .gm-grid-list .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
/* List text right after the dot and from the top, as in the prototype. Elementor's
   ".elementor-icon-list-icon+.elementor-icon-list-text{align-self:center;padding-inline-start:5px}" loads after this
   file; the centring shows in the 3-column package list, where the items share the row height. */
body.gm-page .elementor-widget-icon-list:not(.gm-tools) .elementor-icon-list-icon + .elementor-icon-list-text { align-self: flex-start; padding-inline-start: 0; }
/* "Package" tag: sized by its own line height, not the 24px line of the widget box around it. */
body.gm-page .elementor-widget-heading:has(~ .gm-grid-list) span.elementor-heading-title { display: block; }

/* ---------- FAQ (Nested Accordion) ---------- */
.gm-page .gm-faq .e-n-accordion-item { border: 0; border-top: 1px solid rgba(22, 51, 0, 0.12); background: transparent; }
.gm-page .gm-faq .e-n-accordion-item:last-child { border-bottom: 1px solid rgba(22, 51, 0, 0.12); }
.gm-page .gm-faq .e-n-accordion-item-title { padding: 22px 2px; gap: 20px; border: 0; background: transparent; justify-content: space-between; }
.gm-page .gm-faq .e-n-accordion-item-title-text { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: #163300; }
.gm-page .gm-faq .e-n-accordion-item > .e-con { padding: 0 0 24px; border: 0; background: transparent; }
.gm-page .gm-faq .e-n-accordion-item > .e-con p { font-size: 16px; line-height: 1.65; color: #40563A; max-width: 62ch; }

.gm-page .gm-faq-cards .e-n-accordion { display: flex; flex-direction: column; gap: 12px; counter-reset: gm-faq; }
.gm-page .gm-faq-cards .e-n-accordion-item { background: #FFFFFF; border: 0; border-radius: 22px; padding: 4px 24px; counter-increment: gm-faq; }
.gm-page .gm-faq-cards .e-n-accordion-item-title { padding: 20px 0; gap: 16px; border: 0; background: transparent; }
.gm-page .gm-faq-cards .e-n-accordion-item-title::before {
	content: counter(gm-faq);
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #163300;
	color: #9FE870;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gm-page .gm-faq-cards .e-n-accordion-item-title-header { flex: 1; }
.gm-page .gm-faq-cards .e-n-accordion-item-title-text { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; color: #163300; }
.gm-page .gm-faq-cards .e-n-accordion-item > .e-con { padding: 0 0 22px 40px; border: 0; background: transparent; }
.gm-page .gm-faq-cards .e-n-accordion-item > .e-con p { font-size: 15px; line-height: 1.6; color: #40563A; max-width: 58ch; }

/* Plus icon turns into a cross when open (both states use the same plus icon). */
.gm-page :is(.gm-faq, .gm-faq-cards) .e-n-accordion-item-title-icon { transition: transform 250ms ease; }
.gm-page :is(.gm-faq, .gm-faq-cards) .e-n-accordion-item[open] .e-n-accordion-item-title-icon { transform: rotate(45deg); }
.gm-page :is(.gm-faq, .gm-faq-cards) .e-n-accordion-item-title-icon :is(i, svg) { color: #163300; fill: #163300; }

/* ---------- Contact form (Contact Form 7 with html_class="gm-cf7": CF7 puts the class on the <form> itself) ---------- */
.gm-page .wpcf7-form.gm-cf7 { display: flex; flex-direction: column; gap: 18px; margin: 0; position: relative; }
.gm-page .gm-cf7 label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; color: #163300; line-height: 1.3; }
.gm-page .gm-cf7 .wpcf7-form-control-wrap { display: block; }
.gm-page .gm-cf7 input[type="text"],
.gm-page .gm-cf7 input[type="email"],
.gm-page .gm-cf7 textarea {
	width: 100%;
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	padding: 14px 18px;
	border-radius: 999px;
	border: 1.5px solid #D8E0D2;
	background: #FFFFFF;
	color: #163300;
	box-shadow: none;
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gm-page .gm-cf7 textarea.wpcf7-textarea { display: block; border-radius: 18px; resize: vertical; min-height: 0; height: auto; }
.gm-page .gm-cf7 input[type="text"]:focus,
.gm-page .gm-cf7 input[type="email"]:focus,
.gm-page .gm-cf7 textarea:focus { border-color: #9FE870; box-shadow: inset 4px 0 0 #9FE870; }
.gm-page .gm-cf7 input::placeholder,
.gm-page .gm-cf7 textarea::placeholder { color: #7A8C74; opacity: 1; }
.gm-page .gm-cf7 .wpcf7-submit {
	width: 100%;
	margin-top: 6px;
	_padding: 16px 30px;
	border-radius: 999px;
	border: 0;
	background: #163300;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background 200ms ease;
}
.gm-page .gm-cf7 .wpcf7-submit:hover { background: #2C5A0B; }
.gm-page .gm-cf7 .gm-cf7-note { font-size: 13px; line-height: 1.5; color: #7A8C74; margin: 0; }
.gm-page .gm-cf7 .gm-cf7-note a { color: #163300; font-weight: 600; border-bottom: 1px solid #9FE870; }
.gm-page .gm-cf7 .gm-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.gm-page .gm-cf7 .wpcf7-not-valid-tip { font-size: 13px; font-weight: 600; margin-top: 6px; }
.gm-page .gm-cf7 .wpcf7-response-output { margin: 0 !important; padding: 12px 16px !important; border-radius: 14px; font-size: 14px; }
/* After a successful send the message is lime green instead of the theme's yellow; error messages keep the yellow. */
.gm-page .wpcf7-form.gm-cf7.sent .wpcf7-response-output { background-color: #9FE870; color: #163300; }
.gm-page .gm-cf7 .wpcf7-spinner { display: none; }
.gm-page .wpcf7-form.gm-cf7.submitting .wpcf7-spinner { display: block; position: absolute; right: 18px; bottom: 18px; margin: 0; }

/* ---------- Europe map ---------- */
.gm-map-wrap { width: 100%; }
.gm-map { display: block; width: 100%; height: auto; }
.gm-pin circle { animation: gm-pin-in 700ms cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes gm-pin-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Reduced motion: final states, no animation ---------- */
@media (prefers-reduced-motion: reduce) {
	.gm-cluster::after, .gm-client img, .gm-header--bar, .gm-lang-btn svg, .gm-page .gm-steps .e-n-tab-title,
	.gm-page :is(.gm-faq, .gm-faq-cards) .e-n-accordion-item-title-icon { transition: none; }
	.gm-cluster:hover::after { transform: none; }
	.gm-pin circle, .gm-typing i, .gm-caret { animation: none; }
}