/* About Us, one-URL chrome (STYLE-NOTES §300). Loaded by slug: about-us.
   The hero is the shared .gn-product-hero component and needs nothing here. */

/* Colour modifiers (blobs, signs, captions, team circles) live in style.css,
   with the rule that reads them. See the note there before moving them back. */

/* ---- Shared section heads ---- */
/* ---- How we got here: archive snapshots run in a line above the timeline ---- */
.gn-ab-archive-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 18px 14px;
	max-width: 1090px;
	margin: 0 auto 48px !important;
}

.gn-ab-archive-strip > * {
	margin: 0 !important;
	max-width: none !important;
}

/* A small archive print: a photo in a white border, tilted, the way an old snapshot would sit
   loose on a desk. Lightly warmed rather than desaturated, so the strip reads as bright and
   present-day, not a muted sepia flashback. */
.gn-ab-archive-photo {
	width: 118px;
	padding: 6px 6px 16px;
	background: var(--wp--preset--color--white);
	border-radius: 3px;
	box-shadow: 0 8px 18px var(--shadow-mid);
	transition: rotate 0.3s ease, scale 0.3s ease;
}

.gn-ab-archive-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: brightness(1.12) saturate(1.15);
}

/* The scatter angles. Each photo carried its own `style="rotate:Xdeg"` until
   22 September 2026, which made all eight image blocks invalid in the editor:
   core/image's save() emits no style attribute, so every one of them offered
   "Attempt recovery", and recovering would have flattened the strip. Same
   angles, as classes, which is also how they can be changed without opening
   the block editor. Seven classes for eight photos; two sit at 3deg. */
.gn-ab-rot-n6 { rotate: -6deg; }
.gn-ab-rot-n5 { rotate: -5deg; }
.gn-ab-rot-n4 { rotate: -4deg; }
.gn-ab-rot-n3 { rotate: -3deg; }
.gn-ab-rot-3  { rotate: 3deg; }
.gn-ab-rot-4  { rotate: 4deg; }
.gn-ab-rot-6  { rotate: 6deg; }

/* No `!important` on the straightening: it was there to beat an inline style,
   and a class plus a pseudo-class (0,2,0) already beats the angle class
   (0,1,0). Verified by hovering a photo in a browser and reading the
   computed rotate, not by reasoning about specificity alone. */
.gn-ab-archive-photo:hover {
	rotate: 0deg;
	scale: 1.14;
	z-index: 2;
	position: relative;
}

/* From tablet up the prints stay in one row and shrink with the width, up to
   their 118px, rather than wrapping one onto a second line (Ed). */
@media (min-width: 768px) {
	.gn-ab-archive-strip { flex-wrap: nowrap; }
	.gn-ab-archive-strip > .gn-ab-archive-photo {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 118px !important;
	}
}

@media (max-width: 700px) {
	.gn-ab-archive-photo {
		width: 84px;
	}
	.gn-ab-archive-strip {
		gap: 12px 10px;
	}
}

.gn-ab-tl-track { --tl-count: 6; }

/* One gradient for the whole line. Each blob's colour stays solid until 4px
   past the blob's real edge (measured from the artwork), then blends into the
   next blob's colour, arriving 4px before that blob's edge. Centres sit at
   8.33%, 25%, 41.67%, 58.33%, 75% and 91.67%. */
/* The line repeats, in order, the gn-hue-* class on each era in the page
   content (now purple, primary, cta-hover, ink, accent, cta). A gradient cannot read its eras'
   colours, so change an era's class and change its stops here too.
   Checked in the browser 26 September 2026: they match. */
.gn-ab-tl-track::before {
	background: linear-gradient(90deg,
		var(--wp--preset--color--purple) 0,
		var(--wp--preset--color--purple) calc(8.333% + var(--tl-blob) * 0.372 + 4px),
		var(--wp--preset--color--primary) calc(25% - var(--tl-blob) * 0.405 - 4px),
		var(--wp--preset--color--primary) calc(25% + var(--tl-blob) * 0.403 + 4px),
		var(--wp--preset--color--cta-hover) calc(41.667% - var(--tl-blob) * 0.425 - 4px),
		var(--wp--preset--color--cta-hover) calc(41.667% + var(--tl-blob) * 0.41 + 4px),
		var(--wp--preset--color--ink) calc(58.333% - var(--tl-blob) * 0.42 - 4px),
		var(--wp--preset--color--ink) calc(58.333% + var(--tl-blob) * 0.388 + 4px),
		var(--wp--preset--color--accent) calc(75% - var(--tl-blob) * 0.425 - 4px),
		var(--wp--preset--color--accent) calc(75% + var(--tl-blob) * 0.41 + 4px),
		var(--wp--preset--color--cta) calc(91.667% - var(--tl-blob) * 0.4 - 4px),
		var(--wp--preset--color--cta) 100%);
}




