@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

/* ==========================================================================
   Gee-Pinnacle brand variables
   Exact hex codes sampled directly from her real logo file (logo1-1.jpg)
   via pixel color-frequency analysis — pixel-perfect match to the logo.
   ========================================================================== */
:root {
	--gp-green: #006634;      /* primary brand green (house + "Gee-Pinnacle" text) */
	--gp-green-dark: #004d27; /* hover/darker shade of green */
	--gp-green-mid: #029834;  /* secondary logo green (chevron stripe) */
	--gp-green-bright: #00BA00; /* bright accent green (middle chevron stripe) */
	--gp-orange: #FF7500;     /* accent brand orange (top chevron + "Global Resources Ltd." text) */
	--gp-orange-dark: #cc5e00;/* hover/darker shade of orange */
	--gp-ink: #1A1A1A;        /* near-black for headings/body text — mature, not pure black */
	--gp-charcoal: #3A3A3A;   /* secondary text color */
	--gp-bg: #FFFFFF;         /* page background */
	--gp-bg-soft: #F7F8F7;    /* soft section background for alternating rows */
	--gp-border: #E6E8E6;     /* subtle border/divider color */
}

/* ==========================================================================
   Base typography — simple, mature, generous spacing
   ========================================================================== */
body {
	color: var(--gp-ink);
	font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	line-height: 1.65;
	background-color: var(--gp-bg);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--gp-ink);
	font-family: "Poppins", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

p {
	color: var(--gp-charcoal);
}

a {
	color: var(--gp-green);
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--gp-green-dark);
}

/* ==========================================================================
   Buttons — primary (green) and accent (orange) call-to-actions
   ========================================================================== */
.elementor-button,
.gp-btn,
button[type="submit"],
input[type="submit"] {
	background-color: var(--gp-green);
	border-color: var(--gp-green);
	color: #FFFFFF;
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.elementor-button:hover,
.gp-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--gp-green-dark);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.gp-btn-accent,
.elementor-button.gp-btn-accent {
	background-color: var(--gp-orange);
	border-color: var(--gp-orange);
}

.gp-btn-accent:hover {
	background-color: var(--gp-orange-dark);
}

.gp-btn-outline {
	background-color: transparent;
	border: 2px solid var(--gp-green);
	color: var(--gp-green);
}

.gp-btn-outline:hover {
	background-color: var(--gp-green);
	color: #FFFFFF;
}

/* The theme's global floating "scroll to top" circle (bottom-right, every
   page) defaults to the theme's teal accent -- switch it to our brand green. */
.scroll-top {
	background-color: var(--gp-green) !important;
	background-image: none !important;
}

/* ==========================================================================
   Sections — clean, generous whitespace, subtle alternating backgrounds
   ========================================================================== */
.gp-section {
	padding: 110px 0;
}

.gp-section-soft {
	background-color: var(--gp-bg-soft);
}

.gp-section-divider {
	border-top: 1px solid var(--gp-border);
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header,
#masthead {
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--gp-border);
}

/* ==========================================================================
   Global site header — green at top of page, white once you scroll.
   The green/white background swap and the sticky behavior itself are
   turned on in Theme Options (Header Background Color / Sticky Background
   Color / Sticky Header). This CSS only handles the extra polish:
   the "Apply Now" button style, and hiding the secondary nav links once
   the header goes into its compact white "scrolled" state.
   ========================================================================== */

/* Force the green-at-top / white-on-scroll header background at every
   screen size, including mobile. The theme's own Header Background Color
   setting (Theme Options) was only actually reaching the header on
   desktop -- on mobile the header stayed permanently white regardless of
   scroll position, which also made the white "Gee-Pinnacle" logo text
   invisible (white text on a white bar). This bypasses that setting
   entirely with a plain, reliable CSS rule instead. */
#ct-header-wrap #ct-header:not(.h-fixed) {
	background-color: var(--gp-green) !important;
}
#ct-header-wrap #ct-header.h-fixed {
	background-color: #FFFFFF !important;
}

/* Native theme header button ("Apply Now") — force our brand orange, always */
#ct-header-wrap .ct-header-button .btn.btn-default,
#ct-header-wrap .ct-header-button-mobile .btn.btn-default {
	background-color: var(--gp-orange) !important;
	border-color: var(--gp-orange) !important;
	color: #FFFFFF !important;
	border-radius: 999px;
	font-weight: 700;
	padding: 10px 26px;
}

#ct-header-wrap .ct-header-button .btn.btn-default:hover,
#ct-header-wrap .ct-header-button-mobile .btn.btn-default:hover {
	background-color: var(--gp-orange-dark) !important;
	border-color: var(--gp-orange-dark) !important;
}

/* Phone number nav item — add this exact class ("gp-nav-phone") to the
   phone menu item's "CSS Classes" field in Appearance > Menus.
   The icon itself is added as a real <i class="flaticon-telephone">
   element via functions.php (gp_add_phone_icon_to_nav_item) -- a CSS
   ::before attempt here first failed for two confirmed reasons: the
   site only has Font Awesome 5 Pro loaded (not "Free"), and a theme
   rule was separately forcing ::before content back to empty. Using a
   real element sidesteps both. */
