/* ==========================================================================
   GetGreen, design system
   --------------------------------------------------------------------------
   Every colour and font below is read from the Elementor Kit at runtime:

       Elementor → Site Settings → Global Colors / Global Fonts

   Changing a global there recolours or re-typesets the whole site with no
   code change. The hex values in var(..., #xxxxxx) are only fallbacks for the
   moment before the kit loads (or if it was never imported).

   Sections
     1. Tokens
     2. Base + accessibility
     3. Buttons
     4. Header + navigation
     5. Hero
     6. Cards + grids
     7. Sections: steps, area, services rows, chips
     8. Forms
     9. Footer + sticky mobile bar
    10. Motion + print
   ========================================================================== */

/* -- 1. Tokens ----------------------------------------------------------- */
:root {
	--gg-primary:      var(--e-global-color-primary,   #55701F);
	--gg-primary-dark: var(--e-global-color-ggprimdark,#3F5416);
	--gg-sage:         var(--e-global-color-secondary, #7F9E3B);
	--gg-text:         var(--e-global-color-text,      #2E332C);
	--gg-accent:       var(--e-global-color-accent,    #D9A441);
	--gg-dark:         var(--e-global-color-ggdark,    #1C1C1C);
	--gg-forest:       var(--e-global-color-ggforest,  #31401C);
	--gg-light:        var(--e-global-color-gglight,   #F4F6F0);
	--gg-white:        var(--e-global-color-ggwhite,   #FFFFFF);
	--gg-muted:        var(--e-global-color-ggmuted,   #5C6459);
	--gg-border:       var(--e-global-color-ggborder,  #E2E6DC);

	--gg-font-head: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"), system-ui, sans-serif;
	--gg-font-body: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;

	--gg-radius-sm: 10px;
	--gg-radius:    16px;
	--gg-radius-lg: 22px;

	--gg-ring:        3px;         /* focus ring thickness  */
	--gg-ring-offset: 3px;
	--gg-tap:         48px;        /* minimum touch target  */
	--gg-header-h:    98px;   /* 66px logo + 16px padding top and bottom */

	--gg-ease: cubic-bezier(.22,.61,.36,1);
}

/* -- 2. Base + accessibility --------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

/* Anchor links from the services chip bar must clear the frozen header. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--gg-header-h) + 16px); }
/* Logged in, the WordPress toolbar pushes the header down, so an anchor needs
   to stop that much lower again or it lands behind it. Below 600px the toolbar
   is no longer pinned and the plain figure is right. */
html:has(body.admin-bar) { scroll-padding-top: calc(var(--gg-header-h) + 48px); }
@media screen and (max-width: 782px) {
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--gg-header-h) + 62px); }
}
@media screen and (max-width: 600px) {
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--gg-header-h) + 16px); }
}

body {
	font-family: var(--gg-font-body);
	color: var(--gg-text);
	overflow-x: hidden;             /* belt-and-braces against horizontal scroll */
}
/* `overflow-x: hidden` forces overflow-y to auto, which turns the element into
   a scroll container and can stop a sticky header sticking. `clip` does the
   same job without that side effect, so use it wherever it is understood. */
@supports (overflow: clip) {
	body { overflow-x: clip; }
}

/* No element may push the page sideways. */
img, svg, video, iframe, table { max-width: 100%; }
img, svg, video { height: auto; }

/* Visible, high-contrast focus ring on every interactive element.
   Uses :focus-visible so mouse users never see it, keyboard users always do. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--gg-ring) solid var(--gg-dark);
	outline-offset: var(--gg-ring-offset);
	border-radius: 4px;
}
/* On dark bands the black ring would disappear, switch to white. */
.gg-cta :where(a, button):focus-visible,
.gg-stepsband :where(a, button):focus-visible,
.gg-mission :where(a, button):focus-visible,
.gg-footer :where(a, button):focus-visible,
.gg-stickybar :where(a, button):focus-visible {
	outline-color: var(--gg-white);
}

.gg-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
}
.gg-skip-link:focus {
	left: 8px; top: 8px; width: auto; height: auto; clip: auto;
	padding: 12px 20px; background: var(--gg-dark); color: #fff;
	border-radius: var(--gg-radius-sm); font: 600 16px/1 var(--gg-font-head);
	text-decoration: none;
}

/* Readable measure for centred intro copy. */
.gg-measure { max-width: 62ch; margin-inline: auto; }
.gg-measure-wide { max-width: 20ch; margin-inline: auto; }
.gg-section-head--center .gg-measure { margin-inline: auto; }

/* Eyebrow / small caps label */
.gg-eyebrow { margin: 0; }
.gg-eyebrow .elementor-heading-title { display: inline-block; }

/* Body copy inside Elementor text widgets */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Links inside body copy stay obviously clickable. */
.elementor-widget-text-editor a {
	color: var(--gg-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.elementor-widget-text-editor a:hover { color: var(--gg-primary-dark); }

/* -- 3. Buttons ----------------------------------------------------------
   Colour, padding, radius and typography for every button live in the widget
   itself, wired to Global Colors, so they show correctly in Elementor's Style
   tab and recolour from Site Settings. Only what Elementor has no control for
   is set here: the flex centring, the minimum touch target, and the motion.  */
.gg-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--gg-tap-lg, 56px);
	line-height: 1.15;
	text-decoration: none;
	transition: background-color .2s var(--gg-ease),
	            color .2s var(--gg-ease),
	            border-color .2s var(--gg-ease),
	            transform .2s var(--gg-ease),
	            box-shadow .2s var(--gg-ease);
}
.gg-btn .elementor-button:hover { transform: translateY(-2px); }
.gg-btn .elementor-button:active { transform: translateY(0); }

.gg-btn--primary .elementor-button {
	box-shadow: 0 6px 18px -8px rgba(85,112,31,.7);
}
.gg-btn--primary .elementor-button:hover,
.gg-btn--primary .elementor-button:focus {
	box-shadow: 0 10px 24px -10px rgba(85,112,31,.85);
}

/* Text CTA: "Learn More →" */
.gg-btn--ghost .elementor-button {
	/* Text-style CTA, but still a 44px pointer target. The extra height sits
	   around the text, so it reads as a link and behaves as a button. */
	min-height: 44px;
	background: none;
	border: 0;
	box-shadow: none;
}
.gg-btn--ghost .elementor-button:hover,
.gg-btn--ghost .elementor-button:focus {
	transform: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.gg-btn--ghost .elementor-button-icon { transition: transform .2s var(--gg-ease); }
.gg-btn--ghost .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

.gg-btnrow { align-items: center; }
.gg-btnrow--center { justify-content: center; }

/* A button set to "Justified" on mobile needs its widget wrapper to fill the
   row, or it only stretches to its own content width. */
@media (max-width: 767px) {
	.gg-btnrow > .elementor-widget-button { flex: 1 1 100%; }
	.gg-btnrow > .elementor-widget-button.gg-btn--ghost { flex: 0 1 auto; }
}

/* Trust bullets under the hero CTAs */
.gg-trustlist .elementor-icon-list-text { font-size: 16px; }

/* -- 4. Header + navigation ---------------------------------------------- */
/* No backdrop-filter here on purpose: it would make the sticky header a
   containing block for fixed-position descendants, which traps the mobile
   navigation drawer inside the header instead of covering the viewport.
   The header background stays an Elementor setting so the client can change it. */
/* The header is frozen to the top of the window.
   It is the outer wrapper that sticks, not the header container itself. A
   sticky element is held inside the box that contains it, and Elementor's own
   wrapper around a template is exactly as tall as that template, so a header
   sticking to it has nowhere to travel and simply scrolls away. The plugin
   prints .gg-part--header as a direct child of the body; the :has() line is the
   same fix for a site running Elementor Pro, which renders the header itself
   and never goes through the plugin. */
.gg-part--header,
.elementor:has(> .gg-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}
.gg-header {
	transition: box-shadow .3s var(--gg-ease), border-color .3s var(--gg-ease);
}
/* Logged in, the WordPress toolbar is pinned across the top of the window and
   would sit over the frozen header. These are WordPress's own breakpoints: the
   bar is 32px, then 46px, then it stops being pinned and scrolls away. */
body.admin-bar .gg-part--header,
body.admin-bar .elementor:has(> .gg-header) { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .gg-part--header,
	body.admin-bar .elementor:has(> .gg-header) { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .gg-part--header,
	body.admin-bar .elementor:has(> .gg-header) { top: 0; }
}
/* Once it has left the top of the page it needs to read as a layer sitting
   over the content, not as part of it. */
.gg-header.is-stuck {
	box-shadow: 0 10px 30px -20px rgba(28,28,28,.55);
	border-bottom-color: color-mix(in srgb, var(--gg-border) 70%, var(--gg-muted));
}

.gg-header__bar { min-height: calc(var(--gg-header-h) - 32px); }
.gg-header__brand { flex: 0 0 auto; }
.gg-header__actions { flex: 0 0 auto; }

.gg-header__tel .elementor-button {
	color: var(--gg-dark);
	font-weight: 700;
	font-size: 17px;
	padding: 6px 0;
}
.gg-header__tel .elementor-button:hover { color: var(--gg-primary); }
.gg-header__cta .elementor-button { min-height: 50px; padding: 13px 26px; }

@media (max-width: 1024px) {
	:root { --gg-header-h: 74px; }
}
@media (max-width: 767px) {
	:root { --gg-header-h: 70px; }
}

/* -- 5. Hero -------------------------------------------------------------- */
.gg-hero__frame { position: relative; }
.gg-hero__frame .elementor-widget-image,
.gg-hero__frame figure,
.gg-hero__frame img { display: block; width: 100%; }
.gg-hero__img img {
	width: 100%;
	aspect-ratio: 4 / 3.2;
	object-fit: cover;
	border-radius: 0;
}

/* Floating phone card overlapping the hero photo.
   Elementor drives container box metrics through custom properties, so set
   those rather than overriding `margin` with !important, and switch --width
   to auto, or 100% width plus side margins overflows the row. */
.e-con.gg-phonecard {
	--width: auto;
	--margin-top: -64px;
	--margin-left: 28px;
	--margin-right: 28px;
}
.gg-phonecard {
	position: relative;
	z-index: 2;
	border: 1px solid var(--gg-border);
}
.gg-phonecard__media { flex: 0 0 88px; }
.gg-phonecard__thumb img {
	width: 88px; height: 88px; object-fit: cover; display: block;
}
.gg-phonecard__label { margin: 0; text-transform: none; letter-spacing: 0; }
.gg-phonecard__num .elementor-heading-title { line-height: 1.1; }
.gg-phonecard__text .gg-btn--ghost .elementor-button { padding-top: 2px; }

@media (max-width: 767px) {
	.e-con.gg-phonecard {
		--margin-top: -40px;
		--margin-left: 12px;
		--margin-right: 12px;
	}
	.gg-phonecard__media { flex: 0 0 68px; }
	.gg-phonecard__thumb img { width: 68px; height: 68px; }
	.gg-hero__img img { aspect-ratio: 4 / 3; }
}

/* Inner-page hero photo */
.gg-pagehero .gg-hero__img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* -- 6. Cards + grids ----------------------------------------------------- */
.gg-grid { align-items: stretch; }
.gg-grid > .e-con,
.gg-grid > .elementor-element { align-self: stretch; }

.gg-card {
	transition: transform .25s var(--gg-ease), box-shadow .25s var(--gg-ease),
	            border-color .25s var(--gg-ease);
	box-shadow: 0 1px 2px rgba(28,28,28,.04);
}
.gg-card:hover {
	transform: translateY(-4px);
	border-color: var(--gg-sage);
	box-shadow: 0 18px 40px -22px rgba(28,28,28,.35);
}

.gg-card__media { overflow: hidden; }
.gg-card__img img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform .5s var(--gg-ease);
}
.gg-card:hover .gg-card__img img { transform: scale(1.05); }

.gg-card__icon .elementor-icon-box-icon { margin-bottom: 0 !important; }
.gg-card__icon .elementor-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--gg-sage) 18%, transparent);
	color: var(--gg-primary);
}
.gg-card__icon .elementor-icon-box-content { display: none; }

/* The card body is set to Flex Size = Grow in Elementor, so it fills whatever
   height the tallest card in the row sets. That is what lets "Learn More" sit on
   a common baseline however long the description runs. */
.gg-card__body .elementor-widget-button { margin-top: auto; }

/* Value cards on the About page */
.gg-valuecard .elementor-icon-box-icon { margin-bottom: 14px; }
.gg-valuecard .elementor-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 14px;
	background: color-mix(in srgb, var(--gg-sage) 18%, transparent);
	color: var(--gg-primary);
}

/* "Why work with us" feature rows */
.gg-feature .elementor-icon-box-wrapper { display: flex; gap: 16px; align-items: flex-start; }
.gg-feature .elementor-icon-box-icon { flex: 0 0 auto; margin: 2px 0 0; }
.gg-feature .elementor-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: color-mix(in srgb, var(--gg-sage) 16%, transparent);
	color: var(--gg-primary);
}
.gg-feature .elementor-icon-box-title { margin-bottom: 4px; }
.gg-feature .elementor-icon-box-description { color: var(--gg-muted); }