/* ---- Customers on three continents ---- */
.gn-ab-where.gn-painted {
	padding-block: var(--gn-section-space);
}

.gn-ab-where {
	background: radial-gradient(at 50% 0%, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--ink) 100%);
}

.gn-ab-where .gn-ab-head p {
	color: rgb(from var(--genasys-white) r g b / 0.85);
}

.gn-ab-map {
	position: relative;
	max-width: 1100px;
	margin: 0 auto 56px;
	aspect-ratio: 1200 / 590;
}

.gn-ab-map-world {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}

.gn-ab-map-links {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	stroke: var(--wp--preset--color--white);
	stroke-width: 3;
	stroke-opacity: 0.9;
	pointer-events: none;
}

.gn-ab-inset {
	position: absolute;
	width: 21.67%;
	margin: 0;
}

.gn-ab-inset img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 24px rgb(from var(--genasys-space-blue) r g b / 0.3));
}

.gn-ab-inset--uk { left: 58.33%; top: -3.05%; }
.gn-ab-inset--us { left: 3.75%; top: 31.86%; }
.gn-ab-inset--za { left: 67.92%; top: 50%; }

.gn-ab-map .gn-ab-inset figcaption.gn-ab-cap {
	position: absolute;
	left: 50%;
	top: 96%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 9px 22px;
	border-radius: 999px;
	background: var(--hue);
	color: var(--hue-on);
	font-size: 15px;
	text-align: left;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 6px 18px var(--shadow-strong);
}

.gn-ab-map .gn-ab-cap b {
	font-weight: 700;
}

.gn-ab-map .gn-ab-cap i {
	width: 1.5px;
	height: 16px;
	background: currentColor;
	opacity: 0.55;
}

.gn-ab-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin: 0 auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

.gn-ab-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.gn-ab-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.gn-ab-dot--office {
	background: var(--wp--preset--color--white);
}

.gn-ab-dot--customer {
	background: var(--wp--preset--color--cta);
	box-shadow: 0 0 0 2.5px var(--wp--preset--color--white);
}

/* ---- Mission and values: words on the left, signs on the right ---- */
/* The same background as the homepage "Insurance software chosen by" section:
   white at the top fading to a Steel Blue tint by 70% down and holding it to the edge, so it still shows now that the dark awards band sits directly beneath it. */
/* Reversed from the usual white-to-blue fade (Ed, 22 September): blue at the top, fading to
   white by the bottom, so it reads as a clean divide from the dark awards band underneath it
   rather than a repeat of the same fade. */
.gn-ab-values.gn-painted {
	padding-block: var(--gn-section-space);
	background: linear-gradient(180deg, rgb(from var(--genasys-steel-blue) r g b / 0.18) 0%, rgb(from var(--genasys-steel-blue) r g b / 0.18) 30%, var(--wp--preset--color--white) 100%);
}




/* ---- Why do our clients choose us?: the same soft fade the rest of the site uses, white at
   the top holding to about 55%, then fading to a light Steel Blue tint by the bottom. A little
   extra margin below it (on top of the theme's own section gap) opens up more air before
   Leadership, since two content-heavy sections were sitting close together. */
.gn-ab-why.gn-painted {
	padding-block: var(--gn-section-space);
	margin-bottom: 40px !important;
	background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 55%, rgb(from var(--genasys-steel-blue) r g b / 0.15) 100%);
}