#ct-header-wrap .ct-main-menu > li.gp-nav-phone > a {
	font-weight: 600;
	pointer-events: none; /* plain text, not clickable as a nav link look */
	cursor: default;
	display: inline-flex;
	align-items: center;
}
#ct-header-wrap .ct-main-menu > li.gp-nav-phone .gp-nav-phone-icon {
	margin-right: 8px;
	font-size: 0.95em;
}

/* On the compact white "scrolled" header, hide the secondary links —
   add the exact class ("gp-nav-extra") to About Us / Services / Contact
   etc. in Appearance > Menus so only Home + phone + Apply Now remain. */
#ct-header.h-fixed .ct-main-menu > li.gp-nav-extra {
	display: none;
}

/* New logo lockup: one icon image + real HTML text (see the child theme's
   template-parts/header-branding.php override). The text color just
   follows the header state via plain CSS below — no more swapping
   between two whole logo images, which kept breaking. */
#ct-header-wrap .ct-header-branding {
	margin: 10px 15px;
	display: flex;
	align-items: center;
}
.gp-logo-lockup {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	text-decoration: none;
}
.gp-logo-icon-img {
	height: 44px;
	width: auto;
	display: block;
	transition: height 0.2s ease;
}
.gp-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	white-space: nowrap;
	margin-top: 10px;
}
.gp-logo-text-primary {
	font-family: "Poppins", "Inter", sans-serif;
	font-weight: 800;
	font-size: 1.2rem;
	color: #FFFFFF !important;
	transition: color 0.2s ease;
}
.gp-logo-text-secondary {
	font-family: "Poppins", "Inter", sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	color: var(--gp-orange) !important;
}
#ct-header-wrap #ct-header.h-fixed .gp-logo-icon-img {
	height: 36px;
}
#ct-header-wrap #ct-header.h-fixed .gp-logo-text-primary {
	color: var(--gp-green-dark) !important;
}

/* Defensive: hide the theme's mobile-only duplicate phone/button blocks
   on desktop widths — one of these was showing up as a stray floating
   phone icon disconnected from the actual nav phone number. */
@media (min-width: 783px) {
	#ct-header-wrap .ct-header-holder-mobile,
	#ct-header-wrap .ct-header-button-mobile {
		display: none !important;
	}
}

/* Our own logo (icon + "Gee-Pinnacle / Global Resources Ltd." text, from
   header-branding.php) already shows at every screen size. The theme
   separately renders its OWN second logo image just for the mobile nav
   panel (.ct-logo-mobile / .logo-mobile, using whatever raw logo file
   is set as the theme's "mobile logo") -- that's the second, boxed
   logo showing next to ours on phones. Hide it everywhere, not just on
   desktop, so only one logo ever shows. */
#ct-header-wrap .ct-logo-mobile,
#ct-header-wrap .logo-mobile {
	display: none !important;
}

/* Remove the theme's own native header phone icon/block entirely — the
   one that swaps between black and white as the header scrolls between
   green and white. This is a separate, leftover element from theme
   demo content, not the same as our own "+234 816 619 3454" phone link
   in the main nav menu, which stays untouched. It's driven by the
   "Phone Number" field under Theme Options > Header > Contact Info;
   this rule hides it outright regardless of that field's state. */
.ct-header-call {
	display: none !important;
}

/* ==========================================================================
   Trust badges / stat highlights (used on homepage, about page)
   ========================================================================== */
.gp-highlight {
	color: var(--gp-orange);
	font-weight: 700;
}

.gp-badge {
	display: inline-block;
	background-color: var(--gp-bg-soft);
	border: 1px solid var(--gp-border);
	color: var(--gp-charcoal);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 0.85rem;
	font-weight: 600;
}

/* ==========================================================================
   Custom homepage template (template-homepage.php)
   ========================================================================== */

/* Hide the theme's default page-title banner on the custom homepage only.
   Fixed: this was previously missing WordPress's actual "-php" class
   suffix, and pointed at the old drafted page (ID 8) instead of the real
   live homepage (ID 4928) -- so it never actually matched, and the empty
   white title bar has been rendering above the hero this whole time. That
   thin blank bar is what showed as a white gap after the header, most
   visible on mobile where it doesn't blend in next to a wide hero. */
body.page-template-template-homepage-php #pagetitle,
body.page-id-4928 #pagetitle {
	display: none;
}

/* NOTE: the #content.site-content padding-top:0 fix for the white gap
   moved into the mobile media query below (scoped to max-width:782px).
   It was originally applied here with no width limit, which also
   stripped the same padding on desktop -- desktop's sticky header then
   had nothing separating it from the hero text, so on even a tiny
   scroll the header would overlap and clip the first line ("cut off
   some of the words"). Desktop never had a white-gap complaint to begin
   with, so it keeps the theme's original spacing untouched now. */

/* Force every one of our full-bleed sections back to true full width.
   This page still carries leftover Elementor page settings from briefly
   opening the Elementor editor earlier -- Elementor keeps enqueuing a
   small page-specific stylesheet that applies its own content-width cap
   to plain <section> elements, which was squeezing everything after the
   hero into a narrow left column. The !important here beats that
   regardless of which loads first or how specific it is. */