.gg-why__img img { aspect-ratio: 4 / 4.4; object-fit: cover; width: 100%; }
@media (max-width: 1024px) { .gg-why__img img { aspect-ratio: 16 / 9; } }

/* About page stacked/inset images */
.gg-about__img img { aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; }
.e-con.gg-about__inset {
	--width: 58%;
	--margin-top: -84px;
	--margin-left: auto;
	--margin-right: 14px;
}
.gg-about__inset {
	align-self: flex-end;
	position: relative; z-index: 2;
	border: 5px solid var(--gg-white);
}
.gg-about__img2 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (max-width: 767px) {
	.e-con.gg-about__inset { --width: 66%; --margin-top: -56px; }
}

/* -- 6b. Sideways card strip ---------------------------------------------
   A wide monitor was leaving roughly 550px of empty margin either side of a
   three-across grid, and five cards wrapped to an awkward 3 + 2. The strip
   fixes both: cards grow to fill whatever width the screen gives, stop
   shrinking at a readable minimum, and scroll sideways once they run out of
   room. Nothing here is per-card, so duplicating a card in Elementor just adds
   another one to the strip.                                                 */
.e-con.gg-scroller {
	--gg-card-w: 320px;
	--gg-card-max: 460px;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	/* Room for the card hover lift and its shadow, which an overflow container
	   would otherwise clip, plus the scrollbar underneath. */
	padding-block: 8px 26px !important;
	scrollbar-width: thin;
	scrollbar-color: var(--gg-sage) color-mix(in srgb, var(--gg-border) 60%, transparent);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.e-con.gg-scroller > .e-con,
.e-con.gg-scroller > .elementor-element {
	/* Grow into spare width, never shrink below a readable card. This is what
	   removes the dead margin on a wide screen and forces a scroll on a narrow
	   one, without a single media query doing the deciding. */
	flex: 1 0 var(--gg-card-w);
	max-width: var(--gg-card-max);
	scroll-snap-align: start;
	align-self: stretch;
}

/* A visible scrollbar matters here. macOS hides overlay scrollbars until you
   scroll, and this row is the one place on the site where sideways movement is
   not obvious, so the track is drawn permanently. */
.e-con.gg-scroller::-webkit-scrollbar { height: 10px; }
.e-con.gg-scroller::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--gg-border) 55%, transparent);
	border-radius: 99px;
}
.e-con.gg-scroller::-webkit-scrollbar-thumb {
	background: var(--gg-sage);
	border-radius: 99px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.e-con.gg-scroller::-webkit-scrollbar-thumb:hover { background: var(--gg-primary); background-clip: padding-box; }

/* The strip is focusable when it actually scrolls, so it can be driven with
   the arrow keys. That needs a focus ring people can see. */
.e-con.gg-scroller:focus-visible {
	outline: var(--gg-ring) solid var(--gg-primary);
	outline-offset: 2px;
	border-radius: var(--gg-radius-sm);
}

/* Arrow buttons, added by gg-motion.js only when the strip overflows. */
.gg-scrollwrap { position: relative; width: 100%; }
.gg-scrollbtn {
	position: absolute;
	/* gg-motion.js measures the card photo and centres the arrows on it, so they
	   never sit across the wording. The 50% is only the fallback for a strip
	   whose cards have no photo. */
	top: var(--gg-arrow-top, 50%);
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--gg-tap);
	height: var(--gg-tap);
	padding: 0;
	border: 1px solid var(--gg-border);
	border-radius: 50%;
	background: var(--gg-white);
	color: var(--gg-primary);
	box-shadow: 0 8px 24px -10px rgba(28,28,28,.45);
	cursor: pointer;
	z-index: 2;
	transition: background-color .2s var(--gg-ease), color .2s var(--gg-ease),
	            opacity .2s var(--gg-ease), transform .2s var(--gg-ease);
}
.gg-scrollwrap.is-scrollable .gg-scrollbtn { display: inline-flex; }
.gg-scrollbtn--prev { left: -6px; }
.gg-scrollbtn--next { right: -6px; }
.gg-scrollbtn svg { width: 22px; height: 22px; display: block; }
.gg-scrollbtn:hover:not(:disabled) {
	background: var(--gg-primary);
	color: var(--gg-white);
	border-color: var(--gg-primary);
	transform: translateY(-50%) scale(1.06);
}
.gg-scrollbtn:focus-visible {
	outline: var(--gg-ring) solid var(--gg-primary);
	outline-offset: var(--gg-ring-offset);
}
.gg-scrollbtn:disabled { opacity: .32; cursor: default; }