/* ---- Life at Genasys: the words dead centre, snapshots with handwritten captions all round them ---- */
@font-face {
	font-family: "GN Hand";
	src: url("../fonts/caveat-hand.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* One block, not a grid: every photo is absolutely placed inside a fixed-proportion box and
   overlaps its neighbours, the way a real pile of prints thrown on a table would. Position
   comes from a generated nth-of-type rule per photo (below), never from an inline style, so
   every image block still round-trips cleanly (CLAUDE.md trap 1). */
.gn-ab-snaps {
	position: relative;
	container-type: inline-size;
	max-width: 820px;
	aspect-ratio: 820 / 720;
	margin: 0 auto;
}

/* §341 */
@media (min-width: 861px) {
	.gn-ab-life {
		padding-block: 140px;
	}
}

.gn-ab-snaps > * {
	margin: 0 !important;
	max-width: none !important;
}

/* No card: the words sit straight on the pile, in the clear middle every photo is placed
   around. A text shadow keeps it readable over whichever photo edge reaches nearest. */
.gn-ab-snaps-text {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: 62%;
	padding: 20px 16px;
	text-align: center;
}

.gn-ab-snaps-text h2,
.gn-ab-snaps-text p,
.gn-ab-snaps-text .gn-ab-textlink {
	text-shadow: 0 2px 16px rgb(from var(--genasys-white) r g b / 0.9), 0 2px 16px rgb(from var(--genasys-white) r g b / 0.9);
}

.gn-ab-snaps-text h2 {
	font-size: var(--gn-section-heading);
	line-height: 1.1;
}

.gn-ab-snaps-text p {
	font-size: 17px;
	line-height: 1.6;
}

/* A snapshot: a small white-bordered print, tilted, positioned and sized entirely by its own
   generated nth-of-type rule below (left/top/width/rotate/z-index). translate centres each
   photo on its own left/top point, so the numbers are the centre of the print, not a corner. */
.gn-ab-snap {
	position: absolute;
	translate: -50% -50%;
	padding: 7px 7px 0;
	background: var(--wp--preset--color--white);
	border-radius: 4px;
	box-shadow: 0 8px 20px var(--shadow-mid);
	transition: scale 0.3s ease, z-index 0s;
}

/* A little red pin at the top of every photo, as if it were pinned to the page. Counter-
   rotated by the photo's own tilt (--gn-pin-rot, set alongside `rotate` in each nth-of-type
   rule below) so the pin itself always reads as upright, the way a real pin would. */
.gn-ab-snap::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	translate: -50% 0;
	rotate: var(--gn-pin-rot, 0deg);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff6b8f, var(--wp--preset--color--cta) 60%, #9e0048 100%);
	box-shadow: 0 2px 5px var(--shadow-strong);
	z-index: 5;
}

.gn-ab-snap img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 50% 30%;
}

.gn-ab-snap figcaption.wp-element-caption {
	margin: 0;
	padding: 4px 2px 6px;
	text-align: center;
	font-family: "GN Hand", "Segoe Print", "Bradley Hand", cursive;
	font-size: max(1.6cqw, 13px);
	font-weight: 600;
	line-height: 1.05;
	color: var(--wp--preset--color--ink);
}

.gn-ab-snap:hover {
	scale: 1.18;
	z-index: 20 !important;
}

/* Twenty-five hand-generated positions (a golden-angle spiral in an annulus around the
   text), one rule per photo in source order, so the pile is dense and organic rather than an
   even grid. */
