/*
 * GNG Interiors — child theme styles. GENERATED by tools/build_css.py from assets/src/*.css — edit those.
 * Matches the existing site: Montserrat, black on white, tan accent #D1A780, olive #373E32.
 */

/* ===== 00-base.css ===== */

:root {
	--gng-ink: #111111;
	--gng-text: #4a4a4a;
	--gng-muted: #6b6b6b;       /* 5.3:1 on white, 4.8:1 on stone (was #7a7a7a: 4.3:1, below AA) */
	--gng-line: #e5e1db;
	--gng-paper: #ffffff;
	--gng-stone: #f4f2ef;
	--gng-accent: #d1a780;      /* brand tan: rules, fills, large type, and small text on dark (8.6:1 on ink) */
	--gng-accent-text: #8a6848; /* the same tan, darker, for small text on light: 5.05:1 on white, 4.5:1 on stone */
	--gng-accent-ink: var(--gng-accent-text); /* alias: the name the showcase / accomplishments partials use */
	--gng-olive: #373e32;
	--gng-focus: var(--gng-ink); /* keyboard focus ring; white on dark surfaces (below) */
	--gng-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--gng-gutter: clamp(20px, 5vw, 80px);
	--gng-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark surfaces. Eyebrows switch back to the brand tan (#d1a780 is only 2.2:1 on white but 8.6:1 on ink) and focus
   rings turn white. Give any new dark band the class .gng-on-dark (or set these two properties on it).
   Not on .gng-project__nav-item: its focus ring is drawn outside the tile, on the white page. */
.gng-on-dark,
.gng-project__hero,
.gng-cta--dark {
	--gng-eyebrow-color: var(--gng-accent);
	--gng-focus: #ffffff;
}
.gng-project__nav-item { --gng-eyebrow-color: var(--gng-accent); }

/* ---------- shared ---------- */

.gng-eyebrow {
	margin: 0 0 12px;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gng-eyebrow-color, var(--gng-accent-text));
}

.gng-label {
	margin: 0 0 20px;
	font-family: var(--gng-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gng-ink);
}

.gng-link {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--gng-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--gng-ink);
	padding-bottom: 4px;
}
.gng-link span { transition: transform 0.4s var(--gng-ease); }
.gng-link:hover span, .gng-link:focus-visible span { transform: translateX(6px); }

.gng-button {
	display: inline-block;
	padding: 16px 40px;
	border: 1px solid var(--gng-ink);
	border-radius: 999px;
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--gng-ink);
	text-decoration: none;
	transition: background-color 0.35s var(--gng-ease), color 0.35s var(--gng-ease);
}
.gng-button:hover, .gng-button:focus-visible { background: var(--gng-ink); color: #fff; }

.gng-link:focus-visible, .gng-button:focus-visible, .gng-showcase a:focus-visible, .gng-project a:focus-visible {
	outline: 2px solid var(--gng-focus);
	outline-offset: 4px;
}

/* Entrance animation: only while html.gng-reveal-on is set (JS + motion allowed; content is visible otherwise).
   [data-gng-reveal] is used by child-theme markup, .gng-reveal by Elementor widgets (Advanced → CSS Classes). */
.gng-reveal-on [data-gng-reveal],
.gng-reveal-on .gng-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.9s var(--gng-ease), transform 0.9s var(--gng-ease);
	transition-delay: var(--gng-delay, 0s);
}
.gng-reveal-on [data-gng-reveal].is-in,
.gng-reveal-on .gng-reveal.is-in { opacity: 1; transform: none; }

/* ===== 01-sitewide.css ===== */

/* ---------- site-wide: keyboard focus in Elementor chrome, mobile menu close, empty slots (change 019) ---------- */

/* Header and mobile-menu links. currentColor = white on the white-text header (dark hero), dark on header 1200 and
   in the white menu popup, so the ring always contrasts with what is behind it. */
.elementor-location-header a:focus-visible,
.elementor-location-popup a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Mobile menu (popup 1432): its "x" close link gets a 44 × 44 tap area. */
.gng-popup-close .elementor-heading-title a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* About (604): the accomplishments container renders nothing until a project is marked sold; collapse it
   entirely until then (kept visible in the Elementor editor so it can still be selected). */
.gng-accomplishments-slot:not(:has(.gng-accomplishments)):not(.elementor-element-edit-mode) {
	display: none;
}

/* ===== 10-showcase.css ===== */

/* ---------- homepage showcase ([gng_projects_showcase], inc/components.php) ---------- */

.gng-showcase {
	--gng-muted: #6b6b6b;        /* the base #7a7a7a is 4.3:1 on white; 14px meta text needs 4.5:1 */
	--gng-accent-ink: #8a6848;   /* the tan accent, darkened for small text on white (5:1; #d1a780 is 2.2:1) */
	display: grid;
	gap: clamp(56px, 9vw, 120px);
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--gng-gutter) clamp(40px, 6vw, 80px);
}

.gng-showcase__item {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.gng-showcase__item:nth-child(even) { grid-template-columns: 5fr 7fr; }
.gng-showcase__item:nth-child(even) .gng-showcase__media { order: 2; }

.gng-showcase__media {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 4 / 3;
	background: var(--gng-stone);
}
.gng-showcase__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--gng-ease);
}
/* Zoom on pointer hover (not on touch, where it would stick after a tap) and when a link inside has keyboard focus. */
@media (prefers-reduced-motion: no-preference) {
	.gng-showcase__item:focus-within .gng-showcase__media img { transform: scale(1.05); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gng-showcase__item:hover .gng-showcase__media img { transform: scale(1.05); }
}

.gng-showcase .gng-eyebrow { color: var(--gng-accent-ink); }

.gng-showcase__title {
	margin: 0 0 10px;
	font-family: var(--gng-font);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--gng-ink);
}
.gng-showcase__title a { color: inherit; text-decoration: none; }
.gng-showcase__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.gng-showcase__meta {
	margin: 0 0 18px;
	font-family: var(--gng-font);
	font-size: 14px;
	color: var(--gng-muted);
}

.gng-showcase__excerpt {
	margin: 0 0 28px;
	max-width: 46ch;
	font-family: var(--gng-font);
	font-size: 15px;
	line-height: 1.75;
	color: var(--gng-text);
}

/* A larger tap area for the text link without changing how it looks. */
.gng-showcase .gng-link { position: relative; }
.gng-showcase .gng-link::after { content: ""; position: absolute; inset: -12px -8px; }
.gng-showcase a:focus-visible { outline: 2px solid var(--gng-ink); outline-offset: 4px; }

.gng-showcase__more { text-align: center; }

/* Screen-reader-only text (also used by [gng_project]). */
.gng-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.gng-showcase__item, .gng-showcase__item:nth-child(even) { grid-template-columns: 1fr; }
	.gng-showcase__item:nth-child(even) .gng-showcase__media { order: 0; }
}

/* Tap targets: "View project" (26px tall) and the title links (32px) were under the 44px minimum on phones. An
   invisible extension of each link's hit area fixes that without changing how they look. */
.gng-showcase .gng-link,
.gng-showcase__title a { position: relative; }
.gng-showcase .gng-link::after,
.gng-showcase__title a::after {
	content: "";
	position: absolute;
	inset: -10px -6px;
}

/* ===== 11-home.css ===== */

/* ---------- homepage story (front page 657: changes/012, inc/home.php) ----------
   Scoped to body.gng-home. Selectors that restyle Elementor elements carry one class more than Elementor's own
   per-element rules (post-657.css) and load after them. */

.gng-home {
	--gng-home-accent-ink: #8a6848; /* tan darkened for small text on light backgrounds (5:1), as in 30-accomplishments */
}

/* Section eyebrows ("Who we are", "Our work", …): a short tan rule, then the label. */
.gng-home .gng-home-eyebrow {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0;
	color: var(--gng-home-accent-ink);
}
.gng-home .gng-home-eyebrow::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background: var(--gng-accent);
}
.gng-home .gng-home-eyebrow--center { justify-content: center; margin-bottom: 14px; }
.gng-home .gng-home-services .gng-home-eyebrow { color: var(--gng-accent); } /* 5:1 on olive */

/* ---------- hero ---------- */

/* Darker at the top (white header links) and bottom (H1 + buttons), lighter in the middle so the photo/video shows.
   Both overlays: the container's own (over the poster) and the video's (over the playing video). */
.gng-home .elementor .e-con.e-parent.gng-home-hero::before,
.gng-home .elementor .e-con.e-parent.gng-home-hero > .elementor-background-video-container::before {
	background-color: transparent;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.68) 100%);
	opacity: 1;
}
/* The hero fills the first screen. The header bars pull the page up under themselves with a negative margin
   (180 px on desktop and tablet, 110 px on phones) that is larger than the bar, so the hero starts above the top
   of the window by the difference: bar 56–63 px on desktop, 79 px on tablet, 60 px on phones (measured
   2026-09-22). The hero is taller by that much, so its bottom — H1 and buttons — sits at the bottom of the window. */
.gng-home .elementor .e-con.e-parent.gng-home-hero { --gng-hero-pull: 120px; --min-height: calc(100vh + var(--gng-hero-pull)); }
@media (max-width: 1024px) { .gng-home .elementor .e-con.e-parent.gng-home-hero { --gng-hero-pull: 101px; } }
@media (max-width: 767px) { .gng-home .elementor .e-con.e-parent.gng-home-hero { --gng-hero-pull: 50px; } }
@supports (min-height: 100svh) {
	/* Phones: the visible screen, not the screen plus the collapsing address bar. */
	.gng-home .elementor .e-con.e-parent.gng-home-hero { --min-height: calc(100svh + var(--gng-hero-pull)); }
}

/* ---------- side gutter for the story sections ----------
   Who we are (ab99d23), what we do (99cb4b3), how we work (aaec090) and process (3da8898) are boxed at 1140 px with
   no padding of their own, so between the phone layout and ~1200 px their text ran to the edge of the screen.
   The site gutter keeps a margin at every width; above ~1300 px the boxed width still decides, as before. */
.gng-home .elementor .e-con.elementor-element-ab99d23,
.gng-home .elementor .e-con.elementor-element-99cb4b3,
.gng-home .elementor .e-con.elementor-element-aaec090,
.gng-home .elementor .e-con.elementor-element-3da8898 {
	--padding-left: var(--gng-gutter);
	--padding-right: var(--gng-gutter);
}
.gng-home .gng-home-hero .elementor-heading-title { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25); }