@media (max-width: 1366px) { .e-con.gg-scroller { --gg-card-w: 300px; } }
@media (max-width: 1024px) {
	.e-con.gg-scroller { --gg-card-w: 288px; }
	.gg-scrollbtn--prev { left: 0; }
	.gg-scrollbtn--next { right: 0; }
}
@media (max-width: 767px) {
	/* A partly visible next card is the clearest hint on a phone that the row
	   moves, so cards are sized to leave one showing at the edge. */
	.e-con.gg-scroller { --gg-card-w: min(78vw, 310px); --gg-card-max: none; }
	.gg-scrollwrap.is-scrollable .gg-scrollbtn { display: none; }
}

/* -- 7. Steps, service area, service rows, chips -------------------------- */
.gg-step { position: relative; }
.gg-step__num { margin: 0; }
.gg-step__num .elementor-heading-title { display: block; }
.gg-step:not(:last-child)::after {
	content: "";
	position: absolute; top: 34px; right: -28px;
	width: 24px; height: 2px;
	background: rgba(255,255,255,.22);
}
@media (max-width: 1024px) { .gg-step::after { display: none; } }

/* Google Maps widget: fill the rounded frame with no letterboxing. */
.gg-mapframe { line-height: 0; }
.gg-map .elementor-custom-embed,
.gg-map iframe { display: block; width: 100%; border: 0; }