.gp-home > section,
main.gp-home section.gp-section,
main.gp-home section.gp-hero,
main.gp-home section.gp-why-us,
main.gp-home section.gp-final-cta {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.gp-home .container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Widen the site's container everywhere (not just the homepage) on large
   screens -- 1200px left a big empty gutter on both sides on wide
   monitors, on every page (About Us, Services, Contact, Search...). This
   overrides the theme's own 1200px cap sitewide so all pages use more of
   the available width consistently. */
@media screen and (min-width: 1200px) {
	body .container {
		max-width: 1320px !important;
	}
}

/* Larger button size, used for hero + final CTA */
.gp-btn-lg {
	padding: 16px 32px;
	font-size: 1.05rem;
}

/* ---------- Hero ---------- */
.gp-hero {
	/* No padding on the section itself -- the text column carries its
	   own vertical padding below, while the photo column stretches to
	   match that same height exactly, so the photo runs edge-to-edge
	   top and bottom with no white gap above or below it. */
	padding: 0;
	text-align: left;
	background-color: var(--gp-bg);
	border-bottom: 1px solid var(--gp-border);
	overflow: hidden;
	position: relative;
}

/* Soft, blurred brand-color shapes sitting behind the text -- an
   experiment to see if it's worth keeping. Purely decorative, zero
   effect on layout: contained by .gp-hero's overflow:hidden, and
   z-index below the actual content so text/buttons/photo stay sharp
   on top. Delete this block (and .gp-hero-flex's z-index below) to
   fully remove it if it's not a keeper. */
.gp-hero::before,
.gp-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	z-index: 0;
	pointer-events: none;
}
.gp-hero::before {
	width: 460px;
	height: 460px;
	top: -80px;
	left: -100px;
	background: radial-gradient(circle, rgba(0, 102, 52, 0.45), rgba(0, 102, 52, 0) 70%);
}
.gp-hero::after {
	width: 420px;
	height: 420px;
	bottom: -140px;
	left: 8%;
	background: radial-gradient(circle, rgba(255, 117, 0, 0.35), rgba(255, 117, 0, 0) 70%);
}

/* Hero as a real two-column flex row: text on the left, photo bleeding
   all the way to the right edge of the browser and stretching the full
   height of the row. Every earlier attempt at this fought a false,
   too-narrow container width caused by the emi-loan-calculator plugin's
   print.css bug -- now that it's fixed, a plain flex row is all this
   needs. */
.gp-hero-flex {
	display: flex;
	align-items: stretch;
	width: 100%;
	position: relative;
	z-index: 1;
}

.gp-hero-inner {
	flex: 1 1 480px;
	/* content-box (not border-box) is deliberate here: padding-left grows
	   on wide screens to line the text up with the site's 1200px
	   container, and with border-box that growing padding was eating
	   into the 600px cap below -- the readable text area actually got
	   NARROWER as the window got WIDER, forcing the headline to wrap
	   onto 3 lines and dumping all the freed-up space onto the photo.
	   With content-box, max-width describes the text area only, so it
	   always gets its full 600px no matter how wide the left padding is. */
	max-width: 600px;
	box-sizing: content-box;
	padding-top: 120px;
	padding-bottom: 100px;
	padding-right: 32px;
	/* Lines the text up with the same left edge every other section's
	   centered container uses (now 1320px, see the .container rule
	   above), on any screen width. */
	padding-left: max(24px, calc((100vw - 1320px) / 2 + 24px));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gp-hero-media {
	flex: 1 1 460px;
	position: relative;
	min-height: 420px;
}

/* Rotating hero photo carousel -- 4 images stacked exactly on top of
   each other (all position:absolute inset:0 inside .gp-hero-media,
   which is position:relative), cross-fading via opacity. Only
   .is-active is visible at any time; the small script at the bottom
   of template-homepage.php swaps which one has that class every 5
   seconds and keeps the dots below in sync. */
.gp-hero-slide {
	/* Fills the .gp-hero-media column exactly -- edge to edge, top and
	   bottom, cropping (not squashing) to cover it fully. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(0, 51, 25, 0.18);
	border: 6px solid #fff;
	box-sizing: border-box;
	/* Defensive override: images load successfully (confirmed via
	   Network tab, status 200) but were rendering invisible -- almost
	   certainly a site lazy-load script that fades images in via a
	   "loaded" class and is failing silently (matching JS console
	   errors from other plugins on this page). Forcing these two off
	   bypasses that regardless of whether the class ever gets added;
	   opacity itself is still controlled below for the crossfade. */
	visibility: visible !important;
	filter: none !important;
	opacity: 0;
	z-index: 0;
	/* Drops down from above into place, easing to a gentle stop -- the
	   first time the photo column scrolls into view. Toggled once by
	   the IntersectionObserver script, which adds .gp-in-view to the
	   parent .gp-hero-media (not to individual slides, so the same
	   entrance applies no matter which slide is showing at the time). */
	transform: translateY(-130px) scale(0.94);
	transition: opacity 1200ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.gp-hero-media.gp-in-view .gp-hero-slide {
	transform: translateY(0) scale(1);
}

.gp-hero-slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Pagination dots, centered over the bottom edge of the photo. */
.gp-hero-dots {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 2;
}

.gp-hero-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: all 300ms ease;
}

.gp-hero-dot:hover {
	background: rgba(255, 255, 255, 0.8);
}

.gp-hero-dot.is-active {
	width: 26px;
	border-radius: 5px;
	background: #fff;
}

.gp-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gp-green);
	margin-bottom: 16px;
}

