/* 4Property homepage in native blocks: adapts fpx-home.css to core block markup. Loads after it. */
.fpx-native {
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2a4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
	--corner-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
	--tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath fill='%236cc5bf' d='M0 36V22C0 9 7 2 19 0l2 5c-7 2-10 6-10 13h9v18H0zm27 0V22C27 9 34 2 46 0l2 5c-7 2-10 6-10 13h9v18H27z'/%3E%3C/svg%3E");
}
.fpx-native :where(figure, .wp-block-image, .wp-block-video, .wp-block-buttons, .wp-block-button) { margin: 0; }
.fpx-native .wp-block-image img { display: block; }

/* Per-card accent and frame backgrounds (were inline styles) */
.fpx-c-sites { --c: #cd333b; } .fpx-c-ai { --c: #2fa79f; } .fpx-c-bids { --c: #fbac1b; }
.fpx-c-val { --c: #7759a5; } .fpx-c-nurture { --c: #2f6db5; } .fpx-c-market { --c: #e21666; }
.fpx-c-design { --c: #f26b2b; } .fpx-c-acquaint { --c: #db458e; } .fpx-c-ippi { --c: #0f2a4b; }
.fpx-bg-sites { --bg: url(/wp-content/uploads/2026/02/4sites-bg.png); }
.fpx-bg-val { --bg: url(/wp-content/uploads/2026/02/4valbg.png); }

/* Reveal and motion hooks (were data attributes) */
.fpx.fpx-js .fpx-reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.fpx.fpx-js .fpx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fpx.fpx-js .fpx-reveal { opacity: 1; transform: none; } }

/* Arrow links on core/button */
.fpx-native .fpx-actions { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; margin-top: 40px; }
.fpx-native .fpx-jon__meta .fpx-actions, .fpx-native .fpx-work__foot .fpx-actions { margin-top: 0; }
.fpx-native .fpx-go { display: inline-flex; width: auto; }
.fpx-native .fpx-go .wp-block-button__link {
	position: relative; display: inline-flex; align-items: center; min-height: 52px;
	padding: 6px 68px 6px 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
	background: linear-gradient(currentColor, currentColor) 0 calc(50% + 12px) / calc((100% - 68px) * .25) 2px no-repeat;
	font: 700 15px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; text-align: left;
	color: var(--navy); text-decoration: none; transition: background-size .45s var(--ease);
}
.fpx-native .fpx-go .wp-block-button__link::after {
	content: ""; position: absolute; right: 0; top: 50%; width: 52px; height: 52px; margin-top: -26px; box-sizing: border-box;
	border-radius: 50%; border: 1.5px solid currentColor;
	transition: background .35s var(--ease), border-color .35s var(--ease);
}
.fpx-native .fpx-go .wp-block-button__link::before {
	content: ""; position: absolute; z-index: 1; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
	background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
	transition: transform .45s var(--ease), background .35s var(--ease);
}
.fpx-native .fpx-go .wp-block-button__link:hover, .fpx-native .fpx-go .wp-block-button__link:focus-visible { background-size: calc(100% - 68px) 2px; }
.fpx-native .fpx-go .wp-block-button__link:hover::after { background: var(--teal); border-color: var(--teal); }
.fpx-native .fpx-go .wp-block-button__link:hover::before { background: var(--ink); transform: translateX(3px) rotate(-45deg); }
.fpx-native .fpx-go.is-solid .wp-block-button__link::after { background: var(--teal); border-color: var(--teal); }
.fpx-native .fpx-go.is-solid .wp-block-button__link::before { background: var(--ink); }
.fpx-native .fpx-go.is-solid .wp-block-button__link:hover::after { background: var(--navy); border-color: var(--navy); }
.fpx-native .fpx-go.is-solid .wp-block-button__link:hover::before { background: #fff; }
.fpx-native .fpx-go.is-light .wp-block-button__link, .fpx-native .fpx-hero .fpx-go.is-solid .wp-block-button__link { color: #fff; }
.fpx-native .fpx-hero .fpx-go.is-solid .wp-block-button__link:hover::after { background: #fff; border-color: #fff; }
.fpx-native .fpx-hero .fpx-go.is-solid .wp-block-button__link:hover::before { background: var(--navy); }

/* Hero */
.fpx-native .fpx-tablet__tag { margin: 0; }
.fpx-native .fpx-tablet__tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: fpx-ping 2s infinite; }
.fpx-native .fpx-reelapp__top { display: flex; align-items: center; padding: 22px 12px 10px; }
.fpx-native .fpx-reelapp__top img { height: 16px; width: auto; }
.fpx-native .fpx-reelapp__bar {
	display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; margin: 0;
	font: 600 10px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: #6ccf4f;
}
.fpx-native .fpx-reelapp__bar::before {
	content: ""; flex: none; width: 58px; height: 14px;
	background:
		radial-gradient(circle at 7px 7px, #6ccf4f 6.5px, transparent 7px),
		radial-gradient(circle at 29px 7px, transparent 5.2px, rgba(255,255,255,.75) 5.6px, rgba(255,255,255,.75) 6.8px, transparent 7.2px),
		radial-gradient(circle at 51px 7px, transparent 5.2px, rgba(255,255,255,.75) 5.6px, rgba(255,255,255,.75) 6.8px, transparent 7.2px);
}
.fpx-native .fpx-chip { margin: 0; }
.fpx-native .fpx-scroll { margin: 0; }
.fpx-native .fpx-scroll a { position: absolute; inset: 0; font-size: 0; color: transparent; }
.fpx-native .fpx-scroll::after {
	content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
	border-radius: 2px; background: #fff; animation: fpx-wheel 1.8s infinite;
}

/* Product cards: the heading link stretches over the card */
.fpx-native .fpx-card h3 a { color: inherit; text-decoration: none; }
.fpx-native .fpx-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.fpx-native .fpx-card .fpx-card__num { font: 600 13px/1 var(--head); letter-spacing: .14em; color: var(--slate); padding: 0; }
.fpx-native .fpx-card--feature .fpx-card__num { color: var(--teal); }
.fpx-native .fpx-card__logo img { height: 50px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.fpx-native .fpx-card--feature .fpx-card__logo { max-height: none; }
.fpx-native .fpx-card--feature .fpx-card__logo img { height: 44px; max-height: 44px; }
.fpx-native .fpx-card:not(.fpx-card--feature)::after {
	content: ""; position: absolute; right: 0; bottom: 0; width: 64px; height: 64px; border-top-left-radius: 22px;
	background: var(--corner) 50% 50% / 22px no-repeat, var(--mist);
	transition: background-color .4s var(--ease), background-position .45s var(--ease);
}
.fpx-native .fpx-card:not(.fpx-card--feature):hover::after {
	background: var(--corner-w) calc(50% + 3px) calc(50% - 3px) / 22px no-repeat, var(--c);
}
.fpx-native .fpx-card--feature .fpx-card__more {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 0;
	font: 700 14px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.fpx-native .fpx-card__more::after {
	content: ""; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
	transition: transform .45s var(--ease);
}
.fpx-native .fpx-card--feature:hover .fpx-card__more::after { transform: translateX(6px); }
.fpx-native .fpx-browser__bar { margin: 0; font-size: 11px; }
.fpx-native .fpx-browser__bar::before {
	content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e5534b;
	box-shadow: 13px 0 #f0b33b, 26px 0 #4fc16a; margin-right: 26px;
}

/* Grant */
.fpx-native .fpx-eyebrow strong { background: var(--navy); color: #fff; padding: 5px 9px 4px; border-radius: 4px; letter-spacing: .12em; font-weight: inherit; }
.fpx-native .fpx-eyebrow.has-tag::before { display: none; }
.fpx-native .fpx-grant__amount { font: inherit; letter-spacing: 0; }
.fpx-native .fpx-grant__amount p { margin: 0; }
.fpx-native .fpx-grant__pre { font: 500 13px/1.4 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--slate); margin-bottom: 6px !important; }
.fpx-native .fpx-grant__sum { font: 800 clamp(64px, 8vw, 120px)/.9 var(--head); letter-spacing: -.03em; color: var(--teal-d); }
.fpx-native .fpx-grant__post { font: 500 16px/1.4 var(--body); color: var(--slate); margin-top: 10px !important; }
.fpx-native .fpx-grant__copy > .fpx-body { font-size: 17px; line-height: 1.65; color: #3d4c63; margin-bottom: 14px; max-width: 56ch; }
.fpx-native .fpx-ticks li::before {
	content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
	background: var(--tick) center / 16px no-repeat, var(--teal);
}

/* Proof */
.fpx-native .fpx-proof__big, .fpx-native .fpx-proof__label { margin: 0; }
.fpx-native .fpx-proof__label { margin-top: 18px; }
.fpx-native .fpx-quote {
	position: relative; margin: 0; padding: 48px 0 0; border: 0; border-top: 2px solid var(--navy); border-radius: 0;
	background: none; box-shadow: none; font-style: normal; quotes: none;
}
.fpx-native .fpx-quote::before {
	content: ""; position: absolute; top: -26px; left: 0; width: 64px; height: 48px; border: 0;
	background: var(--quote) 0 50% / 52px 39px no-repeat, #fff;
}
.fpx-native .fpx-quote::after { content: none; }
.fpx-native .fpx-quote p { margin: 0; font: 400 clamp(24px, 2.6vw, 36px)/1.3 var(--head); font-style: normal; color: var(--ink); }
.fpx-native .fpx-quote cite {
	display: flex; align-items: center; gap: 14px; margin-top: 28px;
	font: 700 15px/1 var(--head); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
}
.fpx-native .fpx-quote cite::before { content: ""; width: 40px; height: 2px; background: var(--teal); }

/* Contact */
.fpx-native .fpx-contact__intro > .fpx-body { margin-top: 20px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.75); max-width: 52ch; }
.fpx-native .fpx-person img { width: 100%; height: auto; }
.fpx-native .fpx-direct strong { width: 48px; flex: none; font: 600 12px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }

/* The site CSS hides form headings; the homepage form keeps its required-fields note */
.fpx-native .fpx-form .gform_heading { display: block; }
@media (max-width: 640px) { .fpx-native .fpx-actions { gap: 18px 28px; } }

/* WhatsApp link with Jon (replaces Call / Visit) */
.fpx-native .fpx-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 44px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.fpx-native .fpx-direct .fpx-actions { margin-top: 0; }
.fpx-native .fpx-wa .wp-block-button__link::after { background: #25d366; border-color: #25d366; }
.fpx-native .fpx-wa .wp-block-button__link::before { right: 14px; width: 24px; height: 24px; margin-top: -12px; background: #fff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E"); }
.fpx-native .fpx-wa .wp-block-button__link:hover::after { background: #1ebe5a; border-color: #1ebe5a; }
.fpx-native .fpx-wa .wp-block-button__link:hover::before { background: #fff; transform: scale(1.1); }
.fpx-native .fpx-wa__num { margin: 0; font: 500 15px/1 var(--body); letter-spacing: .02em; color: rgba(255,255,255,.6); }

/* Grant: fund card sits beside the panel, tiles never cross into it */
.fpx-native .fpx-grant__visual { grid-template-columns: .9fr 1fr; column-gap: 36px; align-items: center; }
.fpx-native .fpx-fund { margin: 0; }
.fpx-native .fpx-tile--2 { left: -48px; }
.fpx-native .fpx-tile--3 { left: auto; right: 14px; }
@media (max-width: 900px) {
	.fpx-native .fpx-grant__visual { grid-template-columns: 1fr; column-gap: 0; }
	.fpx-native .fpx-fund { margin: 60px 0 0; }
}
@media (max-width: 640px) { .fpx-native .fpx-tile--2 { left: -24px; } }

/* 4Reels: full-width product strip under the grid */
.fpx-native .fpx-card--reels {
	grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; padding: 0; min-height: 0;
	background: linear-gradient(115deg, #0b1424 0%, var(--navy) 55%, #123a2c 100%); color: #fff; border: 0; overflow: visible;
}
.fpx-native .fpx-card--reels::before, .fpx-native .fpx-card--reels::after { content: none; }
.fpx-native .fpx-card--reels:hover { transform: translateY(-4px); }
.fpx-native .fpx-card--reels .fpx-card__body { display: flex; flex-direction: column; gap: 14px; padding: 44px 0 44px 44px; }
.fpx-native .fpx-card--reels .fpx-card__num { color: #6ccf4f; }
.fpx-native .fpx-reels__logo { margin: 10px 0 12px; }
.fpx-native .fpx-reels__logo img { height: 30px; max-height: 30px; width: auto; max-width: none; }
.fpx-native .fpx-card--reels h3 { font-size: clamp(30px, 3vw, 44px); font-weight: 800; text-transform: uppercase; color: #fff; }
.fpx-native .fpx-card--reels p:not([class*="fpx-"]) { padding: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.75); max-width: 46ch; }
.fpx-native .fpx-reels__steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fpx-native .fpx-reels__steps li {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 7px; border-radius: 999px;
	border: 1px solid rgba(108, 207, 79, .45); background: rgba(108, 207, 79, .08);
	font: 600 12px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: #9be083;
}
.fpx-native .fpx-reels__steps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6ccf4f; }
.fpx-native .fpx-card--reels .fpx-card__more {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 18px 0 0;
	font: 700 14px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: #6ccf4f;
}
.fpx-native .fpx-card--reels:hover .fpx-card__more::after { transform: translateX(6px); }
.fpx-native .fpx-reels__stage {
	position: relative; margin: 150px 36px 32px 20px; min-height: 230px; border-radius: 20px; isolation: isolate;
	background: radial-gradient(90% 120% at 50% 110%, rgba(108, 207, 79, .35), transparent 60%), linear-gradient(160deg, #1d4f3a 0%, #0f2a4b 100%);
}
.fpx-native .fpx-reels__stage::after { content: ""; position: absolute; inset: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.fpx-native .fpx-reels__phone { position: absolute; bottom: 22px; width: 142px; border-width: 6px; border-radius: 24px; transition: translate .6s var(--ease); }
.fpx-native .fpx-reels__phone .fpx-reelapp { border-radius: 17px; }
.fpx-native .fpx-reels__phone .fpx-reelapp__top { padding: 14px 10px 8px; }
.fpx-native .fpx-reels__phone .fpx-reelapp__top img { height: 12px; }
.fpx-native .fpx-reels__phone .fpx-reelapp__bar { padding: 8px 10px 4px; font-size: 9px; }
.fpx-native .fpx-reels__phone .fpx-reelapp__bar::before { transform: scale(.85); transform-origin: left center; }
.fpx-native .fpx-reelapp__media img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.fpx-native .fpx-reels__phone--l { left: 9%; rotate: -7deg; z-index: 1; }
.fpx-native .fpx-reels__phone--r { right: 9%; rotate: 7deg; z-index: 1; }
.fpx-native .fpx-reels__phone--c { left: 50%; translate: -50% 0; width: 172px; bottom: 12px; z-index: 2; }
.fpx-native .fpx-card--reels:hover .fpx-reels__phone--l, .fpx-native .fpx-card--reels:hover .fpx-reels__phone--r { translate: 0 -10px; }
.fpx-native .fpx-card--reels:hover .fpx-reels__phone--c { translate: -50% -14px; }
@media (max-width: 900px) {
	.fpx-native .fpx-card--reels { grid-template-columns: 1fr; }
	.fpx-native .fpx-card--reels .fpx-card__body { padding: 36px 32px 0; }
	.fpx-native .fpx-reels__stage { margin: 170px 24px 28px; }
}
@media (max-width: 640px) {
	.fpx-native .fpx-reels__stage { margin: 130px 18px 24px; min-height: 170px; }
	.fpx-native .fpx-reels__phone { width: 98px; border-width: 4px; border-radius: 18px; bottom: 16px; }
	.fpx-native .fpx-reels__phone--c { width: 118px; bottom: 8px; }
	.fpx-native .fpx-reels__phone--l { left: 4%; }
	.fpx-native .fpx-reels__phone--r { right: 4%; }
	.fpx-native .fpx-reels__phone .fpx-reelapp__bar { display: none; }
}