.gg-mapslot { text-align: center; }
.gg-mapslot__box .elementor-icon { color: var(--gg-primary); font-size: 34px; }
.gg-mapslot__box .elementor-icon-box-title { margin: 14px 0 8px; }
.gg-mapslot__box .elementor-icon-box-description {
	color: var(--gg-muted); max-width: 46ch; margin-inline: auto; font-size: 16px;
}
.gg-townlist .elementor-icon-list-item { align-items: center; }

.gg-srow__img img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; }
.gg-benefits .elementor-icon-list-text { color: var(--gg-text); }

/* Anchor chip bar on the Services page */
.gg-chipbar { position: relative; }
.gg-chips .elementor-icon-list-items { justify-content: center; gap: 10px; }
.gg-chips .elementor-icon-list-item {
	border: 1px solid var(--gg-border);
	border-radius: 999px;
	padding: 9px 16px !important;
	transition: background-color .2s var(--gg-ease), border-color .2s var(--gg-ease);
	margin: 0 !important;
}
.gg-chips .elementor-icon-list-item:hover {
	background: var(--gg-light);
	border-color: var(--gg-sage);
}
.gg-chips .elementor-icon-list-item a { min-height: 26px; }
.gg-chips .elementor-icon-list-text { font-size: 15px; font-weight: 600; color: var(--gg-dark); }
.gg-chips .elementor-icon-list-icon { color: var(--gg-primary); }
@media (max-width: 767px) {
	.gg-chips .elementor-icon-list-items { justify-content: flex-start; }
}

