/* Contact Genasys, /contact-genasys/ (rebuilt 20 October 2026). The hero is
   the shared product hero, "What happens next" the shared Step journey and
   the offices the homepage's proof accordion; this sheet holds only what is
   particular to this page: the route cards in the hero, the enquiry section
   and the accordion's settings for three offices. The local-time clock is
   genasys_child_contact_clock() in functions.php. */

/* The hero line stops well short of the blob behind the cards (Ed) */
.gn-ct-hero .gn-product-hero-body { max-width: 460px; }

/* Route cards, in the hero's graphic column */
.gn-ct-routes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	text-align: left;
}
.gn-ct-route {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	background: var(--surface-card);
	border-radius: 16px;
	box-shadow: 0 12px 32px var(--shadow-strong);
	color: var(--text-body);
	text-decoration: none !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gn-ct-route:hover, .gn-ct-route:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px var(--shadow-strong);
}
.gn-ct-route:focus-visible { outline: 3px solid var(--wp--preset--color--cta-hover); outline-offset: 3px; }
.gn-ct-route-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 10px;
	border-radius: 12px;
	background: var(--hue);
	color: var(--hue-on);
}
.gn-ct-route-icon svg { width: 22px; height: 22px; }
.gn-ct-route-title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-strong);
}
.gn-ct-route-desc { font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.gn-ct-route-go {
	margin-top: auto;
	padding-top: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-link);
	overflow-wrap: anywhere;
}
/* Each card's link is a text link in its icon's colour (Ed), hover to ink;
   the chevron is the shared text link's, in style.css */
.gn-ct-route .gn-ct-route-go { color: var(--hue); transition: color 0.3s ease; }
.gn-ct-route:is(:hover, :focus-visible) .gn-ct-route-go { color: var(--wp--preset--color--ink); }
/* A background blob behind the cards: the brand's solid teal blob, centred
   on the grid and larger than it, so it shows round every side (Ed). The
   SVG is blob-teal.png's own outline traced, because the 400px PNG steps
   at this size. */
.gn-ct-routes { position: relative; isolation: isolate; }
.gn-ct-routes::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 116%;
	aspect-ratio: 334.6 / 323.1;
	transform: translate(-50%, -50%);
	background: url("/wp-content/themes/genasys-child/assets/brand/blob-teal.svg") center / contain no-repeat;
	pointer-events: none;
}
@media (max-width: 600px) {
	.gn-ct-routes { grid-template-columns: minmax(0, 1fr); }
	.gn-ct-route { padding: 20px; }
}

/* Sales enquiry: words left, the HubSpot form right. It and the offices are
   white sections, so the page's own section margin spaces them (§196). */
/* The product hero's two columns exactly (its 40px gap and its 28px extra
   inset), so the form card lines up with the four route cards above (Ed) */
.gn-ct-enquiry-inner.gn-ct-enquiry-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--content-size) + 56px);
	padding-inline: 28px;
	margin-inline: auto !important;
}
.gn-ct-enquiry-inner > * { max-width: none !important; margin: 0 !important; }
.gn-ct-enquiry-head h2 { margin: 0 0 16px; font-size: var(--gn-section-heading); line-height: 1.1; }
/* One type scale for the page (Ed: no mixed sizes). Section intros are the
   product hero's body size, 18px and 16px from 1024px down; card titles 20px;
   card text 16px; small capitals 13px. The enquiry intro, list and privacy
   note are all intro text. */
.gn-ct-enquiry-head :is(p:not(.gn-eyebrow), li),
.gn-journey-head p:not(.gn-eyebrow),
.gn-ct-offices .gn-proof-body { font-size: 18px; line-height: 1.6; }
.gn-ct-enquiry-head :is(p:not(.gn-eyebrow), li) { color: var(--text-muted); }
.gn-journey .gn-jstep h3 { font-size: 20px; }
.gn-journey .gn-jstep p { font-size: 16px; }
@media (max-width: 1024px) {
	.gn-ct-enquiry-head :is(p:not(.gn-eyebrow), li),
	.gn-journey-head p:not(.gn-eyebrow),
	.gn-ct-offices .gn-proof-body { font-size: 16px; }
}
.gn-ct-enquiry-head > * + * { margin-block-start: 16px !important; }
.gn-ct-ask li + li { margin-top: 8px; }
.gn-ct-ask li::before { top: 5px; }
/* Who you will hear from: the About Us team cards (.gn-ab-team, style.css)
   two by two (Gavin and Chelene, then Ed and Herman), the photo on the left
   with name and role beside it (Ed). One column on phones. */