.gng-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}
.gng-home .gng-home-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 34px;
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}
.gng-home .gng-home-hero__button:hover,
.gng-home .gng-home-hero__button:focus-visible { background: #fff; border-color: #fff; color: var(--gng-ink); }
.gng-home .gng-home-hero__button--solid { background: #fff; border-color: #fff; color: var(--gng-ink); }
.gng-home .gng-home-hero__button--solid:hover,
.gng-home .gng-home-hero__button--solid:focus-visible { background: transparent; color: #fff; }

@media (max-width: 767px) {
	.gng-home .gng-home-hero__button { min-height: 48px; padding: 0 22px; font-size: 13px; }
}

/* ---------- who we are ---------- */

.gng-home .gng-home-about .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.gng-home .gng-home-more .elementor-button { display: inline-flex; align-items: center; min-height: 44px; }
.gng-home .gng-home-more .elementor-button:focus-visible { outline: 2px solid var(--gng-focus); outline-offset: 4px; }

.gng-home-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px 32px;
	margin: 12px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--gng-line);
	font-family: var(--gng-font);
}
.gng-home-facts__item { margin: 0; }
.gng-home-facts dt {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gng-home-accent-ink);
}
.gng-home-facts dd {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--gng-ink);
}
.gng-home-facts a {
	display: inline-block;
	margin: -10px 0;
	padding: 10px 0; /* 44px tap target */
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--gng-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.gng-home-facts a:hover { text-decoration-color: currentColor; }
.gng-home-facts a:focus-visible { outline: 2px solid var(--gng-focus); outline-offset: 4px; }
.gng-home-facts .gng-nowrap { white-space: nowrap; }

@media (max-width: 767px) {
	.gng-home-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
}

/* ---------- what we do (olive band) ---------- */

.gng-home .e-con.gng-home-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 28px;
}
.gng-home .e-con.gng-home-services__grid > .elementor-widget { width: auto; max-width: none; margin: 0; }

.gng-home .elementor-widget.gng-home-service {
	position: relative;
	padding: 36px 32px 30px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}
.gng-home .gng-home-service:hover { border-color: var(--gng-accent); }
/* The whole card is the link (the title's <a> is stretched over it); its focus ring goes round the card. */
.gng-home .gng-home-service .elementor-icon-box-title a { color: inherit; }
.gng-home .gng-home-service .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
}
.gng-home .gng-home-service .elementor-icon-box-title a:focus-visible { outline: none; }
.gng-home .gng-home-services { --gng-focus: #ffffff; } /* olive band: white focus rings */
.gng-home .gng-home-service .elementor-icon-box-title a:focus-visible::after { outline: 2px solid var(--gng-focus); outline-offset: 4px; }
.gng-home .gng-home-service .elementor-icon-box-content::after {
	content: "\2192";
	content: "\2192" / "";
	display: block;
	margin-top: 18px;
	font-size: 18px;
	line-height: 1;
	color: var(--gng-accent);
}

@media (max-width: 767px) {
	.gng-home .e-con.gng-home-services__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
	.gng-home .elementor-widget.gng-home-service { padding: 28px 24px 24px; }
}

/* ---------- how we work ---------- */

.gng-home .gng-home-principles .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
	margin-top: 8px;
}
.gng-home .gng-home-principles .elementor-icon-list-items .elementor-icon-list-item {
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--gng-line);
}

.gng-home .gng-home-process__intro { max-width: 62ch; }
.gng-home .e-con.gng-home-process__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 56px;
	margin-top: 28px;
}
.gng-home .e-con.gng-home-process__steps > .e-con { width: auto; }
/* Hairline across the top of each step, with a short tan segment. */
.gng-home .e-con.e-con-full.gng-home-process__step {
	--padding-top: 30px;
	background:
		linear-gradient(var(--gng-accent), var(--gng-accent)) left top / 48px 2px no-repeat,
		linear-gradient(var(--gng-line), var(--gng-line)) left top / 100% 1px no-repeat;
}
.gng-home .gng-home-process__step .elementor-widget-text-editor p { margin: 0; }

@media (max-width: 767px) {
	.gng-home .gng-home-principles .elementor-icon-list-items { grid-template-columns: 1fr; }
	.gng-home .e-con.gng-home-process__steps { grid-template-columns: 1fr; gap: 36px; margin-top: 20px; }
}

/* ---------- motion (only when the visitor hasn't asked for less) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.gng-home .gng-home-hero__button { transition: background-color 0.35s var(--gng-ease), color 0.35s var(--gng-ease), border-color 0.35s var(--gng-ease); }
	.gng-home .elementor-widget.gng-home-service { transition: border-color 0.4s var(--gng-ease); }
	.gng-home .gng-home-service .elementor-icon-box-content::after { transition: transform 0.4s var(--gng-ease); }
	.gng-home .gng-home-service:hover .elementor-icon-box-content::after { transform: translateX(6px); }
}

/* "Our Process" is a sub-heading of "How we work": it reads as the section eyebrows do (tan rule + label). */
.gng-home .elementor .elementor-widget.gng-home-process__title .elementor-heading-title {
	display: flex;
	gap: 14px;
	align-items: center;
	color: var(--gng-home-accent-ink);
}
.gng-home .elementor .elementor-widget.gng-home-process__title .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 32px;
	height: 1px;
	background: var(--gng-accent);
}

/* ===== 12-cta.css ===== */

/* ---------- contact call to action (inc/cta.php) ---------- */

.gng-button--solid { background: var(--gng-ink); color: #fff; }
.gng-button--solid:hover, .gng-button--solid:focus-visible { background: transparent; color: var(--gng-ink); }

.gng-cta {
	padding: clamp(56px, 8vw, 110px) var(--gng-gutter);
	font-family: var(--gng-font);
	text-align: center;
	background: var(--gng-stone);
	color: var(--gng-ink);
}
.gng-cta__inner { max-width: 760px; margin: 0 auto; }
.gng-cta__title {
	margin: 0 0 16px;
	font-family: var(--gng-font);
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 500;
	line-height: 1.15;
	color: inherit;
}
.gng-cta__text {
	margin: 0 auto 32px;
	max-width: 52ch;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--gng-text);
}
.gng-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
}

.gng-cta--dark { background: var(--gng-ink); color: #fff; }
.gng-cta--dark .gng-cta__text { color: rgba(255, 255, 255, 0.78); }
.gng-cta--dark .gng-button { border-color: #fff; color: #fff; }
.gng-cta--dark .gng-button:hover, .gng-cta--dark .gng-button:focus-visible { background: #fff; color: var(--gng-ink); }
.gng-cta--dark .gng-button--solid { background: #fff; color: var(--gng-ink); }
.gng-cta--dark .gng-button--solid:hover, .gng-cta--dark .gng-button--solid:focus-visible { background: transparent; color: #fff; }
.gng-cta--dark .gng-link { color: #fff; border-bottom-color: #fff; }

@media (max-width: 767px) {
	.gng-cta__actions { flex-direction: column; }
	.gng-cta__actions .gng-button { width: 100%; max-width: 340px; text-align: center; }
}

/* ===== 13-floating-actions.css ===== */

/* ---------- floating actions: WhatsApp + back to top (inc/floating-actions.php, assets/gng.js) ---------- */

.gng-fab {
	--gng-fab-size: 56px;
	--gng-fab-top: 48px;
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 990; /* above the page and the sticky header (200); below Elementor popups and the lightbox */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	pointer-events: none; /* only the buttons take clicks, not the gap between them */
}
.gng-fab > * { pointer-events: auto; }

/* ---- WhatsApp ---- */

.gng-fab__chat {
	position: relative;
	display: flex;
	flex-direction: row; /* label first, icon last: the icon stays in the corner and the label slides out to its left */
	align-items: center;
	height: var(--gng-fab-size);
	min-width: var(--gng-fab-size);
	border-radius: 999px;
	background: var(--gng-olive);
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 12px 30px -10px rgba(35, 40, 32, 0.6), inset 0 0 0 1px rgba(209, 167, 128, 0.55);
}
.gng-fab__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--gng-fab-size);
	height: var(--gng-fab-size);
}
.gng-fab__label {
	overflow: hidden;
	max-width: 0;
	padding-left: 0;
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	white-space: nowrap;
	opacity: 0;
}
/* Desktop: the label slides out of the button on hover / keyboard focus. */
@media (hover: hover) and (pointer: fine) {
	.gng-fab__chat:hover .gng-fab__label,
	.gng-fab__chat:focus-visible .gng-fab__label { max-width: 140px; padding-left: 22px; opacity: 1; }
}
/* Hello Elementor's reset colours every hovered link #336 (a:active, a:hover), which turned the label and the icon
   navy on the dark button. White text in every link state (0,3,0 beats the reset's 0,1,1). */
.gng-fab .gng-fab__chat:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; text-decoration: none; }
.gng-fab .gng-fab__chat:hover { background: #2d3329; }
.gng-fab__chat:focus-visible { outline: 2px solid var(--gng-ink); outline-offset: 3px; }

/* The pulse: a tan ring that grows out of the button and fades, every few seconds. */
.gng-fab__chat::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: var(--gng-fab-size);
	height: var(--gng-fab-size);
	border-radius: 50%;
	border: 1.5px solid var(--gng-accent);
	opacity: 0;
	pointer-events: none;
}

/* ---- back to top ---- */

.gng-fab__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--gng-fab-top);
	height: var(--gng-fab-top);
	margin-right: calc((var(--gng-fab-size) - var(--gng-fab-top)) / 2); /* centred over the WhatsApp button */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--gng-ink);
	box-shadow: 0 10px 26px -10px rgba(17, 17, 17, 0.45);
	cursor: pointer;
	/* hidden until the visitor has scrolled past the first screen (gng.js adds .is-visible) */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.6);
}
.gng-fab__top.is-visible { opacity: 1; visibility: visible; transform: none; }
.gng-fab__top:hover { background: var(--gng-ink); color: #ffffff; }
.gng-fab__top:focus-visible { outline: 2px solid var(--gng-focus); outline-offset: 3px; }
.gng-fab__arrow { position: relative; display: block; }

/* Reading progress: a tan ring round the button, filled by gng.js through --gng-progress (0 … 1). */
.gng-fab__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gng-fab__ring circle { fill: none; stroke-width: 2.25; }
.gng-fab__ring-track { stroke: rgba(17, 17, 17, 0.1); }
.gng-fab__ring-fill {
	stroke: var(--gng-accent);
	stroke-linecap: round;
	stroke-dasharray: 141.4; /* 2π × 22.5 */
	stroke-dashoffset: calc(141.4 * (1 - var(--gng-progress, 0)));
	filter: drop-shadow(0 0 1px rgba(209, 167, 128, 0.6));
}
.gng-fab__top:hover .gng-fab__ring-track { stroke: rgba(255, 255, 255, 0.18); }

/* Phones: side by side, back to top on the left, so the pair covers less of the page's height. */
@media (max-width: 767px) {
	.gng-fab { --gng-fab-size: 52px; --gng-fab-top: 44px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		flex-direction: row; align-items: center; gap: 10px; }
	.gng-fab__top { margin-right: 0; }
}

@media print {
	.gng-fab { display: none; }
}

/* ---- motion (none for visitors who asked their device for less) ---- */

@media (prefers-reduced-motion: no-preference) {
	/* Arrival: the pair rises in shortly after the page loads. */
	.gng-fab__chat { animation: gng-fab-in 0.7s var(--gng-ease) 0.6s backwards; } /* not "both": a kept end state would block the hover lift */
	.gng-fab__chat::before { animation: gng-fab-pulse 4.2s ease-out 2s infinite; }
	.gng-fab__chat:hover::before, .gng-fab__chat:focus-visible::before { animation: none; }
	.gng-fab__chat { transition: background-color 0.3s var(--gng-ease), box-shadow 0.3s var(--gng-ease), transform 0.35s var(--gng-ease); }
	.gng-fab__chat:hover { transform: translateY(-2px); }
	.gng-fab__chat:hover { box-shadow: 0 16px 34px -10px rgba(35, 40, 32, 0.7), inset 0 0 0 1px rgba(209, 167, 128, 0.9); }
	.gng-fab__icon svg { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.gng-fab__chat:hover .gng-fab__icon svg { transform: rotate(-10deg) scale(1.08); }
	.gng-fab__label { transition: max-width 0.5s var(--gng-ease), padding 0.5s var(--gng-ease), opacity 0.35s var(--gng-ease); }

	.gng-fab__top {
		transition: opacity 0.45s var(--gng-ease), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.55s,
			background-color 0.3s var(--gng-ease), color 0.3s var(--gng-ease);
	}
	.gng-fab__top.is-visible {
		transition: opacity 0.45s var(--gng-ease), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s,
			background-color 0.3s var(--gng-ease), color 0.3s var(--gng-ease);
	}
	.gng-fab__ring-fill { transition: stroke-dashoffset 0.15s linear; }
	.gng-fab__top:hover .gng-fab__arrow { animation: gng-fab-lift 0.9s var(--gng-ease) infinite; }
	.gng-fab__top.is-launching .gng-fab__arrow { animation: gng-fab-launch 0.6s var(--gng-ease); }
}

@keyframes gng-fab-in {
	from { opacity: 0; transform: translateY(18px) scale(0.85); }
	to { opacity: 1; transform: none; }
}
@keyframes gng-fab-pulse {
	0% { opacity: 0.55; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.55); }
}
@keyframes gng-fab-lift {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}
@keyframes gng-fab-launch {
	0% { transform: translateY(0); opacity: 1; }
	45% { transform: translateY(-16px); opacity: 0; }
	46% { transform: translateY(12px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* ===== 20-project.css ===== */

/* ---------- single project ([gng_project], inc/components.php) ---------- */

.gng-project {
	--gng-muted: #6b6b6b; /* the base #7a7a7a is 4.3:1 on white; small labels here need 4.5:1 */
	color: var(--gng-text);
	font-family: var(--gng-font);
}

/* hero */

.gng-project__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(92vh, 980px);
	padding: 140px var(--gng-gutter) clamp(48px, 7vw, 96px);
	color: #fff;
	overflow: hidden;
	background: var(--gng-ink);
}
.gng-project__hero-media, .gng-project__hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gng-project__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.35) 100%);
}
.gng-project__hero-inner { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; }
.gng-project__back {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 44px;
	margin-bottom: clamp(16px, 5vh, 52px);
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.3s var(--gng-ease);
}
.gng-project__back:hover, .gng-project__back:focus-visible { opacity: 1; }
.gng-project .gng-project__back:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.gng-project__status { color: var(--gng-accent); } /* tan on the dark hero: 9:1 */
.gng-project__title {
	margin: 0;
	font-size: clamp(40px, 7vw, 92px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #fff;
	overflow-wrap: anywhere;
}
.gng-project__lead { margin: 16px 0 0; font-size: clamp(16px, 1.6vw, 20px); color: rgba(255, 255, 255, 0.88); }

/* Entrance: the photo settles from a slight zoom while the title block rises in. CSS only, so it also runs
   without JavaScript; skipped entirely for visitors who ask for reduced motion. */
@keyframes gng-project-hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes gng-project-hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.gng-project__hero-media img { animation: gng-project-hero-settle 2.4s var(--gng-ease) both; }
	.gng-project__hero-inner > * { animation: gng-project-hero-rise 1.1s var(--gng-ease) both; }
	.gng-project__hero-inner > :nth-child(1) { animation-delay: 0.15s; }
	.gng-project__hero-inner > :nth-child(2) { animation-delay: 0.3s; }
	.gng-project__hero-inner > :nth-child(3) { animation-delay: 0.42s; }
	.gng-project__hero-inner > :nth-child(4) { animation-delay: 0.58s; }
}