/* -- 7b. Contact detail cards --------------------------------------------
   Each card is an icon and heading on one line, with the value under it.
   Two things were out of true. The icon sat 11px above the middle of the
   heading beside it, which is Elementor's Vertical Alignment control and is
   now set to Middle on the widget itself rather than argued with here. And the
   value below started back at the card's own padding, 36px to the left of the
   heading, which left the card ragged down its left edge. That part is below. */
.gg-contactcard {
	/* The gutter the icon occupies: icon_size 20px + icon_space 16px, both set
	   in contact_detail() in src/gg/pages.py. Change them together. */
	--gg-cc-gutter: 36px;
}
/* The heading carries the theme's default 8px top margin, which made the box
   holding it 8px taller than the words in it. Centring the icon against that
   taller box then left it riding 4px high, which is the last of the drift. */
.gg-contactcard .elementor-icon-box-title { margin-top: 0; }

/* Every glyph gets the same 20px square, so the headings start at the same
   place however wide the glyph itself happens to draw. */
.gg-contactcard .elementor-icon-box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
}
.gg-contactcard .gg-contactcard__value,
.gg-contactcard .gg-contactcard__link {
	padding-left: var(--gg-cc-gutter);
}

/* -- 8. Forms ------------------------------------------------------------- */
.gg-form { display: grid; gap: 18px; }
.gg-form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .gg-form__row { grid-template-columns: 1fr; } }

.gg-form__field { display: flex; flex-direction: column; gap: 7px; }
.gg-form__label {
	font: 600 16px/1.4 var(--gg-font-body);
	color: var(--gg-dark);
}
.gg-form__control {
	font: 400 17px/1.5 var(--gg-font-body);
	color: var(--gg-text);
	background: var(--gg-white);
	border: 1px solid #C9D1C0;
	border-radius: var(--gg-radius-sm);
	padding: 14px 16px;
	min-height: var(--gg-tap);
	width: 100%;
	transition: border-color .18s var(--gg-ease), box-shadow .18s var(--gg-ease);
	appearance: none;
}
select.gg-form__control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235C6459' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 42px;
}
textarea.gg-form__control { min-height: 140px; resize: vertical; }
.gg-form__control:hover { border-color: var(--gg-sage); }
.gg-form__control:focus {
	outline: none;
	border-color: var(--gg-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gg-primary) 26%, transparent);
}
.gg-form__control:focus-visible {
	outline: var(--gg-ring) solid var(--gg-dark);
	outline-offset: 2px;
}
.gg-form__note { font-size: 15px; color: var(--gg-muted); margin: 0; }
.gg-form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.gg-form__submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 58px; padding: 18px 34px;
	background: var(--gg-primary); color: #fff;
	border: 2px solid var(--gg-primary);
	border-radius: var(--gg-radius-sm);
	font: 600 17px/1.15 var(--gg-font-head);
	cursor: pointer;
	transition: background-color .2s var(--gg-ease), transform .2s var(--gg-ease);
}
.gg-form__submit:hover { background: var(--gg-primary-dark); border-color: var(--gg-primary-dark); transform: translateY(-2px); }
.gg-form__submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.gg-form--stretch .gg-form__submit { width: 100%; }

