:root{
	--fpg-bg:#FFFFFF;
	--fpg-surface:#F7F5F0;
	--fpg-ink:#111111;
	--fpg-muted:#5C574C;
	--fpg-accent:#B08D3F;
	--fpg-accent-soft:#D9BC70;
	--fpg-deep:#0E0E0E;
	--fpg-rule:#E4DFD3;
	--fpg-ink-inverse:#F2EFE8;
	--fpg-ink-inverse-muted:#B7B1A5;
	--fpg-link-inverse:#D9D4C9;
	--fpg-deep-lift:#161616;
	--fpg-radius:2px;
	--fpg-font-head:"Chivo","Helvetica Neue",Arial,sans-serif;
	--fpg-font-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
}

/* ---------------------------------------------------------------
 * Typography baseline
 * ------------------------------------------------------------- */

body{
	font-family:var(--fpg-font-body);
	color:var(--fpg-ink);
	background:var(--fpg-bg);
	font-size:17px;
	line-height:1.6;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
	font-family:var(--fpg-font-head);
	font-weight:700;
	letter-spacing:-0.03em;
	line-height:1.06;
	text-wrap:balance;
	/* Blocksy ships a dark navy heading colour by default, which is off
	 * palette. Pin headings to the Pavilion ink on light grounds; the
	 * .fpg-band-dark rules below override to white where needed. */
	color:var(--fpg-ink);
}

.fpg-eyebrow .elementor-heading-title{color:var(--fpg-accent);}

h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.6rem,5.6vw,4.4rem);}
h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(2rem,3.8vw,3.1rem);}
h3,.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.16;}

.fpg-lede{font-size:1.13rem;line-height:1.62;color:var(--fpg-muted);max-width:62ch;}
.fpg-body{max-width:66ch;}

/* ---------------------------------------------------------------
 * Eyebrow, rule, and other brand components
 * ------------------------------------------------------------- */

.fpg-eyebrow .elementor-heading-title,
.fpg-eyebrow{
	font-family:var(--fpg-font-head);
	font-weight:600;
	font-size:.72rem;
	text-transform:uppercase;
	letter-spacing:.18em;
	color:var(--fpg-accent);
	line-height:1.4;
}

.fpg-rule .elementor-divider-separator,
.fpg-rule{border-color:var(--fpg-accent)!important;}
.fpg-rule .elementor-divider-separator{border-top-width:1px;}

/* ---------------------------------------------------------------
 * Ground helpers, applied as CSS classes on Elementor containers
 * ------------------------------------------------------------- */