/* facts: one row of however many facts exist (2–4); the 1px gaps over a line-coloured background draw the
   dividers, so there is never a stray border or an empty cell */

.gng-project__facts {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1px;
	width: min(calc(1280px - 2 * var(--gng-gutter)), calc(100% - 2 * var(--gng-gutter)));
	margin: 0 auto;
	background: var(--gng-line);
	border-bottom: 1px solid var(--gng-line);
}
.gng-project__fact { margin: 0; padding: 32px 24px; background: #fff; }
.gng-project__fact:first-child { padding-left: 0; }
.gng-project__fact dt {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gng-muted);
}
.gng-project__fact dd { margin: 0; font-size: 18px; font-weight: 500; color: var(--gng-ink); }

/* story */

.gng-project__story {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(40px, 7vw, 120px);
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(64px, 10vw, 140px) var(--gng-gutter);
}
.gng-project__story--single { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.gng-project__description p {
	margin: 0 0 1.2em;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.8;
	color: var(--gng-text);
}
.gng-project__description .gng-project__tagline { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.5; color: var(--gng-ink); }
.gng-project__highlights ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--gng-line); }
.gng-project__highlights li {
	position: relative;
	padding: 16px 0 16px 28px;
	border-bottom: 1px solid var(--gng-line);
	font-size: 15px;
	line-height: 1.5;
	color: var(--gng-ink);
}
.gng-project__highlights li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 24px;
	width: 14px;
	height: 1px;
	background: var(--gng-accent);
}

/* gallery: complete rows on a 12-column grid (the row pattern is chosen in PHP from the number and shape of the
   images: gng-row-<images in the row>, gng-pos-<place in the row>, gng-span-<columns>) */

.gng-project__gallery {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 20px);
	padding: 0 clamp(10px, 1.4vw, 20px);
}
.gng-project__shot { position: relative; margin: 0; overflow: hidden; background: var(--gng-stone); }
.gng-project__shot a { display: block; height: 100%; cursor: zoom-in; }
.gng-project__shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--gng-ease); }
.gng-project__gallery .gng-span-12 { grid-column: span 12; }
.gng-project__gallery .gng-span-7 { grid-column: span 7; }
.gng-project__gallery .gng-span-6 { grid-column: span 6; }
.gng-project__gallery .gng-span-5 { grid-column: span 5; }
.gng-project__gallery .gng-span-4 { grid-column: span 4; }
.gng-project__gallery .gng-row-1 { height: min(56vw, 88vh, 880px); }
.gng-project__gallery .gng-row-2 { height: min(44vw, 72vh, 700px); }
.gng-project__gallery .gng-row-3 { height: min(32vw, 54vh, 480px); }
.gng-project__gallery .gng-row-1.gng-shot--portrait img { object-position: center 35%; }
.gng-project__shot a:focus-visible { outline: 3px solid var(--gng-ink); outline-offset: -3px; }
.gng-project__shot a:focus-visible img { opacity: 0.85; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gng-project__shot:hover img { transform: scale(1.04); }
}

/* contact block between the gallery and the next project (inc/cta.php) */

.gng-project .gng-cta { margin-top: clamp(48px, 6vw, 88px); }

/* previous / next */

.gng-project__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(10px, 1.4vw, 20px);
	padding: clamp(10px, 1.4vw, 20px) clamp(10px, 1.4vw, 20px) clamp(64px, 8vw, 110px);
}
.gng-project__nav-item {
	position: relative;
	display: block;
	height: clamp(220px, 32vw, 420px);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--gng-ink);
}
.gng-project__nav-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
	transition: opacity 0.6s var(--gng-ease), transform 1.4s var(--gng-ease);
}
/* A scrim under the words keeps them readable on light photos (a pale sky, a white facade). */
.gng-project__nav-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0.05) 72%);
	pointer-events: none;
}
.gng-project__nav-item:hover img, .gng-project__nav-item:focus-visible img { opacity: 0.7; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gng-project__nav-item:hover img { transform: scale(1.04); }
}
.gng-project__nav-text { position: absolute; z-index: 1; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 40px); }
.gng-project__nav-item--next .gng-project__nav-text { text-align: right; }
.gng-project__nav-label {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}
.gng-project__nav-title { display: block; font-size: clamp(22px, 2.6vw, 36px); font-weight: 500; line-height: 1.15; }
.gng-project .gng-project__nav-item:focus-visible { outline: 3px solid var(--gng-ink); outline-offset: 3px; }


/* tablet: facts two per row (a lone last fact spans the row) */

@media (max-width: 1024px) {
	.gng-project__facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gng-project__fact:nth-child(odd) { padding-left: 0; }
	.gng-project__fact:nth-child(even) { padding-left: 24px; }
	.gng-project__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* phones: two columns; singles and the first of three run full width, the rest sit two-up, so the gallery keeps a
   rhythm (wide, tall pairs, wide + squares) instead of a stack of identical blocks */

@media (max-width: 767px) {
	.gng-project__hero { padding-top: 120px; }
	.gng-project__fact { padding: 22px 16px 22px 0; }
	.gng-project__fact:nth-child(even) { padding-left: 16px; }
	.gng-project__fact dd { font-size: 16px; }
	.gng-project__story { grid-template-columns: 1fr; }

	.gng-project__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 8px; }
	.gng-project__gallery > .gng-project__shot { grid-column: span 1; height: auto; aspect-ratio: 4 / 5; }
	.gng-project__gallery > .gng-row-1 { grid-column: span 2; aspect-ratio: 3 / 2; }
	.gng-project__gallery > .gng-row-1.gng-shot--portrait { aspect-ratio: 4 / 5; }
	.gng-project__gallery > .gng-row-3 { aspect-ratio: 1 / 1; }
	.gng-project__gallery > .gng-row-3.gng-pos-1 { grid-column: span 2; aspect-ratio: 16 / 10; }

	.gng-project__nav { grid-template-columns: 1fr; padding: 8px 8px 64px; gap: 8px; }
	.gng-project__nav-item--next .gng-project__nav-text { text-align: left; }
}

/* Enquiry prompt closing the story (gng_project_enquire): replaces the dark full-width CTA band that sat right
   above the footer's own contact band. */
.gng-project__enquire {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--gng-line);
}
.gng-project__enquire-title {
	margin: 0 0 18px;
	font-size: clamp(19px, 1.6vw, 22px);
	font-weight: 500;
	line-height: 1.35;
	color: var(--gng-ink);
}
.gng-project__enquire-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
}
.gng-project__enquire-actions .gng-button { min-height: 48px; display: inline-flex; align-items: center; padding: 0 30px; }
.gng-project__enquire-actions .gng-link { min-height: 44px; }
.gng-project__highlights .gng-project__enquire { border-top: 0; padding-top: 0; } /* the list above already ends with a rule */

/* ===== 30-accomplishments.css ===== */

/* ---------- accomplishments ([gng_accomplishments], inc/components.php) ---------- */