.gg-form__message {
	border-radius: var(--gg-radius-sm);
	padding: 16px 18px;
	font-size: 17px;
	line-height: 1.55;
}
.gg-form__message--ok    { background: #EAF1DE; border: 1px solid var(--gg-sage); color: #2C3A18; }
.gg-form__message--error { background: #FBEAEA; border: 1px solid #C9756F; color: #7A2620; }
.gg-form__error { font-size: 15px; color: #A33228; }
.gg-form__control[aria-invalid="true"] { border-color: #A33228; }

/* -- 9. Footer + sticky mobile bar ---------------------------------------- */
.gg-footer__title .elementor-heading-title { font-size: 17px; letter-spacing: .2px; }
.gg-footer__links .elementor-icon-list-icon { font-size: 11px; }
.gg-footer__links .elementor-icon-list-text { font-size: 16px; }
.gg-footer__links a { transition: color .18s var(--gg-ease); }
.gg-footer__links a:hover .elementor-icon-list-text { color: #fff; }
.gg-footer__hours p { margin: 0; }
.gg-footer__social .elementor-social-icon {
	background: rgba(255,255,255,.10);
	transition: background-color .2s var(--gg-ease);
}
.gg-footer__social .elementor-social-icon:hover { background: var(--gg-primary); }
.gg-footer__tel .elementor-button { min-height: 50px; padding: 13px 22px; }
.gg-footer__legal-links .elementor-icon-list-text { font-size: 15px; }
.gg-footer__socialnote p { margin: 0; font-size: 13px; line-height: 1.5; }

/* Elementor drives container positioning through --position, and `.e-con`
   sets it to relative. Matching its specificity with .e-con.gg-stickybar is
   cleaner than an !important. */
.e-con.gg-stickybar { --position: fixed; }
.gg-stickybar {
	left: 0; right: 0; bottom: 0;
	box-shadow: 0 -6px 24px -14px rgba(0,0,0,.7);
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.gg-stickybar .gg-stickybar__btn { flex: 1 1 0; }
.gg-stickybar .elementor-button {
	width: 100%;
	min-height: var(--gg-tap);
	padding: 13px 12px;
	font-size: 16px;
}
/* Keep the sticky bar from covering the end of the page. */
@media (max-width: 767px) {
	body { padding-bottom: 76px; }
}

/* -- 10. Motion + print --------------------------------------------------- */
/* Reveal on scroll. gg-motion.js adds .gg-anim, so with JavaScript off nothing
   is ever hidden, and it skips the whole thing when the OS asks for less
   movement. The slide uses the standalone `translate` property rather than
   `transform` so it cannot fight the hover lift on a card. */
.gg-anim {
	opacity: 0;
	translate: 0 16px;
	transition: opacity .6s var(--gg-ease), translate .6s var(--gg-ease);
	transition-delay: var(--gg-delay, 0ms);
}
.gg-anim--in { opacity: 1; translate: none; }

/* Small pieces travel less than big ones, or the page looks like it is sliding
   about rather than settling. Each of these has to exclude the arrived state:
   two class names outrank the single .gg-anim--in, so without the :not() they
   would go on holding the block down after it had been revealed. */
.gg-card.gg-anim:not(.gg-anim--in),
.gg-valuecard.gg-anim:not(.gg-anim--in),
.gg-step.gg-anim:not(.gg-anim--in) { translate: 0 22px; }
.gg-section-head.gg-anim:not(.gg-anim--in) { translate: 0 12px; }
/* Inside the strip the travel is shorter, so a card is not sliding up from
   behind the scrollbar. */
.gg-scroller .gg-card.gg-anim:not(.gg-anim--in) { translate: 0 14px; }

/* The card icon gets a little life on hover, matching the arrow on the button
   below it. */
.gg-card__icon .elementor-icon {
	transition: transform .25s var(--gg-ease), background-color .25s var(--gg-ease);
}
.gg-card:hover .gg-card__icon .elementor-icon {
	transform: translateY(-2px) rotate(-4deg);
	background: color-mix(in srgb, var(--gg-sage) 30%, transparent);
}

/* Honour the OS "reduce motion" setting: kill Elementor entrance animations,
   hover lifts and smooth scrolling for anyone who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.gg-card:hover,
	.gg-btn .elementor-button:hover { transform: none; }
	.gg-card:hover .gg-card__img img { transform: none; }
	.elementor-invisible { visibility: visible !important; opacity: 1 !important; }
	.gg-anim { opacity: 1 !important; translate: none !important; }
	.e-con.gg-scroller { scroll-snap-type: none; }
	.gg-scrollbtn:hover:not(:disabled) { transform: translateY(-50%); }
	.gg-card:hover .gg-card__icon .elementor-icon { transform: none; }
}

/* Older visitors often print a page to keep the phone number. Make that work. */
@media print {
	.gg-header, .gg-stickybar, .gg-chipbar, .gg-mapslot { display: none !important; }
	body { padding-bottom: 0; color: #000; }
	.gg-cta, .gg-stepsband, .gg-mission, .gg-footer {
		background: none !important; color: #000 !important;
	}
	.gg-cta *, .gg-stepsband *, .gg-mission *, .gg-footer * { color: #000 !important; }
	a[href^="tel:"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 12px; }
}

/* ==========================================================================
   11. Blog
   The archive, single posts and search results are WordPress templates rather
   than Elementor documents, so they are styled here.

   Note the selector weights. The Elementor kit styles bare elements sitewide
   (`.elementor-kit-N h2`, `.elementor-kit-N a`), and its stylesheet loads
   after this one, so a plain `.gg-postcard__title` ties and loses. Every rule
   below that fights a kit default carries one extra step of specificity.
   Colours still come from the same globals, so the blog follows the brand.
   ========================================================================== */

/* Hello Elementor caps the main column with
   `body:not([class*="elementor-page-"]) .site-main`, which is (0,2,1). The
   blog templates paint full-bleed bands and constrain their own inner wrapper
   instead, so that cap has to come off, and the selector has to match its
   weight to do it. */
main.site-main.gg-blog,
main.site-main.gg-article { max-width: none; margin-inline: 0; width: 100%; }

.gg-blog__inner,
.gg-article__inner {
	width: min(100%, 1200px);
	margin-inline: auto;
	padding-inline: 24px;
}
@media (max-width: 767px) {
	.gg-blog__inner,
	.gg-article__inner { padding-inline: 20px; }
}

/* -- Page headers --------------------------------------------------------- */
.gg-blog .gg-blog__header,
.gg-article .gg-article__header {
	background: var(--gg-light);
	padding: 72px 0 64px;
	border-bottom: 1px solid var(--gg-border);
}
.gg-blog .gg-blog__eyebrow,
.gg-article .gg-article__eyebrow {
	margin: 0 0 10px;
	color: var(--gg-primary);
	font-family: var(--gg-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}
.gg-blog .gg-blog__header .entry-title,
.gg-article .gg-article__header .entry-title { margin: 0; max-width: 22ch; }
.gg-blog .gg-blog__intro { margin: 14px 0 0; max-width: 62ch; color: var(--gg-muted); }
.gg-blog .gg-blog__searchform { margin-top: 20px; max-width: 460px; }
.gg-blog .gg-blog__searchform input[type="search"] {
	width: 100%;
	font: 400 17px/1.5 var(--gg-font-body);
	padding: 14px 16px;
	min-height: var(--gg-tap);
	border: 1px solid #C9D1C0;
	border-radius: var(--gg-radius-sm);
	background: var(--gg-white);
}
@media (max-width: 767px) {
	.gg-blog .gg-blog__header,
	.gg-article .gg-article__header { padding: 48px 0 44px; }
}

/* -- Archive grid --------------------------------------------------------- */
.gg-blog .gg-blog__body { padding: 72px 0 96px; background: var(--gg-white); }
@media (max-width: 767px) { .gg-blog .gg-blog__body { padding: 48px 0 64px; } }

.gg-blog .gg-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
@media (max-width: 1024px) { .gg-blog .gg-blog__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 767px)  { .gg-blog .gg-blog__grid { grid-template-columns: 1fr; gap: 20px; } }

.gg-blog .gg-postcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--gg-white);
	border: 1px solid var(--gg-border);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(28,28,28,.04);
	transition: transform .25s var(--gg-ease), box-shadow .25s var(--gg-ease),
	            border-color .25s var(--gg-ease);
}
.gg-blog .gg-postcard:hover {
	transform: translateY(-4px);
	border-color: var(--gg-sage);
	box-shadow: 0 18px 40px -22px rgba(28,28,28,.35);
}

.gg-blog .gg-postcard__media { display: block; overflow: hidden; line-height: 0; }
.gg-blog .gg-postcard__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .5s var(--gg-ease);
}
.gg-blog .gg-postcard:hover .gg-postcard__img { transform: scale(1.05); }
.gg-blog .gg-postcard__placeholder {
	display: block;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--gg-sage) 24%, var(--gg-light)), var(--gg-light));
}

.gg-blog .gg-postcard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding: 26px 26px 28px;
}
@media (max-width: 767px) { .gg-blog .gg-postcard__body { padding: 22px 20px 24px; } }

.gg-blog .gg-postcard__meta {
	margin: 0;
	font: 400 14px/1.4 var(--gg-font-body);
	color: var(--gg-muted);
	letter-spacing: .2px;
}
.gg-blog h2.gg-postcard__title {
	margin: 0;
	font-family: var(--gg-font-head);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.2px;
	color: var(--gg-dark);
}
.gg-blog .gg-postcard__title a {
	color: var(--gg-dark);
	text-decoration: none;
	font-size: inherit;
}
/* One tab stop per card: the title link covers the whole card. */
.gg-blog .gg-postcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gg-blog .gg-postcard:hover .gg-postcard__title a { color: var(--gg-primary); }
.gg-blog .gg-postcard__title a:focus-visible {
	outline: var(--gg-ring) solid var(--gg-dark);
	outline-offset: 4px;
	border-radius: 4px;
}

.gg-blog .gg-postcard__excerpt { color: var(--gg-muted); font-size: 16px; }
.gg-blog .gg-postcard__excerpt p { margin: 0; font-size: inherit; }

.gg-blog .gg-postcard__more {
	margin-top: auto;
	padding-top: 6px;
	font: 600 16px/1 var(--gg-font-head);
	color: var(--gg-primary);
}
.gg-blog .gg-postcard__more::after {
	content: " \2192";
	display: inline-block;
	transition: transform .2s var(--gg-ease);
}
.gg-blog .gg-postcard:hover .gg-postcard__more::after { transform: translateX(4px); }
.gg-blog .gg-blog__empty { color: var(--gg-muted); font-size: 18px; }

/* -- Pagination ----------------------------------------------------------- */
.gg-blog .gg-blog__pagination {
	display: flex; flex-wrap: wrap; gap: 8px;
	justify-content: center; margin-top: 56px;
}
.gg-blog .gg-blog__pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--gg-tap); min-height: var(--gg-tap);
	padding: 0 14px;
	border: 1px solid var(--gg-border);
	border-radius: var(--gg-radius-sm);
	font: 600 16px/1 var(--gg-font-head);
	color: var(--gg-dark);
	text-decoration: none;
}
.gg-blog .gg-blog__pagination .page-numbers:hover { border-color: var(--gg-sage); background: var(--gg-light); }
.gg-blog .gg-blog__pagination .page-numbers.current {
	background: var(--gg-primary); border-color: var(--gg-primary); color: #fff;
}