.gp-hero-title {
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	line-height: 1.12;
	margin: 0 0 28px;
	max-width: 820px;
}

.gp-hero-title-accent {
	color: var(--gp-green);
}

.gp-hero-sub {
	font-size: 1.2rem;
	color: var(--gp-charcoal);
	max-width: 560px;
	margin-bottom: 40px;
}

.gp-hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------- Trust strip / value props (4-column icon row) ----------
   Richer, more premium treatment: soft brand-tinted gradient behind
   the whole strip, each item lifted into its own elevated white card,
   bigger icon badges with a subtle glow, and bolder/darker headings
   for readability. ---------- */
.gp-trust-strip {
	padding: 72px 24px;
	background:
		radial-gradient(circle at 10% 15%, rgba(0, 102, 52, 0.08), transparent 45%),
		radial-gradient(circle at 90% 85%, rgba(255, 117, 0, 0.07), transparent 45%),
		linear-gradient(180deg, #fbfbf7 0%, #f6f7f2 100%);
}

.gp-value-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	text-align: left;
}

/* The theme's Bootstrap-style ".container" clearfix (content:" "; display:table;)
   normally does nothing visible, but on a CSS Grid container it becomes a real
   grid item and silently eats the first column -- pushing every real item over
   by one slot and wrapping the last one onto its own row. Cancel it here only. */
.gp-value-grid::before,
.gp-value-grid::after {
	content: none;
	display: none;
}

.gp-value-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #ffffff;
	border: 1px solid rgba(0, 102, 52, 0.08);
	border-radius: 16px;
	padding: 28px 24px 30px;
	box-shadow: 0 10px 28px rgba(11, 31, 20, 0.06);
	transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}

.gp-value-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(11, 31, 20, 0.1);
}

.gp-value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(0, 102, 52, 0.1), rgba(255, 117, 0, 0.08));
	color: var(--gp-green);
	font-size: 2.1rem;
	margin-bottom: 6px;
}

.gp-value-item h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: #0b1f14;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}

.gp-value-item p {
	font-size: 0.97rem;
	line-height: 1.6;
	color: #4a564e;
	margin: 0;
}

/* Legacy numeric trust stat classes (kept in case a stats row is added later) */
.gp-trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: center;
}

.gp-trust-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gp-trust-number {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--gp-orange);
}

.gp-trust-label {
	color: var(--gp-charcoal);
	font-weight: 600;
}

/* ---------- About snippet ---------- */
/* Scoped to just the About section (not the other two sections sharing
   .gp-section-soft) so "How It Works" and "Testimonials" are unaffected. */
.gp-about-section {
	background:
		radial-gradient(circle at 8% 20%, rgba(0, 102, 52, 0.07), transparent 45%),
		radial-gradient(circle at 92% 80%, rgba(255, 117, 0, 0.06), transparent 45%),
		var(--gp-bg-soft);
}

.gp-about-inner {
	max-width: 780px;
	text-align: center;
	margin: 0 auto;
}

.gp-about-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--gp-orange);
	margin-bottom: 14px;
}

.gp-about-inner h2 {
	font-weight: 700;
	color: #0b1f14;
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
	margin-bottom: 22px;
}

.gp-about-inner p {
	margin-bottom: 32px;
	font-size: 1.2rem;
	line-height: 1.75;
	font-weight: 500;
	color: #333d36;
}

/* ---------- Section heading (shared) ---------- */
.gp-section-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

/* ---------- Services grid ---------- */
.gp-services-section {
	background:
		radial-gradient(circle at 90% 5%, rgba(0, 102, 52, 0.1), transparent 50%),
		radial-gradient(circle at 8% 15%, rgba(255, 117, 0, 0.08), transparent 45%),
		radial-gradient(circle at 50% 100%, rgba(0, 102, 52, 0.06), transparent 55%),
		linear-gradient(180deg, #fbfbf7 0%, #f5f8f5 100%);
}

.gp-services-eyebrow {
	display: block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--gp-orange);
	margin-bottom: 10px;
}

.gp-services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.gp-service-card {
	background-color: #FFFFFF;
	border: 1px solid var(--gp-border);
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 8px 24px rgba(11, 31, 20, 0.05);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.gp-service-card:hover {
	box-shadow: 0 20px 40px rgba(11, 31, 20, 0.1);
	transform: translateY(-6px);
	border-color: rgba(0, 102, 52, 0.25);
}

.gp-service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(0, 102, 52, 0.1), rgba(255, 117, 0, 0.08));
	font-size: 1.9rem;
	margin-bottom: 18px;
}

.gp-service-icon i {
	color: var(--gp-green) !important;
}

.gp-service-card h3 {
	margin: 0 0 12px;
	font-size: 1.2rem;
	font-weight: 700;
	color: #0b1f14;
}

.gp-service-card p {
	margin-bottom: 16px;
	font-size: 1.02rem;
	line-height: 1.65;
	color: #333d36;
}

.gp-service-card a {
	font-weight: 700;
	color: var(--gp-green);
}