.fpg-band-dark{background:var(--fpg-deep);color:#F2EFE8;}
.fpg-band-dark h1,
.fpg-band-dark h2,
.fpg-band-dark h3,
.fpg-band-dark h4,
.fpg-band-dark .elementor-heading-title{color:#FFFFFF;}
.fpg-band-dark p,
.fpg-band-dark .fpg-lede,
.fpg-band-dark .elementor-widget-text-editor{color:#B7B1A5;}
.fpg-band-dark .fpg-eyebrow,
.fpg-band-dark .fpg-eyebrow .elementor-heading-title{color:var(--fpg-accent-soft);}

.fpg-band-tint{background:var(--fpg-surface);}

.fpg-hairline{border-top:1px solid var(--fpg-rule);}
.fpg-band-dark .fpg-hairline{border-top-color:rgba(217,188,112,.24);}

/* ---------------------------------------------------------------
 * Buttons
 *
 * Contrast law: #B08D3F on white is 3.12:1, which fails AA for text.
 * So gold is a GROUND carrying black text (6.10:1), never gold text
 * on a light surface.
 * ------------------------------------------------------------- */

.elementor-button{
	font-family:var(--fpg-font-head);
	font-weight:600;
	font-size:.92rem;
	letter-spacing:.02em;
	border-radius:var(--fpg-radius);
	padding:16px 30px;
	transition:background-color .25s ease,color .25s ease,border-color .25s ease;
	box-shadow:none;
}

.fpg-btn-primary .elementor-button{
	background-color:var(--fpg-accent);
	color:var(--fpg-ink);
	border:1px solid var(--fpg-accent);
}
.fpg-btn-primary .elementor-button:hover,
.fpg-btn-primary .elementor-button:focus-visible{
	background-color:var(--fpg-ink);
	color:var(--fpg-accent-soft);
	border-color:var(--fpg-ink);
}

.fpg-btn-ghost .elementor-button{
	background-color:transparent;
	color:var(--fpg-ink);
	border:1px solid var(--fpg-ink);
}
.fpg-btn-ghost .elementor-button:hover,
.fpg-btn-ghost .elementor-button:focus-visible{
	background-color:var(--fpg-ink);
	color:#FFFFFF;
}

.fpg-band-dark .fpg-btn-ghost .elementor-button{
	color:var(--fpg-accent-soft);
	border-color:var(--fpg-accent);
}
.fpg-band-dark .fpg-btn-ghost .elementor-button:hover,
.fpg-band-dark .fpg-btn-ghost .elementor-button:focus-visible{
	background-color:var(--fpg-accent);
	color:var(--fpg-ink);
}

:where(a,button,.elementor-button):focus-visible{
	outline:2px solid var(--fpg-accent);
	outline-offset:3px;
}

/* ---------------------------------------------------------------
 * Animation scaffolding
 *
 * These rules only do anything once GSAP has run; the hiding half
 * lives behind the .fpg-anim-active class stamped by inline JS, so a
 * blocked CDN can never leave the page blank.
 * ------------------------------------------------------------- */

.fpg-mask-line-wrap{display:block;overflow:hidden;padding-bottom:.06em;}
.fpg-mask-line{display:block;will-change:transform;}

.fpg-parallax,
.fpg-parallax .elementor-widget-container,
.fpg-parallax figure,
.fpg-parallax .elementor-image{overflow:hidden;}
.fpg-parallax img{display:block;width:100%;height:auto;will-change:transform;}

.fpg-magnetic .elementor-button{will-change:transform;}

@media (prefers-reduced-motion: reduce){
	.fpg-mask-line,
	.fpg-magnetic .elementor-button,
	.fpg-parallax img{will-change:auto;transform:none!important;}
}

/* ---------------------------------------------------------------
 * Layout utilities used by the landing page containers
 * ------------------------------------------------------------- */

.fpg-stat .elementor-heading-title{
	font-size:clamp(2.2rem,4vw,3rem);
	line-height:1;
	letter-spacing:-0.04em;
}

.fpg-solve-item{border-top:1px solid var(--fpg-rule);}
.fpg-band-dark .fpg-solve-item{border-top-color:rgba(217,188,112,.22);}

.fpg-client-card{background:var(--fpg-surface);border-radius:var(--fpg-radius);}
.fpg-band-dark .fpg-client-card{background:#161616;}

.fpg-link-gold a,
.fpg-link-gold .elementor-button{
	color:var(--fpg-accent);
	font-weight:600;
	text-decoration:none;
	border-bottom:1px solid var(--fpg-accent);
	padding-bottom:2px;
}
.fpg-band-dark .fpg-link-gold a{color:var(--fpg-accent-soft);border-bottom-color:var(--fpg-accent-soft);}

/* ---------------------------------------------------------------
 * Blocksy header and footer
 *
 * Styling only. The header/footer STRUCTURE stays owned by Blocksy's
 * own builder in the Customizer, so nothing here fights it and the
 * next person to open the Customizer sees what they expect.
 * ------------------------------------------------------------- */

header.ct-header{
	background:var(--fpg-bg);
	border-bottom:1px solid var(--fpg-rule);
}

header.ct-header [data-id="menu"] .menu > li > a{
	font-family:var(--fpg-font-head);
	font-weight:600;
	font-size:.88rem;
	letter-spacing:.01em;
	color:var(--fpg-ink);
}

header.ct-header [data-id="menu"] .menu > li > a:hover,
header.ct-header [data-id="menu"] .menu > li.current-menu-item > a{
	color:var(--fpg-accent);
}

/* gold underline that draws in, instead of a colour swap only */
header.ct-header [data-id="menu"] .menu > li > a::after{
	content:"";
	display:block;
	height:1px;
	background:var(--fpg-accent);
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .3s cubic-bezier(.22,1,.36,1);
}
header.ct-header [data-id="menu"] .menu > li > a:hover::after,
header.ct-header [data-id="menu"] .menu > li.current-menu-item > a::after{
	transform:scaleX(1);
}

.ct-header .site-title{
	font-family:var(--fpg-font-head);
	font-weight:800;
	letter-spacing:-0.02em;
}

/* submenu panels */
header.ct-header .sub-menu{
	background:var(--fpg-bg);
	border:1px solid var(--fpg-rule);
	border-radius:var(--fpg-radius);
	box-shadow:none;
}
header.ct-header .sub-menu a{
	font-family:var(--fpg-font-body);
	font-size:.9rem;
	color:var(--fpg-ink);
}
header.ct-header .sub-menu a:hover{color:var(--fpg-accent);}

footer.ct-footer{
	background:var(--fpg-deep);
	color:#B7B1A5;
}
footer.ct-footer a{color:#D9D4C9;}
footer.ct-footer a:hover{color:var(--fpg-accent-soft);}
footer.ct-footer .widget-title,
footer.ct-footer h3{
	font-family:var(--fpg-font-head);
	color:#FFFFFF;
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.16em;
}
footer.ct-footer [data-column="copyright"]{
	border-top:1px solid rgba(217,188,112,.2);
	font-size:.84rem;
}

@media (prefers-reduced-motion: reduce){
	header.ct-header [data-id="menu"] .menu > li > a::after{transition:none;}
}

/* Header CTA: gold ground carrying black text, per the contrast law. */
header.ct-header [data-id="button"] .ct-button,
.fpg-nav-cta .ct-button,
header.ct-header .ct-button{
	background:var(--fpg-accent);
	color:var(--fpg-ink);
	border:1px solid var(--fpg-accent);
	border-radius:var(--fpg-radius);
	font-family:var(--fpg-font-head);
	font-weight:600;
	font-size:.82rem;
	letter-spacing:.02em;
	padding:12px 22px;
	box-shadow:none;
	transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
header.ct-header [data-id="button"] .ct-button:hover,
header.ct-header .ct-button:hover,
header.ct-header .ct-button:focus-visible{
	background:var(--fpg-ink);
	color:var(--fpg-accent-soft);
	border-color:var(--fpg-ink);
}

/* ---------------------------------------------------------------
 * Footer widget areas
 * ------------------------------------------------------------- */

footer.ct-footer [class*="footer-widget-area"],
footer.ct-footer .ct-footer-cell{padding-block:16px;}

footer.ct-footer .widget-title,
footer.ct-footer .widget h2,
footer.ct-footer .widget h3{
	font-family:var(--fpg-font-head);
	font-size:.72rem;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.18em;
	color:var(--fpg-accent-soft);
	margin-bottom:18px;
	padding-bottom:12px;
	border-bottom:1px solid rgba(217,188,112,.24);
}

.fpg-foot-logo{
	font-family:var(--fpg-font-head);
	font-weight:800;
	font-size:1.15rem;
	letter-spacing:-0.02em;
	color:#FFFFFF;
	margin:0 0 12px;
}
.fpg-foot-tagline{
	font-size:.92rem;
	line-height:1.55;
	color:#B7B1A5;
	max-width:34ch;
	margin:0 0 20px;
}
.fpg-foot-cta{
	display:inline-block;
	font-family:var(--fpg-font-head);
	font-weight:600;
	font-size:.82rem;
	background:var(--fpg-accent);
	color:var(--fpg-ink)!important;
	padding:12px 22px;
	border-radius:var(--fpg-radius);
	text-decoration:none;
	transition:background-color .25s ease,color .25s ease;
}
.fpg-foot-cta:hover,.fpg-foot-cta:focus-visible{
	background:var(--fpg-accent-soft);
	color:var(--fpg-ink)!important;
}

.fpg-foot-list,.fpg-foot-social{list-style:none;margin:0;padding:0;}
.fpg-foot-list li{margin-bottom:9px;}
.fpg-foot-list a{
	font-size:.92rem;
	color:#D9D4C9;
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:color .2s ease,border-color .2s ease;
}
.fpg-foot-list a:hover,.fpg-foot-list a:focus-visible{
	color:var(--fpg-accent-soft);
	border-bottom-color:var(--fpg-accent-soft);
}

.fpg-foot-social{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px;}
.fpg-foot-social a{
	font-size:.84rem;
	color:#D9D4C9;
	text-decoration:none;
	border-bottom:1px solid rgba(217,212,201,.3);
}
.fpg-foot-social a:hover{color:var(--fpg-accent-soft);border-bottom-color:var(--fpg-accent-soft);}

.fpg-foot-sublabel{
	font-family:var(--fpg-font-head);
	font-size:.68rem;
	text-transform:uppercase;
	letter-spacing:.16em;
	color:var(--fpg-ink-inverse-muted);
	margin:22px 0 4px;
}

.fpg-foot-office{margin-bottom:20px;}
.fpg-foot-office:last-child{margin-bottom:0;}
.fpg-foot-loc{
	font-family:var(--fpg-font-head);
	font-weight:600;
	font-size:.86rem;
	color:#FFFFFF;
	margin:0 0 5px;
}
.fpg-foot-addr{
	font-size:.88rem;
	line-height:1.55;
	color:#B7B1A5;
	margin:0;
}

footer.ct-footer .ct-container > *:last-child,
footer.ct-footer [data-row="bottom"]{
	border-top:1px solid rgba(217,188,112,.2);
}
footer.ct-footer [data-id="copyright"]{
	font-size:.82rem;
	color:var(--fpg-ink-inverse-muted);
	padding-block:22px;
}
footer.ct-footer [data-id="copyright"] a{color:#B7B1A5;text-decoration:none;}
footer.ct-footer [data-id="copyright"] a:hover{color:var(--fpg-accent-soft);}

@media (max-width:800px){
	.fpg-foot-tagline{max-width:none;}
}


/* ---------------------------------------------------------------
 * Footer ground, specificity-matched against Blocksy dynamic CSS
 * ------------------------------------------------------------- */

body #main-container > footer.ct-footer,
body footer.ct-footer{background-color:var(--fpg-deep);color:var(--fpg-ink-inverse-muted);}

body footer.ct-footer [data-row],
body footer.ct-footer [data-row="middle"],
body footer.ct-footer [data-row="bottom"]{background-color:transparent;}

body footer.ct-footer [data-column]{color:var(--fpg-ink-inverse-muted);}
body footer.ct-footer p,
body footer.ct-footer li,
body footer.ct-footer .widget{color:var(--fpg-ink-inverse-muted);}
body footer.ct-footer a{color:var(--fpg-link-inverse);}
body footer.ct-footer a:hover{color:var(--fpg-accent-soft);}
body footer.ct-footer .fpg-foot-logo,
body footer.ct-footer .fpg-foot-loc{color:#FFFFFF;}
body footer.ct-footer .fpg-foot-cta{color:var(--fpg-ink);}
body footer.ct-footer [data-row="bottom"]{border-top:1px solid rgba(217,188,112,.2);}

/* Footer widget grid.
 * Blocksy renders the row container as a grid and drives its
 * grid-template-columns from the Customizer. Declared here so the
 * four columns hold regardless, with the brand column wider.
 */
body footer.ct-footer [data-row*="middle"] > .ct-container{
	grid-template-columns:2fr 1fr 1fr 1fr;
	column-gap:56px;
	row-gap:40px;
	align-items:start;
}
@media (max-width:1000px){
	body footer.ct-footer [data-row*="middle"] > .ct-container{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
	body footer.ct-footer [data-row*="middle"] > .ct-container{grid-template-columns:1fr;}
}
body footer.ct-footer [data-row*="bottom"] > .ct-container{grid-template-columns:1fr;}

/* Nav must sit on one line at desktop alongside the CTA. Blocksy folds
 * overflow into a More dropdown, so tighten the item rhythm enough that
 * all six source items fit before that kicks in. */
@media (min-width:1000px){
	header.ct-header [data-id="menu"] .menu > li > a{font-size:.82rem;padding-inline:12px;}
	header.ct-header [data-id="menu"]{--menu-items-spacing:12px;}
	header.ct-header .ct-button{padding:11px 18px;font-size:.78rem;}
}