.gn-ct-enquiry-head > .gn-ct-team-label { margin-top: 40px !important; }
.gn-ct-team { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 20px 48px; margin-top: 24px !important; }
@media (max-width: 600px) {
	.gn-ct-team { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.gn-ct-team > .gn-ab-team-card {
	flex: none;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	text-align: left;
}
.gn-ct-team .gn-ab-team-photo { grid-row: 1 / span 2; max-width: 64px; margin: 0; }
.gn-ct-team .gn-ab-team-name { align-self: end; margin: 0 0 2px; font-size: 16px; line-height: 1.2; }
.gn-ct-team .gn-ab-team-role { align-self: start; font-size: 13px; line-height: 1.3; }
.gn-ct-team .gn-ab-team-card:focus-visible { outline-offset: 4px; }

.gn-ct-enquiry-form {
	padding: 32px;
	background: var(--surface-card);
	border-radius: 16px;
	box-shadow: 0 8px 32px var(--shadow-mid);
}
@media (max-width: 1024px) {
	.gn-ct-enquiry-inner.gn-ct-enquiry-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.gn-ct-enquiry-form { padding: 24px 20px; }
}

/* Offices: the homepage's proof accordion (.gn-proof-*, synced block 24's
   component, in style.css) on a painted band. What follows is only what
   three offices need that four case studies did not. */
.gn-ct-offices {
	background: radial-gradient(at top center, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--ink) 100%);
	padding-block: var(--gn-section-space);
}
.gn-ct-offices .gn-proof-header .gn-eyebrow { color: var(--wp--preset--color--cta-hover); margin-bottom: 8px; }
/* Until a photo is added, an office shows its own colour */
.gn-ct-offices .gn-proof-item { background-color: var(--hue); background-size: cover; background-position: center; }
/* A city name, not a number: smaller, and the open card narrower so the
   closed ones still hold "Johannesburg" */
.gn-ct-offices .gn-proof-num { font-size: 30px; margin: 0 0 8px; padding: 0; overflow-wrap: normal; }
/* The band meets the journey's soft blue above: no white strip between two
   coloured grounds (§196) */
body.page .entry-content > .gn-journey + .gn-ct-offices { margin-block-start: 0; }
/* Ed: on this page the journey sits on white, and has the same space under
   its last step as above its heading, so the last step drops its own 30px */
.gn-journey { background: none; }
.gn-journey .gn-jstep:last-child { padding-bottom: 0; }
.gn-ct-offices .gn-proof-unit { margin: 0; min-height: 0; font-size: 13px; }
.gn-ct-offices .gn-proof-meta { bottom: 225px; }
.gn-ct-offices .gn-proof-customer { width: auto; margin-bottom: 10px; font-size: 16px; }
.gn-ct-offices :is(.gn-proof-item:first-child, .gn-proof-item:hover),
.gn-ct-offices .gn-proof-accordion:hover .gn-proof-item:hover { flex: 1.7; }
@media (max-width: 1024px) {
	.gn-ct-offices .gn-proof-accordion { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gn-ct-offices :is(.gn-proof-item, .gn-proof-item:first-child, .gn-proof-item:hover) { height: 420px; }
	.gn-ct-offices .gn-proof-num { font-size: 28px; }
}
@media (max-width: 860px) {
	.gn-ct-offices .gn-proof-accordion { grid-template-columns: minmax(0, 1fr); }
	.gn-ct-offices :is(.gn-proof-item, .gn-proof-item:first-child, .gn-proof-item:hover) { height: 380px; }
	.gn-ct-offices .gn-proof-num { font-size: 34px; }
}