/* ---------- How it works steps ---------- */
.gp-how-section {
	background:
		radial-gradient(circle at 15% 10%, rgba(0, 102, 52, 0.08), transparent 45%),
		radial-gradient(circle at 85% 90%, rgba(255, 117, 0, 0.06), transparent 45%),
		var(--gp-bg-soft);
	position: relative;
	overflow: hidden;
}

.gp-how-eyebrow {
	display: block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--gp-orange);
	margin-bottom: 10px;
}

.gp-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	text-align: center;
	position: relative;
}

/* Connecting line running behind the 3 numbered circles, only wide enough
   to reach between them (desktop only -- mobile stacks vertically). */
@media (min-width: 783px) {
	.gp-steps-grid::before {
		content: "";
		position: absolute;
		top: 34px;
		left: calc(16.66% + 34px);
		right: calc(16.66% + 34px);
		height: 2px;
		background: repeating-linear-gradient(90deg, rgba(0, 102, 52, 0.35) 0 10px, transparent 10px 20px);
		z-index: 0;
	}
	.gp-step {
		position: relative;
		z-index: 1;
	}
}

.gp-step h3 {
	font-weight: 700;
	font-size: 1.25rem;
	color: #0b1f14;
	margin-top: 18px;
}

.gp-step p {
	font-size: 1.02rem;
	color: #333d36;
}

.gp-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gp-green), var(--gp-green-dark));
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.4rem;
	box-shadow: 0 10px 24px rgba(0, 102, 52, 0.3);
	margin-bottom: 16px;
}

.gp-step h3 {
	margin: 0 0 8px;
}

/* ---------- Why choose us (dark green, 3-card) ---------- */
.gp-why-us {
	background-color: var(--gp-green-dark);
	color: #FFFFFF;
}

.gp-why-us-heading {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 56px;
}

.gp-why-us h2,
.gp-why-us-heading p {
	color: #FFFFFF;
}

.gp-why-us-heading p {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 12px;
}

.gp-why-us-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.gp-why-us-card {
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 32px 28px;
}

.gp-why-us-card h3 {
	color: #FFFFFF;
	font-size: 1.15rem;
	margin: 0 0 12px;
}

.gp-why-us-card p {
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	font-size: 0.98rem;
}

.gp-why-us-cta {
	text-align: center;
	margin-top: 48px;
}

/* ---------- Testimonials (single featured quote for now) ---------- */
.gp-testimonial-section {
	background:
		radial-gradient(circle at 88% 15%, rgba(0, 102, 52, 0.08), transparent 45%),
		radial-gradient(circle at 10% 85%, rgba(255, 117, 0, 0.06), transparent 45%),
		var(--gp-bg-soft);
}

.gp-testimonial-eyebrow {
	display: block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--gp-orange);
	margin-bottom: 10px;
}

.gp-testimonial-single {
	max-width: 760px;
	margin: 0 auto;
	background-color: #FFFFFF;
	border-radius: 20px;
	padding: 56px 60px;
	text-align: center;
	box-shadow: 0 20px 48px rgba(11, 31, 20, 0.08);
	position: relative;
}

.gp-quote-mark {
	display: inline-block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5rem;
	line-height: 1;
	color: var(--gp-green);
	opacity: 0.18;
	margin-bottom: -10px;
}

.gp-testimonial-single blockquote {
	font-size: 1.15rem;
	font-style: italic;
	font-weight: 500;
	color: var(--gp-ink);
	margin: 0 0 26px;
	line-height: 1.75;
}

.gp-testimonial-author {
	font-weight: 700;
	color: var(--gp-green);
	font-size: 1.05rem;
	position: relative;
	padding-top: 18px;
}

.gp-testimonial-author::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gp-green), var(--gp-orange));
}

@media (max-width: 767px) {
	.gp-testimonial-single {
		padding: 40px 28px;
	}
}

/* ---------- Final CTA ---------- */
.gp-final-cta {
	text-align: center;
	background-image:
		radial-gradient(circle at 85% 15%, rgba(255, 117, 0, 0.28), transparent 55%),
		radial-gradient(circle at 10% 90%, rgba(0, 186, 0, 0.15), transparent 50%),
		linear-gradient(160deg, #003d1f 0%, #00170c 100%);
	position: relative;
	overflow: hidden;
}

.gp-final-cta-inner {
	max-width: 560px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.gp-final-cta h2 {
	color: #FFFFFF;
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	margin-bottom: 14px;
}

.gp-final-cta p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.1rem;
	margin-bottom: 28px;
}

.gp-final-cta .gp-btn-accent {
	box-shadow: 0 14px 30px rgba(255, 117, 0, 0.35);
}

.gp-final-cta .gp-btn-accent:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(255, 117, 0, 0.45);
}

/* ==========================================================================
   Loan portal (register / login / apply / dashboard) — [gp_loan_portal]
   ========================================================================== */
.gp-portal-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px;
}

.gp-portal-message {
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 24px;
	font-weight: 600;
}
.gp-portal-message-success {
	background-color: #E8F5EC;
	color: var(--gp-green-dark);
	border: 1px solid var(--gp-green);
}
.gp-portal-message-error {
	background-color: #FDEDEA;
	color: #B3261E;
	border: 1px solid #E7A69B;
}