.gn-ab-snap:nth-of-type(1) { left: 92.65%; top: 50.00%; width: 15%; rotate: -9deg; z-index: 1; --gn-pin-rot: 9deg; }
.gn-ab-snap:nth-of-type(2) { left: 9.55%; top: 92.20%; width: 18%; rotate: 6deg; z-index: 2; --gn-pin-rot: -6deg; }
.gn-ab-snap:nth-of-type(3) { left: 53.05%; top: 10.42%; width: 14%; rotate: -4deg; z-index: 3; --gn-pin-rot: 4deg; }
.gn-ab-snap:nth-of-type(4) { left: 78.85%; top: 92.86%; width: 19%; rotate: 8deg; z-index: 4; --gn-pin-rot: -8deg; }
.gn-ab-snap:nth-of-type(5) { left: 7.35%; top: 41.41%; width: 15%; rotate: -6deg; z-index: 1; --gn-pin-rot: 6deg; }
.gn-ab-snap:nth-of-type(6) { left: 93.80%; top: 18.27%; width: 17%; rotate: 4deg; z-index: 2; --gn-pin-rot: -4deg; }
.gn-ab-snap:nth-of-type(7) { left: 40.81%; top: 88.93%; width: 13%; rotate: -8deg; z-index: 3; --gn-pin-rot: 8deg; }
.gn-ab-snap:nth-of-type(8) { left: 30.75%; top: 7.80%; width: 18%; rotate: 5deg; z-index: 4; --gn-pin-rot: -5deg; }
.gn-ab-snap:nth-of-type(9) { left: 92.65%; top: 67.74%; width: 15%; rotate: -3deg; z-index: 1; --gn-pin-rot: 3deg; }
.gn-ab-snap:nth-of-type(10) { left: 5.63%; top: 70.86%; width: 18%; rotate: 7deg; z-index: 2; --gn-pin-rot: -7deg; }
.gn-ab-snap:nth-of-type(11) { left: 67.45%; top: 7.54%; width: 14%; rotate: -9deg; z-index: 3; --gn-pin-rot: 9deg; }
.gn-ab-snap:nth-of-type(12) { left: 62.01%; top: 93.62%; width: 19%; rotate: 6deg; z-index: 4; --gn-pin-rot: -6deg; }
.gn-ab-snap:nth-of-type(13) { left: 5.25%; top: 20.46%; width: 15%; rotate: -4deg; z-index: 1; --gn-pin-rot: 4deg; }
.gn-ab-snap:nth-of-type(14) { left: 100.36%; top: 37.39%; width: 17%; rotate: 8deg; z-index: 2; --gn-pin-rot: -8deg; }
.gn-ab-snap:nth-of-type(15) { left: 16.27%; top: 104.64%; width: 13%; rotate: -6deg; z-index: 3; --gn-pin-rot: 6deg; }
.gn-ab-snap:nth-of-type(16) { left: 44.17%; top: -1.23%; width: 18%; rotate: 4deg; z-index: 4; --gn-pin-rot: -4deg; }
.gn-ab-snap:nth-of-type(17) { left: 99.00%; top: 97.04%; width: 15%; rotate: -8deg; z-index: 1; --gn-pin-rot: 8deg; }
.gn-ab-snap:nth-of-type(18) { left: -2.20%; top: 52.46%; width: 18%; rotate: 5deg; z-index: 2; --gn-pin-rot: -5deg; }
.gn-ab-snap:nth-of-type(19) { left: 95.00%; top: -1.00%; width: 14%; rotate: -3deg; z-index: 3; --gn-pin-rot: 3deg; }
.gn-ab-snap:nth-of-type(20) { left: 47.89%; top: 101.97%; width: 19%; rotate: 7deg; z-index: 4; --gn-pin-rot: -7deg; }
.gn-ab-snap:nth-of-type(21) { left: 11.23%; top: -2.92%; width: 15%; rotate: -9deg; z-index: 1; --gn-pin-rot: 9deg; }
.gn-ab-snap:nth-of-type(22) { left: 103.85%; top: 58.25%; width: 17%; rotate: 6deg; z-index: 2; --gn-pin-rot: -6deg; }
.gn-ab-snap:nth-of-type(23) { left: -4.77%; top: 93.40%; width: 13%; rotate: -4deg; z-index: 3; --gn-pin-rot: 4deg; }
.gn-ab-snap:nth-of-type(24) { left: 61.00%; top: -5.67%; width: 18%; rotate: 8deg; z-index: 4; --gn-pin-rot: -8deg; }
.gn-ab-snap:nth-of-type(25) { left: 79.60%; top: 108.84%; width: 15%; rotate: -6deg; z-index: 1; --gn-pin-rot: 6deg; }
/* Two added by hand (Ed, 25 September 2026), in gaps at the rim clear of the words. */
.gn-ab-snap:nth-of-type(26) { left: 27.00%; top: 96.00%; width: 16%; rotate: 5deg; z-index: 2; --gn-pin-rot: -5deg; }
.gn-ab-snap:nth-of-type(27) { left: 77.00%; top: 3.00%; width: 16%; rotate: -5deg; z-index: 2; --gn-pin-rot: 5deg; }

.gn-ab-textlink {
	text-align: left;
	margin-top: 24px;
}

/* 26 photos in one strip: the shared 135s clock is for about 18. */
.gn-ab-life .gn-photo-strip {
	--gn-photo-duration: 190s;
}

.gn-ab-textlink {
	text-align: center;
	margin-top: 32px;
}

.gn-ab-textlink a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.gn-ab-textlink a::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s ease;
}

.gn-ab-textlink a:hover {
	color: var(--wp--preset--color--accent);
}

.gn-ab-textlink a:hover::after {
	transform: translateX(5px);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	.gn-ab-team { --cols: 4; }
}

@media (max-width: 1024px) {
	.gn-ab-team { --cols: 3; }
}