/* -- Single post ---------------------------------------------------------- */
.gg-article .gg-article__meta { margin: 14px 0 0; color: var(--gg-muted); font-size: 16px; }

.gg-article .gg-article__figure { background: var(--gg-light); }
.gg-article .gg-article__img {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: -36px auto 0;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--gg-radius-lg);
	box-shadow: 0 24px 60px -30px rgba(28,28,28,.4);
	position: relative;
}

.gg-article .gg-article__body { background: var(--gg-white); padding: 64px 0 80px; }
.gg-article .gg-article__measure {
	width: min(100%, 720px);
	margin-inline: auto;
	padding-inline: 24px;
	font-size: 18px;
	line-height: 1.75;
	color: var(--gg-text);
}
@media (max-width: 767px) {
	.gg-article .gg-article__body { padding: 44px 0 56px; }
	.gg-article .gg-article__measure { padding-inline: 20px; font-size: 17px; }
}

.gg-article .gg-article__measure > * + * { margin-top: 1.15em; }
.gg-article .gg-article__measure p { font-size: inherit; line-height: inherit; }
.gg-article .gg-article__measure h2 { font-size: 30px; line-height: 1.25; margin-top: 1.8em; }
.gg-article .gg-article__measure h3 { font-size: 23px; line-height: 1.3; margin-top: 1.6em; }
.gg-article .gg-article__measure h2:first-child,
.gg-article .gg-article__measure h3:first-child { margin-top: 0; }
.gg-article .gg-article__measure ul,
.gg-article .gg-article__measure ol { padding-left: 1.3em; }
.gg-article .gg-article__measure li + li { margin-top: .5em; }
.gg-article .gg-article__measure img { border-radius: var(--gg-radius); height: auto; }
.gg-article .gg-article__measure a {
	color: var(--gg-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gg-article .gg-article__measure blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--gg-sage);
	font-size: 21px;
	line-height: 1.55;
	color: var(--gg-dark);
}
.gg-article .gg-article__measure blockquote p:last-child { margin-bottom: 0; }
.gg-article .gg-article__tags { font-size: 15px; color: var(--gg-muted); }