.gp-portal-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.gp-portal-col h3 {
	margin-bottom: 16px;
	font-size: 1.1rem;
}

.gp-portal-wrap form p {
	margin-bottom: 16px;
}

.gp-portal-wrap label {
	display: block;
	font-weight: 600;
	color: var(--gp-ink);
	margin-bottom: 6px;
	font-size: 0.92rem;
}

.gp-portal-wrap input[type="text"],
.gp-portal-wrap input[type="email"],
.gp-portal-wrap input[type="password"],
.gp-portal-wrap input[type="number"],
.gp-portal-wrap input[type="date"],
.gp-portal-wrap textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--gp-border);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
}

.gp-portal-welcome {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gp-border);
}

.gp-loan-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 24px 0;
}

.gp-loan-stat {
	background-color: var(--gp-bg-soft);
	border: 1px solid var(--gp-border);
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gp-loan-label {
	font-size: 0.85rem;
	color: var(--gp-charcoal);
	font-weight: 600;
}

.gp-loan-value {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--gp-ink);
}

.gp-loan-value.gp-loan-balance {
	color: var(--gp-orange);
}

.gp-loan-progress {
	background-color: var(--gp-bg-soft);
	border-radius: 999px;
	height: 14px;
	overflow: hidden;
	margin-top: 8px;
}

.gp-loan-progress-bar {
	background-color: var(--gp-green);
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

.gp-loan-progress-label {
	text-align: right;
	font-size: 0.85rem;
	color: var(--gp-charcoal);
	margin-top: 6px;
}

.gp-repayment-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
}

.gp-repayment-table th,
.gp-repayment-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--gp-border);
}

.gp-repayment-table th {
	font-size: 0.85rem;
	color: var(--gp-charcoal);
	font-weight: 700;
}

@media (max-width: 782px) {
	.gp-portal-tabs,
	.gp-loan-summary {
		grid-template-columns: 1fr;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.gp-hero-flex {
		flex-direction: column;
	}
	.gp-hero-inner {
		/* Explicit order guarantees the text always renders first, above
		   the photo, no matter what. */
		order: 1;
		max-width: 100%;
		/* border-box here (overriding the content-box set on desktop) --
		   mobile's padding is small and fixed, not the growing formula,
		   so adding it on top of 100% width would overflow the screen. */
		box-sizing: border-box;
		padding: 12px 20px 24px;
		/* The desktop rule centers this vertically, which made sense
		   sitting next to a tall photo. Stacked alone above the photo on
		   mobile, centering just pushed the text down with empty space
		   above it -- that was the real cause of the big gap, not the
		   padding. Starting it at the top instead puts the text right
		   under the header. */
		justify-content: flex-start;
	}
	.gp-hero-media {
		order: 2;
		max-width: 100%;
		/* Sized by its own proportions instead of a flat min-height, so
		   it can never show up as a big empty gap on its own. */
		min-height: 0;
		aspect-ratio: 4 / 3;
		flex: none;
		width: 100%;
		margin: 0;
	}

	/* Belt-and-braces close-up of the two empty white bands reported on
	   mobile: one between the header and "CREDIT THAT MOVES..." text, one
	   between the buttons and the photo. Forces every spacing property on
	   the hero's own box and its two columns to exactly what's needed,
	   nothing left to an inherited/leftover value. */
	.gp-hero {
		padding: 0 !important;
		margin: 0 !important;
		/* The two glow circles below fade to fully transparent well before
		   their own edges (that's what a 50px blur + radial-gradient does),
		   so the strip right under the header -- outside their solid
		   center -- was never actually getting any color, no matter how
		   they were resized/repositioned. This continuous wash sits behind
		   them as a base layer so every pixel from the header down has at
		   least a faint tint, closing that gap for good. */
		background: linear-gradient(
			180deg,
			rgba(0, 102, 52, 0.12) 0%,
			rgba(0, 102, 52, 0.03) 18%,
			rgba(255, 255, 255, 0) 45%,
			rgba(255, 117, 0, 0.03) 70%,
			rgba(255, 117, 0, 0.1) 100%
		) !important;
	}
	.gp-hero-flex {
		margin: 0 !important;
		gap: 0 !important;
	}
	.gp-hero-inner {
		margin: 0 !important;
		/* A bit more breathing room than the bare-minimum 20px this was
		   set to while we were chasing the white-gap bug -- that made it
		   feel cramped right against the header once the real 90px gap
		   (from #content below) was found and fixed. This is comfortable
		   spacing without reintroducing an actual empty gap. */
		padding-top: 36px !important;
		padding-bottom: 20px !important;
	}
	.gp-hero-actions {
		margin-bottom: 0 !important;
	}
	/* The real fix for the white gap: the parent theme's #content wrapper
	   has a flat, unconditional padding: 90px 0 (theme.css) completely
	   outside of .gp-hero -- confirmed via DevTools. Scoped to mobile
	   only here; desktop keeps that spacing since the sticky header needs
	   it as clearance (removing it sitewide caused the header to overlap
	   and clip the hero text on desktop scroll). */
	body.page-template-template-homepage-php #content.site-content,
	body.page-id-4928 #content.site-content {
		padding-top: 0 !important;
	}
	/* Keep the soft green/orange decorative glow -- just resize and
	   reposition the two blobs so they actually stretch across the whole
	   (much taller, stacked) mobile hero instead of staying pinned to
	   their desktop corner spots, which is what was leaving plain white
	   showing between them. Percentage-based "top" on the second one so
	   it lands roughly at the buttons-to-photo transition regardless of
	   exactly how tall the text block ends up being. */
	.gp-hero::before {
		width: 90vw;
		height: 90vw;
		top: -20vw;
		left: -30vw;
	}
	.gp-hero::after {
		width: 90vw;
		height: 90vw;
		top: 55%;
		bottom: auto;
		left: -20vw;
		transform: translateY(-50%);
	}
	.gp-trust-grid,
	.gp-services-grid,
	.gp-steps-grid,
	.gp-testimonial-grid,
	.gp-why-us-grid {
		grid-template-columns: 1fr;
	}
	.gp-value-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Tighter, more compact rhythm site-wide on mobile -- less dead air
	   between sections and between a heading and the content under it,
	   matching the closer-together spacing style asked for. */
	.gp-section {
		padding: 56px 0;
	}
	.gp-trust-strip {
		padding: 40px 20px;
	}
	.gp-section-heading {
		margin: 0 auto 28px;
	}
	.gp-why-us-heading {
		margin: 0 auto 32px;
	}
	.gp-about-inner h2 {
		margin-bottom: 14px;
	}
	.gp-about-inner p {
		margin-bottom: 20px;
	}
	.gp-why-us-cta {
		margin-top: 28px;
	}
	.gp-final-cta p {
		margin-bottom: 20px;
	}
	.gp-value-grid,
	.gp-trust-grid,
	.gp-services-grid,
	.gp-steps-grid,
	.gp-testimonial-grid,
	.gp-why-us-grid {
		gap: 20px;
	}
}