.gng-accomplishments {
	--gng-accent-ink: #8a6848; /* tan darkened for small text on white (5:1) */
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 110px) var(--gng-gutter);
	font-family: var(--gng-font);
}
.gng-accomplishments .gng-eyebrow { color: var(--gng-accent-ink); }
.gng-accomplishments__title { margin: 0 0 40px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; text-transform: uppercase; color: var(--gng-ink); }
.gng-accomplishments__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.gng-accomplishment { display: block; color: var(--gng-ink); text-decoration: none; }
.gng-accomplishment__media { display: block; overflow: hidden; margin-bottom: 18px; aspect-ratio: 4 / 3; background: var(--gng-stone); }
.gng-accomplishment__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--gng-ease); }
.gng-accomplishment__body { display: grid; gap: 6px; }
.gng-accomplishment__body .gng-eyebrow { margin: 0; }
.gng-accomplishment__name { font-size: 22px; font-weight: 500; }
.gng-accomplishment__price { font-size: 16px; font-weight: 600; color: var(--gng-olive); }
.gng-accomplishment__note { font-size: 14px; color: var(--gng-text); }
.gng-accomplishment:hover .gng-accomplishment__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.gng-accomplishment:focus-visible { outline: 2px solid var(--gng-ink); outline-offset: 6px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gng-accomplishment:hover .gng-accomplishment__media img { transform: scale(1.04); }
}

/* ===== 40-cards.css ===== */

/* ---------- project cards (loop item 2329; classes set by changes/015) ---------- */

/* [gng_project_meta]: location · type. #4a4a4a is 8.9:1 on white (the old #7a7a7a, 4.3:1, was under AA at 12px). */
.gng-card-meta {
	margin: 6px 0 0;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gng-text);
}

/* The card is one link: the title's link is stretched over the whole card, image included (one tab stop). */
.e-con.gng-card {
	position: relative;
	--gap: 0px;
	--row-gap: 0px;
}
.gng-card > .e-con-inner,
.gng-card .gng-card__title,
.gng-card .gng-card__title > .elementor-widget-container,
.gng-card .gng-card__title .elementor-heading-title { position: static; }
.gng-card .gng-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 4px;
}

.gng-card .gng-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: var(--gng-stone);
}
.gng-card .gng-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.gng-card .gng-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(17, 17, 17, 0.3), rgba(17, 17, 17, 0) 60%);
	opacity: 0;
	transition: opacity 0.5s var(--gng-ease);
	pointer-events: none;
}

.gng-card .gng-card__title { padding-top: 20px; } /* margins on widgets inside containers are zeroed by Elementor */
.gng-card .gng-card__title .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	padding-bottom: 3px;
}
.gng-card .gng-card__title .elementor-heading-title::after {
	content: "\2192";
	content: "\2192" / ""; /* decorative: not read out as part of the project name */
	display: inline-block;
	margin-left: 10px;
	opacity: 0;
}

/* Hover only on devices that hover (a tap must not leave it stuck); the same look on keyboard focus. */
@media (hover: hover) {
	.gng-card:hover .gng-card__media::after { opacity: 1; }
	.gng-card:hover .gng-card__title .elementor-heading-title a { background-size: 100% 1px; }
	.gng-card:hover .gng-card__title .elementor-heading-title::after { opacity: 1; }
}
.gng-card:focus-within .gng-card__media::after { opacity: 1; }
.gng-card:focus-within .gng-card__title .elementor-heading-title a { background-size: 100% 1px; }
.gng-card:focus-within .gng-card__title .elementor-heading-title::after { opacity: 1; }

/* Focus ring around the whole card (ink: 3:1+ against white, unlike the tan accent). */
.gng-card .gng-card__title a:focus-visible { outline: none; }
.gng-card .gng-card__title a:focus-visible::after { outline: 2px solid var(--gng-ink); outline-offset: 6px; }

@media (prefers-reduced-motion: no-preference) {
	.gng-card .gng-card__media img { transition: transform 1.2s var(--gng-ease); }
	.gng-card .gng-card__title .elementor-heading-title a { transition: background-size 0.5s var(--gng-ease); }
	.gng-card .gng-card__title .elementor-heading-title::after {
		transform: translateX(-6px);
		transition: opacity 0.4s var(--gng-ease), transform 0.4s var(--gng-ease);
	}
	.gng-card:focus-within .gng-card__media img { transform: scale(1.05); }
	.gng-card:focus-within .gng-card__title .elementor-heading-title::after { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.gng-card:hover .gng-card__media img { transform: scale(1.05); }
	.gng-card:hover .gng-card__title .elementor-heading-title::after { transform: none; }
}

/* ===== 41-projects.css ===== */

/* ---------- Projects page (2346): intro, section links, sections — changes/015 ---------- */

.gng-projects-intro .gng-projects-intro__text p {
	max-width: 62ch;
	margin: 0 auto;
}

/* [gng_projects_nav] */
.gng-projects-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.gng-projects-nav__link {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	padding: 8px 22px;
	border: 1px solid var(--gng-ink);
	border-radius: 999px;
	font-family: var(--gng-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gng-ink);
	text-decoration: none;
	transition: background-color 0.35s var(--gng-ease), color 0.35s var(--gng-ease);
}
.gng-projects-nav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--gng-stone);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--gng-olive);
	transition: background-color 0.35s var(--gng-ease), color 0.35s var(--gng-ease);
}
.gng-projects-nav__link:hover,
.gng-projects-nav__link:focus-visible { background: var(--gng-ink); color: #fff; }
.gng-projects-nav__link:hover .gng-projects-nav__count,
.gng-projects-nav__link:focus-visible .gng-projects-nav__count { background: rgba(255, 255, 255, 0.18); color: #fff; }
.gng-projects-nav__link:focus-visible { outline: 2px solid var(--gng-ink); outline-offset: 3px; }

.gng-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Sections: reached from the links, the heading lands below the sticky header. */
.gng-projects-section { scroll-margin-top: 110px; }
.gng-projects-heading .elementor-heading-title {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gng-line);
}

@media (max-width: 767px) {
	.gng-projects-nav__list { gap: 10px; }
	.gng-projects-nav__link { padding: 8px 16px; letter-spacing: 0.08em; }
	.gng-projects-section { scroll-margin-top: 90px; }
}

/* ===== 50-footer.css ===== */

/* ---------- site footer: Elementor template 1254 (structure written by changes/013-footer.php) ----------
   A white closing band ends every page: title, intro, WhatsApp / call / email and the lead form (form c2ce66d).
   Under it an olive base: logo, address, contact, social, the footer menu (7246e0e) and the copyright.
   Contact Us (page 766) has its own form, so the band is hidden there.
   Tan (#d1a780) is used only on the olive base (labels, hovers, focus): 5.0:1 there, 2.0:1 on white. */

.elementor-location-footer .gng-foot {
	--gng-foot-max: 1340px;
	--gng-foot-soft: rgba(255, 255, 255, 0.78); /* 7.1:1 on olive */
	font-family: var(--gng-font);
}
/* The footer's inner containers are laid out here, not by Elementor's default 10px padding / 20px gaps. */
.elementor-location-footer .gng-foot .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	gap: 0;
}
.elementor-location-footer .gng-foot .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ---------- closing band ---------- */

.elementor-location-footer .gng-foot-close {
	--padding-top: clamp(72px, 9vw, 136px);
	--padding-bottom: clamp(72px, 9vw, 136px);
	--padding-left: var(--gng-gutter);
	--padding-right: var(--gng-gutter);
	background: #fff;
	border-top: 1px solid var(--gng-line);
	color: var(--gng-ink);
}
.gng-page-contact-us .elementor-location-footer .gng-foot-close { display: none; }

.elementor-location-footer .gng-foot .gng-foot-close__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px clamp(56px, 7vw, 128px);
	align-items: end;
	width: 100%;
	max-width: var(--gng-foot-max);
	margin-inline: auto;
}