@media (max-width: 860px) {

	/* Map: the world on top, the three close-ups stacked below it. */
	.gn-ab-map {
		aspect-ratio: auto;
		margin-bottom: 32px;
	}

	.gn-ab-map-world {
		position: static;
	}

	.gn-ab-map-links {
		display: none;
	}

	.gn-ab-inset {
		position: static;
		width: 230px;
		margin: 32px auto 0;
	}

	.gn-ab-map .gn-ab-inset figcaption.gn-ab-cap {
		position: static;
		transform: none;
		width: fit-content;
		margin: 6px auto 0;
		white-space: normal;
		text-align: center;
	}

	/* Touch has no hover, so the value signs stay open. */
	/* The overlapping pile only holds together above 860px, where there is enough room for 25
	   photos to genuinely spread out. Below it (§346, Ed): the words, then four photos in a
	   2x2 grid that dissolve into the next four every 5s, six sets of four. All four of a set
	   share a grid cell with the same slot in every other set, so the sets stack and
	   cross-fade in place. CSS only; the shared pause button stops it. */
	.gn-ab-snaps {
		position: static;
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18px;
		max-width: 480px;
		margin: 0 auto;
	}
	.gn-ab-snaps-text {
		position: static;
		translate: none;
		width: 100%;
		grid-column: 1 / -1;
		grid-row: 1;
		margin-bottom: 6px !important;
	}
	.gn-ab-snaps > .gn-ab-snap {
		position: static;
		translate: none;
		rotate: 0deg !important;
		width: 100% !important;
		opacity: 0;
		animation: gnSnapSet 30s linear infinite;
	}
	.gn-ab-snap:hover { scale: 1 !important; }
	.gn-ab-snap:nth-of-type(4n+1) { grid-area: 2 / 1; }
	.gn-ab-snap:nth-of-type(4n+2) { grid-area: 2 / 2; }
	.gn-ab-snap:nth-of-type(4n+3) { grid-area: 3 / 1; }
	.gn-ab-snap:nth-of-type(4n+4) { grid-area: 3 / 2; }
	/* 27 photos: the sixth set is 21, 22, 26 and 27; 23 to 25 sit out here. */
	.gn-ab-snap:nth-of-type(n+23):nth-of-type(-n+25) { display: none; }
	.gn-ab-snap:nth-of-type(26) { grid-area: 3 / 1; }
	.gn-ab-snap:nth-of-type(27) { grid-area: 3 / 2; }
	/* Set k starts k x 5s in; the -1s puts the first set fully in view at load. */
	.gn-ab-snap:nth-of-type(n+1):nth-of-type(-n+4) { animation-delay: -1s; }
	.gn-ab-snap:nth-of-type(n+5):nth-of-type(-n+8) { animation-delay: 4s; }
	.gn-ab-snap:nth-of-type(n+9):nth-of-type(-n+12) { animation-delay: 9s; }
	.gn-ab-snap:nth-of-type(n+13):nth-of-type(-n+16) { animation-delay: 14s; }
	.gn-ab-snap:nth-of-type(n+17):nth-of-type(-n+20) { animation-delay: 19s; }
	.gn-ab-snap:nth-of-type(n+21):nth-of-type(-n+27) { animation-delay: 24s; }
	.gn-ab-snaps.gn-paused > .gn-ab-snap { animation-play-state: paused; }
	.gn-snaps-pause { grid-column: 1 / -1; justify-self: center; position: relative; }
}
/* A set: 1s fade in, 4s held, 1s fade out while the next set fades in, then
   hidden for the rest of the 30s cycle (six sets of 5s). */
@keyframes gnSnapSet {
	0% { opacity: 0; }
	3.333% { opacity: 1; }
	16.667% { opacity: 1; }
	20% { opacity: 0; }
	100% { opacity: 0; }
}
@media (min-width: 861px) {
	.gn-snaps-pause { display: none; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	.gn-ab-snaps > .gn-ab-snap { animation: none; }
	.gn-ab-snaps > .gn-ab-snap:nth-of-type(-n+4) { opacity: 1; }
	.gn-snaps-pause { display: none; }
}

@media (max-width: 781px) {
}

@media (max-width: 600px) {
	.gn-ab-team { --cols: 2; --gx: 16px; row-gap: 32px; }
	.gn-ab-team-name { font-size: 16px; }
	.gn-ab-map-world { display: none; }
}

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


.gn-ab-values-copy .gn-eyebrow { margin: 26px 0 0; }


/* Room under the strip for the photos' shadows, and between the strip and its pause button. */

/* Section headings match the homepage's (--gn-section-heading, tight line height), not the 32px h2 default. */
.gn-ab-values-copy h2 {
	font-size: var(--gn-section-heading);
	line-height: 1.1;
}

/* §425: on a tablet the three close-ups sit in a row under the map, not one per row */
@media (min-width: 601px) and (max-width: 860px) {
	.gn-ab-map { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 3%; }
	.gn-ab-map-world { flex: 0 0 100%; }
	.gn-ab-inset { width: 30%; margin: 32px 0 0; }
}