/* ==========================================================================
   Contact page — Contact Form 7 styling
   (the actual layout/widgets live in Elementor, this just re-skins the
   form fields + button to match the brand instead of the default teal)
   ========================================================================== */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel {
	border: 1px solid var(--gp-border) !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus {
	border-color: var(--gp-green) !important;
	box-shadow: 0 0 0 3px rgba(0, 102, 52, 0.12);
	outline: none;
}
.wpcf7-submit,
input.wpcf7-submit {
	background-color: var(--gp-green) !important;
	border-color: var(--gp-green) !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	padding: 14px 36px !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.wpcf7-submit:hover,
input.wpcf7-submit:hover {
	background-color: var(--gp-green-dark) !important;
	border-color: var(--gp-green-dark) !important;
	transform: translateY(-2px);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--gp-green) !important;
	color: var(--gp-green) !important;
}

/* Fallback: in case this form is Elementor's native Form widget instead of
   Contact Form 7 -- scoped to .elementor-form so it can't affect any other
   Elementor button elsewhere on the site. */
/* Form card -- lifts the whole contact form off the page as a floating
   white panel instead of sitting flat against the background. */
.entry-content form {
	background-color: #FFFFFF;
	background-image: none;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 16px 40px rgba(11, 31, 20, 0.08);
	border: 1px solid var(--gp-border);
	max-width: 640px;
}

.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form textarea,
.elementor-form .elementor-field-textual,
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content textarea {
	border: 1px solid var(--gp-border) !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	background-color: var(--gp-bg-soft) !important;
	background-image: none !important;
}
.elementor-form input[type="text"]:focus,
.elementor-form input[type="email"]:focus,
.elementor-form input[type="tel"]:focus,
.elementor-form textarea:focus {
	border-color: var(--gp-green) !important;
	box-shadow: 0 0 0 3px rgba(0, 102, 52, 0.12);
	outline: none;
}
.elementor-form button[type="submit"],
.elementor-form .elementor-button,
.entry-content button[type="submit"] {
	background-color: var(--gp-green) !important;
	background-image: none !important;
	border-color: var(--gp-green) !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.elementor-form button[type="submit"]:hover,
.elementor-form .elementor-button:hover,
.entry-content button[type="submit"]:hover {
	background-color: var(--gp-green-dark) !important;
	background-image: none !important;
	transform: translateY(-2px);
}

/* Contact page header banner photo -- overrides the theme's per-page
   background setting directly since that admin panel isn't working
   correctly in the block editor. Page ID 19 = Contact page only. */
body.page-id-19 #pagetitle.page-title.bg-image {
	background-image: url('https://geepiglobalresourceslimited.com/wp-content/uploads/2026/08/contact-us-image-1.png') !important;
	background-size: cover !important;
	background-position: center top !important;
}

/* Contact page icon circles (Address/Phone/Email) -- the round teal
   background isn't exposed as an Elementor field, it's theme CSS, so we
   override it directly here. Scoped to Contact page only (page-id-19). */
body.page-id-19 .item--icon,
body.page-id-19 .item--icon-wrap,
body.page-id-19 .ct-fancy-box-icon {
	background-color: var(--gp-green) !important;
	background-image: none !important;
}

/* ==========================================================================
   About Us page (template-aboutus.php)
   ========================================================================== */
.gp-page-header {
	position: relative;
	padding: 100px 0 70px;
	text-align: center;
	background-image:
		linear-gradient(180deg, rgba(0,23,12,0.72), rgba(0,23,12,0.72)),
		url('https://geepiglobalresourceslimited.com/wp-content/uploads/2026/08/contact-us-image-1.png');
	background-size: cover;
	background-position: center top;
}
.gp-page-header h1 {
	color: #FFFFFF;
	font-size: clamp(2.2rem, 4vw, 3rem);
	margin-bottom: 10px;
}
.gp-page-header-crumb {
	color: rgba(255,255,255,0.8);
	margin: 0;
}
.gp-page-header-crumb a {
	color: #FFFFFF;
	text-decoration: none;
}

.gp-who-flex {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.gp-who-photo {
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 20px 48px rgba(11,31,20,0.12);
	display: block;
}
.gp-who-eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--gp-orange);
	margin-bottom: 10px;
}
.gp-who-copy h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	margin-bottom: 18px;
}
.gp-who-copy p {
	margin-bottom: 16px;
	color: var(--gp-charcoal);
}
@media (max-width: 782px) {
	.gp-who-flex {
		grid-template-columns: 1fr;
	}
}