.elementor-location-footer .gng-foot-eyebrow .elementor-heading-title {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0 0 22px;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gng-olive);
}
.elementor-location-footer .gng-foot-eyebrow .elementor-heading-title::before {
	content: "";
	width: 36px;
	height: 1px;
	background: currentColor;
}
.elementor-location-footer .gng-foot-title .elementor-heading-title {
	margin: 0 0 24px;
	font-family: var(--gng-font);
	font-size: clamp(34px, 3.9vw, 56px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: var(--gng-ink);
	text-wrap: balance;
}
.elementor-location-footer .gng-foot-intro p {
	max-width: 46ch;
	margin: 0 0 36px;
	font-family: var(--gng-font);
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.75;
	color: var(--gng-text);
}

.elementor-location-footer .gng-foot-direct { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.elementor-location-footer .gng-foot-direct .gng-button { padding: 16px 32px; text-align: center; }
.elementor-location-footer .gng-foot-direct__mail {
	margin: 22px 0 0;
	font-family: var(--gng-font);
	font-size: 14px;
	line-height: 1.6;
	color: var(--gng-text);
}
.elementor-location-footer .gng-foot-direct__mail a,
.elementor-location-footer .gng-foot-direct__mail a:hover {
	color: var(--gng-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.elementor-location-footer .gng-foot-close :is(a, button, input):focus-visible {
	outline: 2px solid var(--gng-olive);
	outline-offset: 4px;
}

/* ---------- the lead form (c2ce66d) ----------
   Field fill (stone) and button colours (ink, white on hover) are the form's own Elementor settings, written by 013:
   Elementor emits defaults for them into post-1254.css at a specificity this file cannot beat. */

.elementor-location-footer .gng-foot-form .elementor-field-group > .elementor-field-label {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gng-text);
}
.elementor-location-footer .gng-foot-form .elementor-mark-required .elementor-field-label::after { color: inherit; }
.elementor-location-footer .gng-foot-form .elementor-field-group .elementor-field-textual {
	min-height: 52px;
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--gng-ink);
	border-radius: 0;
	font-family: var(--gng-font);
	font-size: 16px; /* 16px keeps iOS from zooming into the field */
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	color: var(--gng-ink);
	box-shadow: none;
}
.elementor-location-footer .gng-foot-form .elementor-field-group .elementor-field-textual::placeholder { color: #6b6b6b; opacity: 1; }
.elementor-location-footer .gng-foot-form .elementor-field-group .elementor-field-textual:focus {
	outline: 2px solid var(--gng-olive);
	outline-offset: 2px;
}
.elementor-location-footer .gng-foot-form .elementor-button[type="submit"] {
	min-height: 52px;
	padding: 16px 44px;
	border: 1px solid var(--gng-ink);
	border-radius: 999px;
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: none;
}
.elementor-location-footer .gng-foot-form .elementor-message {
	margin-top: 18px;
	font-family: var(--gng-font);
	font-size: 14px;
	line-height: 1.6;
}
.elementor-location-footer .gng-foot-form .elementor-message.elementor-message-success { color: var(--gng-olive); }
.elementor-location-footer .gng-foot-form .elementor-message.elementor-message-danger,
.elementor-location-footer .gng-foot-form .elementor-message.elementor-help-inline { color: #a4262c; } /* 6.9:1 on white */

/* ---------- olive base ---------- */

.elementor-location-footer .gng-foot-base {
	--padding-top: clamp(64px, 7vw, 104px);
	--padding-bottom: 28px;
	--padding-left: var(--gng-gutter);
	--padding-right: var(--gng-gutter);
	background: var(--gng-olive);
	color: var(--gng-foot-soft);
}
.elementor-location-footer .gng-foot .gng-foot-base__inner { width: 100%; max-width: var(--gng-foot-max); margin-inline: auto; }
.elementor-location-footer .gng-foot .gng-foot-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 48px clamp(32px, 4vw, 72px);
	padding-bottom: clamp(48px, 6vw, 88px);
}

/* The logo PNG has wide transparent margins: show just the mark (222×309 of 726×557, at 43%). */
.elementor-location-footer .gng-foot-logo a {
	position: relative;
	display: block;
	width: 96px;
	height: 134px;
	overflow: hidden;
}
.elementor-location-footer .gng-foot-logo img {
	position: absolute;
	top: -43px;
	left: -114px;
	width: 314px;
	max-width: none;
	height: auto;
}
.elementor-location-footer .gng-foot-tagline p {
	max-width: 32ch;
	margin: 28px 0 0;
	font-family: var(--gng-font);
	font-size: 14px;
	line-height: 1.75;
	color: var(--gng-foot-soft);
}

.elementor-location-footer .gng-foot-label {
	margin: 0 0 18px;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gng-accent);
}
.elementor-location-footer .gng-foot-address {
	margin: 0;
	font-family: var(--gng-font);
	font-size: 15px;
	font-style: normal;
	line-height: 1.8;
	color: #fff;
}
.elementor-location-footer .gng-foot-list { display: grid; margin: 0; padding: 0; list-style: none; }
.elementor-location-footer .gng-foot-list a {
	display: inline-flex;
	align-items: center;
	font-family: var(--gng-font);
	font-size: 15px;
	line-height: 1.8; /* same rhythm as the address beside it */
	color: #fff;
	text-decoration: none;
}
.elementor-location-footer .gng-foot-base a:hover,
.elementor-location-footer .gng-foot-base a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--gng-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.elementor-location-footer .gng-foot-base :is(a, button):focus-visible {
	outline: 2px solid var(--gng-accent);
	outline-offset: 4px;
}

/* Social icons (c68cc9d): 44px outlined circles, filled tan on hover. Alignment and spacing are the widget's own
   settings (013), so Elementor's Safari/iOS layout rules agree with this one. */
.elementor-location-footer .gng-foot-social .elementor-social-icons-wrapper.elementor-grid {
	display: flex; /* Safari/iOS keeps Elementor's inline-block + word-spacing layout: same 12px result */
	flex-wrap: wrap;
	column-gap: 12px;
	justify-content: flex-start;
}
.elementor-location-footer .gng-foot-social .elementor-social-icon {
	--e-social-icon-icon-color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	opacity: 1;
}
.elementor-location-footer .gng-foot-social .elementor-social-icon:hover,
.elementor-location-footer .gng-foot-social .elementor-social-icon:focus-visible {
	--e-social-icon-icon-color: var(--gng-olive);
	background: var(--gng-accent);
	border-color: var(--gng-accent);
	text-decoration: none;
}

/* Bottom bar: the footer menu (one line from 768px up) and the copyright. */
.elementor-location-footer .gng-foot .gng-foot-bar {
	--container-widget-width: auto;
	--container-widget-flex-grow: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 40px;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.elementor-location-footer .gng-foot .gng-foot-bar > .elementor-widget { width: auto; max-width: 100%; }
.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main .elementor-item {
	padding: 12px 14px;
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--gng-foot-soft);
}
.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main > .elementor-nav-menu > li:first-child > .elementor-item { padding-left: 0; }
.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main .elementor-item:focus-visible,
.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--gng-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.elementor-location-footer .gng-foot-copy p {
	margin: 0;
	font-family: var(--gng-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--gng-foot-soft);
}

@media (min-width: 768px) {
	/* With Montserrat loaded, "Company Profile" used to wrap onto a second line at 1440px. */
	.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }
}

@media (max-width: 1024px) {
	.elementor-location-footer .gng-foot .gng-foot-close__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.elementor-location-footer .gng-foot .gng-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor-location-footer .gng-foot-list a { min-height: 44px; }
}

@media (max-width: 767px) {
	.elementor-location-footer .gng-foot-direct { flex-direction: column; }
	.elementor-location-footer .gng-foot-direct .gng-button { width: 100%; }
	.elementor-location-footer .gng-foot-direct__mail a { display: inline-block; padding-block: 12px; }
	.elementor-location-footer .gng-foot .gng-foot-cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.elementor-location-footer .gng-foot .gng-foot-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
	.elementor-location-footer .gng-foot .gng-foot-bar > .elementor-widget { width: 100%; }
	.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main > .elementor-nav-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}
	.elementor-location-footer .gng-foot-menu .elementor-nav-menu--main .elementor-item { min-height: 44px; padding: 12px 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-location-footer .gng-foot-form .elementor-button[type="submit"],
	.elementor-location-footer .gng-foot-social .elementor-social-icon {
		transition: background-color 0.35s var(--gng-ease), color 0.35s var(--gng-ease), border-color 0.35s var(--gng-ease);
	}
}

/* ===== 51-contact.css ===== */

/* ---------- Contact Us page (766, change 011) ----------
   Elementor section .gng-contact holds: intro .gng-contact__intro (H2, text, [gng_contact_options]), form panel
   .gng-contact__panel (H2, text, form .gng-contact-form, note .gng-contact__next) and map .gng-contact__map.
   Colours, sizes and the button's colours are Elementor settings; this file adds the layout, the contact list and
   what Elementor has no control for (underline fields, focus, autofill, messages).
   Contrast on the olive panel (#373e32): white 11:1, 80% white 7:1, tan #d1a780 5:1, error #f4c3ba 7:1. */

.gng-contact {
	--gng-contact-soft: rgba(255, 255, 255, 0.8);
	--gng-contact-line: rgba(255, 255, 255, 0.55);
	--gng-contact-error: #f4c3ba;
}

/* Desktop: intro and options over the map on the left, the form panel on the right. Tablet and phone keep
   Elementor's stacked order: intro, form, map. */
@media (min-width: 1025px) {
	.gng-contact.e-con > .e-con-inner {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "intro panel" "map panel";
		column-gap: clamp(56px, 6vw, 112px);
		row-gap: 56px;
	}
	.gng-contact .gng-contact__intro { grid-area: intro; width: auto; }
	.gng-contact .gng-contact__panel { grid-area: panel; width: auto; align-self: stretch; }
	.gng-contact .gng-contact__map { grid-area: map; width: auto; align-self: end; }
}

.gng-contact__lede p:last-child,
.gng-contact__panel-lede p:last-child { margin-bottom: 0; }

/* ---------- direct contact options ([gng_contact_options], inc/contact.php) ---------- */

.gng-contact-options {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--gng-line);
	font-family: var(--gng-font);
}
.gng-contact-options__item {
	margin: 0;
	border-bottom: 1px solid var(--gng-line);
}
.gng-contact-options__link {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) 18px;
	gap: 16px;
	align-items: center;
	min-height: 64px;
	padding: 14px 6px 14px 0;
	color: var(--gng-ink);
	text-decoration: none;
}
.gng-contact-options__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gng-olive);
}
.gng-contact-options__value {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--gng-ink);
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
.gng-contact-options__arrow { display: block; color: var(--gng-olive); }
.gng-contact-options__link:hover .gng-contact-options__value,
.gng-contact-options__link:focus-visible .gng-contact-options__value { text-decoration-color: var(--gng-accent); }
.gng-contact-options__link:focus-visible {
	outline: 2px solid var(--gng-olive);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.gng-contact-options__value { transition: text-decoration-color 0.3s var(--gng-ease); }
	.gng-contact-options__arrow { transition: transform 0.4s var(--gng-ease); }
	.gng-contact-options__link:hover .gng-contact-options__arrow,
	.gng-contact-options__link:focus-visible .gng-contact-options__arrow { transform: translateX(4px); }
	.gng-contact-options__item--visit .gng-contact-options__link:hover .gng-contact-options__arrow,
	.gng-contact-options__item--visit .gng-contact-options__link:focus-visible .gng-contact-options__arrow { transform: translate(3px, -3px); }
}

@media (max-width: 767px) {
	.gng-contact-options__link {
		grid-template-columns: 6.25rem minmax(0, 1fr) 18px;
		gap: 10px;
		min-height: 60px;
	}
	.gng-contact-options__value { font-size: 16px; }
}

/* ---------- form (Elementor form 5c2bffd, CSS class gng-contact-form) ---------- */

/* Fields in a row stay top-aligned when one of them shows an error message. */
.gng-contact .gng-contact-form .elementor-form-fields-wrapper { align-items: flex-start; }

.gng-contact .gng-contact-form .elementor-field-group > .elementor-field-label {
	padding-bottom: 2px;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gng-contact-soft);
}
.gng-contact .gng-contact-form .elementor-mark-required .elementor-field-label::after { color: var(--gng-accent); }

.gng-contact .gng-contact-form .elementor-field-group .elementor-field-textual {
	min-height: 48px;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--gng-contact-line);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: #fff;
	font-family: var(--gng-font);
	font-size: 16px; /* 16px: no zoom-on-focus on iPhone */
	line-height: 1.5;
}
.gng-contact .gng-contact-form .elementor-field-group textarea.elementor-field-textual {
	min-height: 132px;
	resize: vertical;
}
.gng-contact .gng-contact-form .elementor-field-textual::placeholder { color: rgba(255, 255, 255, 0.62); opacity: 1; }

/* Focus: the underline turns tan and doubles, the label turns tan. */
.gng-contact .gng-contact-form .elementor-field-group .elementor-field-textual:focus {
	outline: none;
	border-bottom-color: var(--gng-accent);
	box-shadow: 0 1px 0 0 var(--gng-accent);
}
.gng-contact .gng-contact-form .elementor-field-group:focus-within > .elementor-field-label { color: var(--gng-accent); }

/* Browser autofill would paint the fields pale yellow/blue with dark text on the olive panel. */
.gng-contact .gng-contact-form .elementor-field-textual:-webkit-autofill,
.gng-contact .gng-contact-form .elementor-field-textual:-webkit-autofill:hover {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	-webkit-box-shadow: inset 0 0 0 100px var(--gng-olive);
	box-shadow: inset 0 0 0 100px var(--gng-olive);
}
.gng-contact .gng-contact-form .elementor-field-textual:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: inset 0 0 0 100px var(--gng-olive), 0 1px 0 0 var(--gng-accent);
	box-shadow: inset 0 0 0 100px var(--gng-olive), 0 1px 0 0 var(--gng-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.gng-contact .gng-contact-form .elementor-field-group .elementor-field-textual { transition: border-color 0.3s var(--gng-ease), box-shadow 0.3s var(--gng-ease); }
	.gng-contact .gng-contact-form .elementor-field-group > .elementor-field-label { transition: color 0.3s var(--gng-ease); }
}

/* Button: colours and pill radius are Elementor settings (tan, ink text; white on hover). */
.gng-contact .gng-contact-form .elementor-field-type-submit { margin-top: 8px; }
.gng-contact .gng-contact__panel .gng-contact-form .elementor-button[type="submit"] {
	min-height: 56px;
	padding: 0 32px 0 36px;
	border: 1px solid var(--gng-accent);
	font-family: var(--gng-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
}
.gng-contact .gng-contact__panel .gng-contact-form .elementor-button[type="submit"]:hover { border-color: #fff; }
.gng-contact .gng-contact__panel .gng-contact-form .elementor-button[type="submit"]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-color: #fff;
	background-color: #fff;
}
.gng-contact .gng-contact-form .elementor-button-content-wrapper { align-items: center; }
.gng-contact .gng-contact-form .elementor-button-content-wrapper::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-inline-start: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%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='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
	.gng-contact .gng-contact-form .elementor-button-content-wrapper::after { transition: transform 0.4s var(--gng-ease); }
	.gng-contact .gng-contact-form .elementor-button[type="submit"]:hover .elementor-button-content-wrapper::after,
	.gng-contact .gng-contact-form .elementor-button[type="submit"]:focus-visible .elementor-button-content-wrapper::after { transform: translateX(4px); }
}