/* -- Post call to action -------------------------------------------------- */
.gg-postcta { background: var(--gg-forest); padding: 64px 0; }
.gg-postcta__inner {
	width: min(100%, 720px);
	margin-inline: auto;
	padding-inline: 24px;
	text-align: center;
}
.gg-postcta h2.gg-postcta__title { color: #fff; margin: 0; font-size: 32px; line-height: 1.2; }
.gg-postcta .gg-postcta__text { color: #D8DED0; margin: 14px 0 0; font-size: 18px; }
.gg-postcta a.gg-postcta__btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 56px; margin-top: 24px; padding: 17px 32px;
	background: #fff; color: var(--gg-dark);
	border-radius: var(--gg-radius-sm);
	font: 600 17px/1.15 var(--gg-font-head);
	text-decoration: none;
	transition: background-color .2s var(--gg-ease), transform .2s var(--gg-ease);
}
.gg-postcta a.gg-postcta__btn:hover { background: var(--gg-sage); color: var(--gg-dark); transform: translateY(-2px); }
.gg-postcta a.gg-postcta__btn:focus-visible { outline: var(--gg-ring) solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
	.gg-postcta { padding: 48px 0; }
	.gg-postcta h2.gg-postcta__title { font-size: 26px; }
	.gg-postcta a.gg-postcta__btn { width: 100%; }
}

/* -- Comments ------------------------------------------------------------- */
.comments-area { width: min(100%, 720px); margin: 0 auto; padding: 56px 24px 72px; }
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
	width: 100%;
	font: 400 17px/1.5 var(--gg-font-body);
	padding: 13px 15px;
	border: 1px solid #C9D1C0;
	border-radius: var(--gg-radius-sm);
	background: var(--gg-white);
}
.comments-area input.submit {
	min-height: 52px; padding: 14px 28px;
	background: var(--gg-primary); color: #fff;
	border: 0; border-radius: var(--gg-radius-sm);
	font: 600 17px/1 var(--gg-font-head); cursor: pointer;
}
.comments-area input.submit:hover { background: var(--gg-primary-dark); }