.gp-mv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.gp-mv-card {
	background-color: #FFFFFF;
	border-radius: 16px;
	padding: 40px 36px;
	box-shadow: 0 12px 32px rgba(11,31,20,0.06);
	text-align: center;
}
.gp-mv-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gp-green), var(--gp-green-dark));
	margin-bottom: 18px;
}
.gp-mv-icon i {
	color: #FFFFFF !important;
	font-size: 28px;
}
.gp-mv-card h3 {
	margin-bottom: 10px;
}
.gp-mv-card p {
	color: var(--gp-charcoal);
	margin: 0;
}
@media (max-width: 782px) {
	.gp-mv-grid {
		grid-template-columns: 1fr;
	}
}

.gp-values-eyebrow {
	display: block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--gp-orange);
	margin-bottom: 10px;
}
.gp-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.gp-value-card {
	background-color: #FFFFFF;
	border: 1px solid var(--gp-border);
	border-radius: 16px;
	padding: 32px 28px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gp-value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(11,31,20,0.08);
}
.gp-value-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(0,102,52,0.12), rgba(255,117,0,0.10));
	margin-bottom: 16px;
}
.gp-value-card-icon i {
	color: var(--gp-green) !important;
	font-size: 24px;
}
.gp-value-card h3 {
	font-size: 1.1rem;
	margin-bottom: 8px;
}
.gp-value-card p {
	color: var(--gp-charcoal);
	margin: 0;
	font-size: 0.95rem;
}
@media (max-width: 992px) {
	.gp-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.gp-values-grid {
		grid-template-columns: 1fr;
	}
}

/* Hide the theme's automatic old page-title banner on the custom About Us
   template -- our own gp-page-header replaces it, so showing both stacked
   looks broken. WordPress auto-adds this template class to <body>. */
body.page-template-template-aboutus-php #pagetitle.page-title,
body.page-template-template-services-php #pagetitle.page-title,
body.search-results #pagetitle.page-title,
body.search-no-results #pagetitle.page-title {
	display: none !important;
}

/* ==========================================================================
   Search results page (search.php)
   ========================================================================== */
.gp-search-section {
	padding: 70px 0;
}
.gp-search-count {
	color: var(--gp-charcoal);
	margin-bottom: 30px;
	font-size: 1rem;
}
.gp-search-results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: 820px;
}
.gp-search-card {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	background-color: #FFFFFF;
	border: 1px solid var(--gp-border);
	border-radius: 14px;
	padding: 26px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gp-search-card:hover {
	box-shadow: 0 12px 30px rgba(11, 31, 20, 0.08);
	transform: translateY(-2px);
}
.gp-search-card-media {
	flex: 0 0 140px;
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
.gp-search-card-media img {
	width: 140px;
	height: 100px;
	object-fit: cover;
	display: block;
}
.gp-search-card-type {
	color: var(--gp-green);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	font-weight: 700;
	margin: 0 0 6px;
}
.gp-search-card-title {
	margin: 0 0 10px;
	font-size: 1.2rem;
}
.gp-search-card-title a {
	color: var(--gp-ink);
	text-decoration: none;
}
.gp-search-card-title a:hover {
	color: var(--gp-green);
}
.gp-search-card-excerpt {
	color: var(--gp-charcoal);
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 10px;
}
.gp-search-card-link {
	color: var(--gp-green);
	font-weight: 600;
	text-decoration: none;
}
.gp-search-card-link:hover {
	color: var(--gp-green-dark);
}
.gp-search-pagination {
	margin-top: 40px;
}
.gp-search-empty {
	max-width: 560px;
	padding: 40px 0;
}
.gp-search-empty h2 {
	margin-bottom: 10px;
}
.gp-search-empty p {
	color: var(--gp-charcoal);
	margin-bottom: 26px;
}
.gp-search-empty-links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
@media (max-width: 560px) {
	.gp-search-card {
		flex-direction: column;
	}
	.gp-search-card-media,
	.gp-search-card-media img {
		width: 100%;
		flex: none;
	}
}

@media (max-width: 560px) {
	.gp-value-grid {
		grid-template-columns: 1fr;
	}
}