/* Messages: success as a quiet tan-ruled note, errors in a light rose that stays legible on olive. */
.gng-contact .gng-contact-form .elementor-message {
	font-family: var(--gng-font);
	font-size: 14px;
	line-height: 1.6;
}
.gng-contact .gng-contact-form .elementor-message.elementor-message-danger { color: var(--gng-contact-error); }
/* Its ::before icon comes from Elementor's icon font, which this page does not load (it showed a missing glyph). */
.gng-contact .gng-contact-form .elementor-message.elementor-message-danger::before { display: none; }
.gng-contact .gng-contact-form .elementor-error .elementor-field-textual { border-bottom-color: var(--gng-contact-error); }
.gng-contact .gng-contact-form .elementor-message.elementor-message-success {
	margin: 24px 0 0;
	padding: 16px 20px;
	border-left: 2px solid var(--gng-accent);
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	font-size: 15px;
}
.gng-contact .gng-contact-form .elementor-message.elementor-message-success::before { display: none; }

/* ---------- next steps note under the form ---------- */

.gng-contact__next p {
	margin: 0;
	font-family: var(--gng-font);
	font-size: 13px;
	line-height: 1.7;
	color: var(--gng-contact-soft);
}
.gng-contact__next-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gng-accent);
}

/* ---------- map ---------- */

.gng-contact__map iframe { display: block; width: 100%; }

/* ===== 52-careers.css ===== */

/* ---------- Careers page (2685, built by changes/014-careers.php) ----------
   Hero on the page's original sand colour, an olive "why join us" band the hero photo overlaps, then one card per
   role. Elementor containers carry the classes; layout and type live here so the page matches the child theme's
   components. Every text colour below meets WCAG AA on its background. */

.gng-careers-hero,
.gng-careers-why,
.gng-careers-roles {
	--gng-careers-sand: #eee7e1;
	--gng-careers-overlap: clamp(48px, 8vw, 128px);
	--gng-careers-inline: max(var(--gng-gutter), calc((100% - 1280px) / 2));
}

/* Elementor gives every container 10px padding and its own gap; these sections set their own. */
.gng-careers-hero .e-con,
.gng-careers-why .e-con,
.gng-careers-roles .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}
.gng-careers-hero .elementor-heading-title,
.gng-careers-why .elementor-heading-title,
.gng-careers-roles .elementor-heading-title {
	font-family: var(--gng-font);
}
.gng-careers-hero p:last-child,
.gng-careers-why p:last-child,
.gng-careers-roles p:last-child { margin-bottom: 0; }

/* Eyebrow: small caps line with a short tan rule. Olive on light backgrounds, tan on the olive band. */
.gng-careers-eyebrow .elementor-heading-title {
	display: inline-flex;
	gap: 14px;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gng-olive);
}
.gng-careers-eyebrow .elementor-heading-title::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--gng-accent);
}

/* ---------- hero ---------- */

/* Header 1200 is drawn over the page: its row has margin-bottom -180px (desktop, tablet) or -140px (phone), so the
   page starts that far up behind it. The hero's top padding is that overlap plus a gap, so the photo and the
   eyebrow always start below the header (a fixed 150px put them under it between 768 and 1280px). */
.gng-careers-hero { --gng-careers-header-overlap: 180px; }

.e-con.gng-careers-hero {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
	padding: calc(var(--gng-careers-header-overlap) + clamp(24px, 3vw, 48px)) var(--gng-careers-inline) clamp(56px, 6vw, 88px);
	background: var(--gng-careers-sand);
}

.e-con.gng-careers-hero__text { gap: 0; }
.gng-careers-hero__title .elementor-heading-title {
	margin: 22px 0 28px;
	font-size: clamp(52px, 7.5vw, 112px);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gng-olive);
}
.elementor-widget.gng-careers-hero__lead {
	max-width: 36ch;
	font-family: var(--gng-font);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.6;
	color: var(--gng-text);
}
.gng-careers-hero__cta { margin-top: clamp(28px, 3vw, 40px); }

.e-con.gng-careers-hero__media {
	position: relative;
	z-index: 2;
	margin-bottom: calc(-1 * var(--gng-careers-overlap) - clamp(56px, 6vw, 88px));
}
.gng-careers-hero__image,
.gng-careers-hero__image .elementor-widget-container { width: 100%; overflow: hidden; border-radius: 4px; }
.gng-careers-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 45%;
}

/* ---------- why join us ---------- */

.e-con.gng-careers-why {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 0 clamp(32px, 6vw, 96px);
	padding: clamp(56px, 7vw, 104px) var(--gng-careers-inline) clamp(64px, 8vw, 120px);
	background: var(--gng-olive);
	color: #fff;
}
.e-con.gng-careers-why__head { grid-column: 1; gap: 18px; min-height: var(--gng-careers-overlap); }
.gng-careers-why .gng-careers-eyebrow .elementor-heading-title { color: var(--gng-accent); }
.gng-careers-why__title .elementor-heading-title {
	font-size: clamp(32px, 3.6vw, 52px);
	font-weight: 400;
	line-height: 1.1;
	color: #fff;
}

.e-con.gng-careers-why__points {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px clamp(28px, 4vw, 64px);
	margin-top: clamp(40px, 4vw, 56px);
}
.e-con.gng-careers-point {
	gap: 14px;
	padding-top: 28px;
	border-top: 1px solid rgba(209, 167, 128, 0.55);
}
.gng-careers-point__num .elementor-heading-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	color: var(--gng-accent);
}
.gng-careers-point__title .elementor-heading-title {
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}
.elementor-widget.gng-careers-point__text {
	font-family: var(--gng-font);
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.82);
}

/* ---------- open positions ---------- */

.e-con.gng-careers-roles {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 40px clamp(32px, 5vw, 80px);
	padding: clamp(72px, 9vw, 136px) var(--gng-careers-inline);
	background: var(--gng-paper);
	scroll-margin-top: 16px;
}
.e-con.gng-careers-roles__head { gap: 18px; align-self: start; position: sticky; top: 120px; }
.gng-careers-roles__title .elementor-heading-title {
	font-size: clamp(32px, 3.6vw, 52px);
	font-weight: 400;
	line-height: 1.1;
	color: var(--gng-ink);
}
.elementor-widget.gng-careers-roles__intro {
	max-width: 32ch;
	font-family: var(--gng-font);
	font-size: 15px;
	line-height: 1.75;
	color: var(--gng-text);
}
.e-con.gng-careers-roles__list { gap: 16px; }

/* One role card. The card is also a .gng-reveal element, so its transition list keeps the reveal's. */
.e-con.gng-role {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "main apply" "summary summary" "details details";
	gap: 22px 32px;
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--gng-line);
	border-radius: 4px;
	background: var(--gng-paper);
	transition: opacity 0.9s var(--gng-ease) var(--gng-delay, 0s), transform 0.9s var(--gng-ease) var(--gng-delay, 0s), border-color 0.4s ease;
}
.e-con.gng-role:hover, .e-con.gng-role:focus-within { border-color: var(--gng-accent); }
/* A role without a description (Pool Cleaner): no empty row, so no double gap above the details. */
.e-con.gng-role:not(:has(> .gng-role__summary)) { grid-template-areas: "main apply" "details details"; }

.e-con.gng-role__main { grid-area: main; gap: 10px; }
.gng-role__apply { grid-area: apply; align-self: start; }
.gng-role__summary { grid-area: summary; }
.gng-role__details { grid-area: details; }

.gng-role__family .elementor-heading-title {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gng-olive);
}
.gng-role__family .elementor-heading-title::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gng-accent);
}
.gng-role__title .elementor-heading-title {
	font-size: clamp(22px, 2.1vw, 30px);
	font-weight: 500;
	line-height: 1.25;
	color: var(--gng-ink);
}

.e-con.gng-role__chips { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gng-role__chips > .elementor-widget { width: auto; }
.gng-chip .elementor-heading-title {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--gng-line);
	border-radius: 999px;
	background: var(--gng-stone);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gng-text);
}

.elementor-widget.gng-role__summary {
	max-width: 68ch;
	font-family: var(--gng-font);
	font-size: 15px;
	line-height: 1.75;
	color: var(--gng-text);
}
.gng-role__summary strong, .gng-role__summary b { font-weight: 600; color: var(--gng-ink); }

/* Apply: solid olive pill (48px tall). */
.elementor-widget.gng-role__apply .elementor-button,
.elementor-widget.gng-careers-hero__cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border: 1px solid var(--gng-olive);
	border-radius: 999px;
	background: var(--gng-olive);
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	color: #fff;
	fill: #fff;
	transition: background-color 0.35s var(--gng-ease), color 0.35s var(--gng-ease), fill 0.35s var(--gng-ease);
}
.elementor-widget.gng-role__apply .elementor-button:hover,
.elementor-widget.gng-role__apply .elementor-button:focus-visible {
	background: transparent;
	color: var(--gng-olive);
	fill: var(--gng-olive);
}
/* Hero jump link: outlined, fills on hover. */
.elementor-widget.gng-careers-hero__cta .elementor-button {
	border-color: var(--gng-ink);
	background: transparent;
	color: var(--gng-ink);
	fill: var(--gng-ink);
}
.elementor-widget.gng-careers-hero__cta .elementor-button:hover,
.elementor-widget.gng-careers-hero__cta .elementor-button:focus-visible {
	background: var(--gng-ink);
	color: #fff;
	fill: #fff;
}
.gng-role__apply .elementor-button-content-wrapper,
.gng-careers-hero__cta .elementor-button-content-wrapper { gap: 12px; align-items: center; }
.gng-role__apply .elementor-button-icon svg,
.gng-careers-hero__cta .elementor-button-icon svg { width: 12px; height: 12px; }
.gng-role__apply .elementor-button:focus-visible,
.gng-careers-hero__cta .elementor-button:focus-visible {
	outline: 2px solid var(--gng-ink);
	outline-offset: 3px;
}

/* Responsibilities and requirements: Elementor's nested accordion, restyled through its own variables. */
.elementor-widget-n-accordion.gng-role__details {
	--n-accordion-border-width: 0px;
	--n-accordion-padding: 0px;
	--n-accordion-title-font-size: 13px;
	--n-accordion-icon-size: 13px;
	--n-accordion-title-normal-color: var(--gng-ink);
	--n-accordion-title-hover-color: var(--gng-olive);
	--n-accordion-title-active-color: var(--gng-olive);
	--n-accordion-icon-gap: 0 16px;
}
.gng-role__details .e-n-accordion-item-title {
	min-height: 48px;
	padding-top: 16px;
	border-top: 1px solid var(--gng-line);
	justify-content: space-between;
}
.gng-role__details .e-n-accordion-item-title-header { flex: 1 1 auto; }
.gng-role__details .e-n-accordion-item-title .e-n-accordion-item-title-text {
	font-family: var(--gng-font);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.gng-role__details .e-n-accordion-item-title-icon {
	display: flex;
	flex: 0 0 36px;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--gng-line);
	border-radius: 50%;
}
.gng-role__details .e-n-accordion-item-title:focus-visible {
	outline: 2px solid var(--gng-ink);
	outline-offset: 4px;
}
.gng-role__details .e-n-accordion-item > .e-con.gng-role__sections {
	gap: 10px;
	padding-top: 20px;
	border: 0;
}
.gng-role__section-title .elementor-heading-title {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gng-olive);
}
.elementor-widget.gng-role__list {
	font-family: var(--gng-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--gng-text);
}
.gng-role__list ul { margin: 0; padding: 0; list-style: none; }
.gng-role__list li { position: relative; margin: 0 0 8px; padding-left: 22px; }
.gng-role__list li::before {
	content: "";
	position: absolute;
	top: 0.85em;
	left: 0;
	width: 10px;
	height: 1px;
	background: var(--gng-accent);
}
.gng-role__list strong, .gng-role__list b { font-weight: 600; color: var(--gng-ink); }

/* ---------- career application popups (2803 … 3281) ---------- */

.gng-careers-popup__role .elementor-heading-title {
	margin-bottom: 10px;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gng-olive);
}

/* The popups' form: labels and typed text were #7a7a7a (4.3:1 on white, below AA); the close button was a 15px
   target and Submit 40px tall. Scoped to the career popups (the only popups carrying the role line); the form
   itself is untouched. */
.elementor-popup-modal:has(.gng-careers-popup__role) .elementor-field-label,
.elementor-popup-modal:has(.gng-careers-popup__role) .elementor-field-group .elementor-field { color: var(--gng-text); }
.elementor-popup-modal:has(.gng-careers-popup__role) .elementor-field-group .elementor-field::placeholder { color: var(--gng-muted); opacity: 1; }
.elementor-popup-modal:has(.gng-careers-popup__role) .elementor-field-group .elementor-field:focus-visible {
	outline: 2px solid var(--gng-ink);
	outline-offset: 2px;
}
.elementor-popup-modal:has(.gng-careers-popup__role) button[type="submit"] { min-height: 44px; }
.elementor-popup-modal:has(.gng-careers-popup__role) .dialog-close-button::after {
	content: "";
	position: absolute;
	inset: -15px; /* 15px icon + 15px each side = a 45px tap target, the icon stays where it was */
}
.elementor-popup-modal:has(.gng-careers-popup__role) .dialog-close-button:focus-visible {
	outline: 2px solid var(--gng-ink);
	outline-offset: 4px;
}

/* ---------- motion (only when the visitor allows it) ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* The photo settles in once on load (scale only: it is never hidden, so it never waits on JavaScript). */
	.gng-careers-hero__image img { animation: gng-careers-settle 1.8s var(--gng-ease) both; }
	.gng-role__apply .elementor-button-icon,
	.gng-careers-hero__cta .elementor-button-icon { transition: transform 0.4s var(--gng-ease); }
	.gng-role__apply .elementor-button:hover .elementor-button-icon,
	.gng-role__apply .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); }
	.gng-careers-hero__cta .elementor-button:hover .elementor-button-icon,
	.gng-careers-hero__cta .elementor-button:focus-visible .elementor-button-icon { transform: translateY(3px); }
	.gng-role__details .e-n-accordion-item-title-icon { transition: border-color 0.3s ease, background-color 0.3s ease; }
}
.gng-role__details .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon,
.gng-role__details .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
	border-color: var(--gng-olive);
}

@keyframes gng-careers-settle {
	from { transform: scale(1.06); }
	to { transform: none; }
}

/* ---------- tablet and phone ---------- */

@media (max-width: 1024px) {
	.e-con.gng-careers-roles { grid-template-columns: minmax(0, 1fr); }
	.e-con.gng-careers-roles__head { position: static; }
	.elementor-widget.gng-careers-roles__intro { max-width: 52ch; }
}

@media (max-width: 767px) {
	.gng-careers-hero,
	.gng-careers-why,
	.gng-careers-roles { --gng-careers-overlap: 48px; }

	.gng-careers-hero { --gng-careers-header-overlap: 140px; }
	.e-con.gng-careers-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 0; }
	.gng-careers-hero__title .elementor-heading-title { margin: 18px 0 20px; }
	.e-con.gng-careers-hero__media { margin-bottom: calc(-1 * var(--gng-careers-overlap)); }
	.gng-careers-hero__image img { aspect-ratio: 4 / 3.4; }

	.e-con.gng-careers-why { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--gng-careers-overlap) + 48px); }
	.e-con.gng-careers-why__head { min-height: 0; }
	.e-con.gng-careers-why__points { grid-template-columns: minmax(0, 1fr); margin-top: 40px; gap: 32px; }

	.e-con.gng-role {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "main" "summary" "details" "apply";
		gap: 18px;
		padding: 24px 20px;
	}
	.e-con.gng-role:not(:has(> .gng-role__summary)) { grid-template-areas: "main" "details" "apply"; }
	.gng-role__apply, .gng-role__apply .elementor-button-wrapper, .gng-role__apply .elementor-button { width: 100%; }
	/* One line on a phone: sentence case instead of wide-tracked capitals. */
	.gng-role__details .e-n-accordion-item-title .e-n-accordion-item-title-text { font-size: 15px; letter-spacing: 0.01em; text-transform: none; }
}

/* ===== 53-services.css ===== */

/* ---------- Services page (1476, change 018) ----------
   The three service cards are native Icon Box widgets inside containers with the class gng-service-card; the
   intro column (gng-services-lead) stays in view beside them on desktop, as the original Jeg Kit sticky did. */

@media (min-width: 1025px) {
	.gng-services-lead {
		position: sticky;
		top: 120px;
		align-self: flex-start;
	}
}

.gng-service-card {
	transition: border-color 0.35s var(--gng-ease), box-shadow 0.35s var(--gng-ease);
}
.gng-service-card:hover {
	border-color: var(--gng-accent);
	box-shadow: 0 18px 40px -24px rgba(17, 17, 17, 0.35);
}
.gng-service-card .elementor-icon-box-title {
	margin-top: 0;
}
.gng-service-card .elementor-icon-box-description {
	margin: 0;
}
.gng-service-card .elementor-icon svg {
	width: 1em;
	height: 1em;
}

/* "View our projects" (button 7d43d0e): a text link with an arrow, like .gng-link. */
.gng-services-more .elementor-button {
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}
.gng-services-more .elementor-button:focus-visible {
	outline: 2px solid var(--gng-accent);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.gng-services-more .elementor-button-icon {
		transition: transform 0.4s var(--gng-ease);
	}
	.gng-services-more .elementor-button:hover .elementor-button-icon,
	.gng-services-more .elementor-button:focus-visible .elementor-button-icon {
		transform: translateX(6px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.gng-service-card { transition: none; }
}

/* ===== 54-blog.css ===== */

/* ---------- blog: Articles grid (1544) and single post template (1854), change 018 ---------- */

/* Articles: Elementor Pro Posts widget with the class gng-posts. */
.gng-posts .elementor-post__thumbnail__link {
	display: block;
	overflow: hidden;
	margin-bottom: 22px !important;
	border-radius: 4px;
	background: var(--gng-stone);
}
/* Cover the ratio box with or without Elementor's JS (which otherwise adds elementor-has-item-ratio / fit-height). */
.gng-posts .elementor-posts-container .elementor-post .elementor-post__thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
}
.gng-posts .elementor-post__title {
	margin: 0 0 10px;
	font-family: var(--gng-font);
	font-size: clamp(18px, 1.5vw, 20px);
	font-weight: 500;
	line-height: 1.4;
}
.gng-posts .elementor-post__title a {
	color: var(--gng-ink);
	text-decoration: none;
}
.gng-posts .elementor-post__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gng-accent);
	text-underline-offset: 4px;
}
.gng-posts .elementor-post__meta-data {
	margin-bottom: 14px;
	font-family: var(--gng-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gng-text);
}
.gng-posts .elementor-post__read-more {
	display: inline-block;
	padding: 12px 0;
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--gng-ink);
	text-decoration: none;
}
.gng-posts .elementor-post__read-more::after {
	content: "\2192";
	display: inline-block;
	margin-left: 10px;
}
.gng-posts a:focus-visible {
	outline: 2px solid var(--gng-accent);
	outline-offset: 4px;
}

.gng-posts .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: clamp(40px, 5vw, 64px);
	font-family: var(--gng-font);
	font-size: 14px;
	font-weight: 500;
}
.gng-posts .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--gng-ink);
	text-decoration: none;
}
.gng-posts .elementor-pagination a.page-numbers:hover,
.gng-posts .elementor-pagination a.page-numbers:focus-visible {
	border-color: var(--gng-ink);
}
.gng-posts .elementor-pagination .page-numbers.current {
	background: var(--gng-ink);
	color: #fff;
}
.gng-posts .elementor-pagination .page-numbers.prev,
.gng-posts .elementor-pagination .page-numbers.next {
	padding: 0 18px;
}
.gng-posts .elementor-pagination span.page-numbers.prev,
.gng-posts .elementor-pagination span.page-numbers.next {
	color: var(--gng-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.gng-posts .elementor-posts-container .elementor-post .elementor-post__thumbnail img {
		transition: transform 1.2s var(--gng-ease);
	}
	.gng-posts .elementor-posts-container .elementor-post:hover .elementor-post__thumbnail img {
		transform: scale(1.04);
	}
	.gng-posts .elementor-post__read-more::after {
		transition: transform 0.4s var(--gng-ease);
	}
	.gng-posts .elementor-post__read-more:hover::after,
	.gng-posts .elementor-post__read-more:focus-visible::after {
		transform: translateX(6px);
	}
}

/* Single post: sidebar "Related posts" (Pro Posts widget, class gng-related-posts) drawn as image tiles with a
   dark overlay and white title, like the ElementsKit list it replaces. The whole tile is the link. */
.gng-related-posts .elementor-post {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 96px;
	overflow: hidden;
	background: var(--gng-ink);
}
.gng-related-posts .elementor-post__thumbnail__link {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0 !important;
}
.gng-related-posts .elementor-post__thumbnail__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.58);
	transition: background-color 0.35s var(--gng-ease);
}
.gng-related-posts .elementor-posts-container .elementor-post__thumbnail {
	position: absolute;
	inset: 0;
	height: 100%;
	padding-bottom: 0 !important;
}
.gng-related-posts .elementor-posts-container .elementor-post .elementor-post__thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: none;
}
.gng-related-posts .elementor-post__text {
	position: relative;
	z-index: 1;
	padding: 18px 20px;
	pointer-events: none;
}
.gng-related-posts .elementor-post__title {
	margin: 0;
	font-family: var(--gng-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}
.gng-related-posts .elementor-post__title a {
	color: #fff;
	text-decoration: none;
}
.gng-related-posts .elementor-post:hover .elementor-post__thumbnail__link::after,
.gng-related-posts .elementor-post:focus-within .elementor-post__thumbnail__link::after {
	background: rgba(17, 17, 17, 0.78);
}
.gng-related-posts .elementor-post:focus-within {
	outline: 2px solid var(--gng-accent);
	outline-offset: 2px;
}
.gng-related-posts a:focus-visible {
	outline: none;
}

/* Single post: links inside the article were Hello Elementor's default pink (#c36). */
.gng-post-main .elementor-widget-theme-post-content a {
	color: var(--gng-ink);
	text-decoration: underline;
	text-decoration-color: var(--gng-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.gng-post-main .elementor-widget-theme-post-content a:hover {
	text-decoration-thickness: 2px;
}
.gng-post-main .elementor-widget-theme-post-content a:focus-visible {
	outline: 2px solid var(--gng-accent);
	outline-offset: 2px;
}

/* Single post sidebar: contact lines and social icons are at least 44px tall to tap. */
.gng-post-aside .elementor-icon-list-item,
.gng-post-aside .elementor-icon-list-item > a {
	min-height: 44px;
	align-items: center;
}
.gng-post-aside .elementor-icon-list-item > a:focus-visible,
.gng-post-aside .elementor-social-icon:focus-visible {
	outline: 2px solid var(--gng-accent);
	outline-offset: 2px;
}
@media (min-width: 768px) {
	/* The 13px icon padding (tap target) would push the first icon off the text edge. */
	.gng-post-aside .elementor-social-icons-wrapper {
		margin-inline-start: -13px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.gng-related-posts .elementor-post__thumbnail__link::after { transition: none; }
}

/* ===== 60-header.css ===== */

/* ---------- dark-text header (template 1200: Careers, Company Profile; its menu widget is d8d2d63) ----------
   Its active menu item was styled white, invisible on these light pages once Careers joined the menu (005).
   Selectors use Elementor element IDs, never the template's post ID: the design package installs templates as
   copies with new post IDs, while element IDs stay the same. */

.elementor-element-d8d2d63 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-element-d8d2d63 .elementor-nav-menu--main .elementor-item:hover {
	color: var(--gng-olive) !important;
}
.elementor-element-d8d2d63 .elementor-nav-menu--main .elementor-item-active::after {
	background-color: var(--gng-olive) !important;
}

/* ---------- logos (image widgets in headers 1202 and 1200) ----------
   Each logo's width is a % of its link, and the link is inline-block, so it shrinks to the image file's intrinsic
   width. The old 726 / 371 px files were wider than the widget, so the link always filled it; with the 300 px file
   (change 019) and a `sizes` hint (inc/sitewide.php) the logo shrank. A block link fills the widget again, so the
   logo keeps its old size whatever file is served. Only the logo itself takes clicks and shows the focus ring.
   The widget's own width is pinned too: in a flex column Chrome sized the widget's height from the image's
   intrinsic width, so on phones the header row came out shorter than the logo (79 px for a 116 px logo). */
.elementor-location-header .elementor-widget-image { width: 100% !important; } /* beats the widget's own "auto" width */
.elementor-location-header .elementor-widget-image a { display: block; pointer-events: none; }
.elementor-location-header .elementor-widget-image a img { pointer-events: auto; }
.elementor-location-header .elementor-widget-image a:focus-visible { outline: none; }
.elementor-location-header .elementor-widget-image a:focus-visible img { outline: 2px solid #ffffff; outline-offset: 3px; }
.elementor-element-5d321ac a:focus-visible img,
.elementor-element-9e58a83 a:focus-visible img { outline-color: var(--gng-olive); } /* header 1200 logos */

/* Social icons: their link colour is Elementor's grey (#69727d), too faint as a focus ring on the dark hero. */
.elementor-location-header .elementor-social-icon:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.elementor-element-88cc79c .elementor-social-icon:focus-visible { outline-color: var(--gng-olive); } /* header 1200 */

/* ---------- menu trigger (icon widget .gng-menu-trigger in headers 1202 and 1200, opens popup 1432) ----------
   The icon is 24px; the link around it becomes a 44 × 44 tap target centred on the same spot (the negative margin
   keeps the icon exactly where it was). */
.gng-menu-trigger .elementor-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -10px;
}

/* The mark itself. The widget holds Font Awesome "bars" (no ElementsKit font needed), but its solid bars are much
   heavier than the thin mark the header always had, so that mark is drawn over them: 24 px wide, three 1.5 px lines
   5.25 px apart, the last one two-thirds long and right-aligned. The FA icon shows if this stylesheet is missing and
   in forced-colors (high-contrast) mode, where backgrounds are not painted. */
.gng-menu-trigger .elementor-icon svg { opacity: 0; }
.gng-menu-trigger .elementor-icon::before,
.gng-menu-trigger .elementor-icon::after {
	content: "";
	position: absolute;
	right: 10px;
	height: 1.5px;
	background: currentColor;
}
.gng-menu-trigger .elementor-icon::before { top: calc(50% - 6px); width: 24px; box-shadow: 0 5.25px 0 currentColor; }
.gng-menu-trigger .elementor-icon::after { top: calc(50% + 4.5px); width: 16px; }
@media (forced-colors: active) {
	.gng-menu-trigger .elementor-icon svg { opacity: 1; }
	.gng-menu-trigger .elementor-icon::before, .gng-menu-trigger .elementor-icon::after { display: none; }
}

/* ---------- desktop menu on narrower desktops (1025–1366 px) ----------
   The five links (About … Careers) wrapped onto two lines from about 1250 px down, making the bar 97 px tall and
   pushing the logo off-centre. Tighter link spacing keeps them on one line; the columns (and so the centred logo)
   stay as designed. Menu widgets: 6ecd66a (header 1202), d8d2d63 (header 1200). */
@media (min-width: 1025px) and (max-width: 1366px) {
	.elementor-element-6ecd66a .elementor-nav-menu--main > .elementor-nav-menu,
	.elementor-element-d8d2d63 .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; }
	.elementor-element-6ecd66a .elementor-nav-menu--main .elementor-item,
	.elementor-element-d8d2d63 .elementor-nav-menu--main .elementor-item {
		padding-left: clamp(7px, 1.1vw, 14px);
		padding-right: clamp(7px, 1.1vw, 14px);
		font-size: clamp(13px, 1.1vw, 15px);
		white-space: nowrap;
	}
}

/* ===== 70-company-profile.css ===== */

/* ---------- company profile: title, full-screen control and flipbook (page 2586, inc/company-profile.php) ----------
   The dark-text header (template 1200) overlays the page: it pulls the content up under itself by 180px on desktop and
   tablet (container b14b15b, margin-bottom -180px, 87px tall) and by 140px on phones (e078365, -140px, 116px tall).
   The section starts under the header, so its top padding is that overlap plus breathing room. The warm stone
   background and #5b5a4f title colour are the Careers page's, the other light page that uses this header. */

.gng-profile {
	--gng-cp-stage: #eee7e1;
	--gng-cp-ink: #5b5a4f;
	--gng-cp-overlap: 180px;
	--gng-cp-book: max(460px, calc(100vh - 244px));
	padding: calc(var(--gng-cp-overlap) + 36px) 0 clamp(32px, 4vw, 56px);
	background: var(--gng-cp-stage);
	font-family: var(--gng-font);
	color: var(--gng-cp-ink);
}

.gng-profile__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	margin: 0 0 24px;
	padding: 0 var(--gng-gutter);
}
.gng-profile__title {
	margin: 0;
	font-family: var(--gng-font);
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gng-cp-ink);
}
.gng-profile__text {
	margin: 10px 0 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gng-cp-ink);
}

.gng-profile__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gng-profile .gng-profile__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 12px 28px;
	border: 1px solid var(--gng-ink);
	border-radius: 999px;
	background: transparent;
	font: 500 14px/1.2 var(--gng-font);
	letter-spacing: 0.06em;
	color: var(--gng-ink);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.gng-profile .gng-profile__button.gng-button--solid { background: var(--gng-ink); color: #fff; }
/* Hello's reset paints a focused or hovered <button> #c36; these states are ours. */
.gng-profile .gng-profile__button:hover,
.gng-profile .gng-profile__button:focus { background: var(--gng-ink); color: #fff; }
.gng-profile .gng-profile__button.gng-button--solid:hover,
.gng-profile .gng-profile__button.gng-button--solid:focus { background: transparent; color: var(--gng-ink); }
.gng-profile .gng-profile__button:focus:not(:focus-visible) { background: transparent; color: var(--gng-ink); }
.gng-profile .gng-profile__button.gng-button--solid:focus:not(:focus-visible) { background: var(--gng-ink); color: #fff; }
.gng-profile .gng-profile__button:focus-visible,
.gng-profile__noscript a:focus-visible { outline: 2px solid var(--gng-olive); outline-offset: 4px; }
.gng-profile .gng-profile__button[hidden] { display: none; }
.gng-profile__icon { flex: none; }
.gng-profile__size { font-weight: 400; opacity: 0.75; }

/* The book fills the rest of the screen below the title. DearFlip sizes its pages to this box; its own
   fullscreen (.df-fullscreen, native or pseudo) must not inherit the height. */
.gng-profile__book { position: relative; }
.gng-profile ._df_book,
.gng-profile .df-container:not(.df-fullscreen) {
	width: 100% !important;
	height: var(--gng-cp-book) !important;
}
.gng-profile .df-bg { background-color: var(--gng-cp-stage) !important; }
/* DearFlip's toolbar: site olive instead of its teal (#00acce) for hover / active, 44px targets on touch screens. */
.gng-profile .df-ui-btn:hover,
.gng-profile .df-ui-btn.df-active { color: var(--gng-olive); }
@media (pointer: coarse) {
	.gng-profile .df-ui { height: 44px; }
	.gng-profile .df-ui > .df-ui-btn { width: 44px; }
	.gng-profile .df-ui .df-ui-page { line-height: 44px; }
}
.gng-profile__noscript {
	margin: 0;
	padding: 48px var(--gng-gutter);
	font-size: 15px;
	text-align: center;
}
.gng-profile__noscript a { color: var(--gng-ink); }

/* Tablet: header 1200 is the desktop one here too, but the title and buttons may wrap to two rows. */
@media (max-width: 1024px) {
	.gng-profile { --gng-cp-book: max(420px, min(calc(100vh - 300px), calc(100vw * 0.72))); }
}

/* Phone: the book shows one landscape page at a time, so the box is sized to that page (A4 landscape,
   1.414:1, 20px side margins inside DearFlip) plus its toolbar, not to the screen. */
@media (max-width: 767px) {
	.gng-profile {
		--gng-cp-overlap: 140px;
		--gng-cp-book: calc((100vw - 40px) / 1.414 + 112px);
		padding-top: calc(var(--gng-cp-overlap) + 16px);
	}
	.gng-profile__head { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 12px; }
	.gng-profile__title { font-size: 34px; }
	.gng-profile__actions { flex-direction: column; gap: 10px; }
	.gng-profile .gng-profile__button { width: 100%; }
}

/* ===== 99-reduced-motion.css ===== */

@media (prefers-reduced-motion: reduce) {
	.gng-showcase__media img, .gng-project__shot img, .gng-project__nav-item img, .gng-link span { transition: none; }
	/* The reveal is never switched on under reduced motion (functions.php); this also covers a visitor who turns the
	   setting on after the page has loaded. */
	.gng-reveal-on [data-gng-reveal], .gng-reveal-on .gng-reveal { opacity: 1; transform: none; transition: none; }
}