/* FCOMS UK CIC page styles. Colours come from the Kadence global palette (Appearance → Customize → Colors),
   so changing the palette there updates these sections too. */

:root {
	--fcoms-accent: #17803a;
	--fcoms-accent-dark: #11652d;
	--fcoms-radius: 16px;
	--fcoms-space: clamp(56px, 8vw, 104px);
	/* Design refresh (design-refresh-plan.md §2): the four logo colours, each with a darker shade for text */
	--fcoms-navy: #0f1b2d;
	--fcoms-ink: #1f2937;
	--fcoms-muted: #4b5563;
	--fcoms-cream: #fbfaf7;
	--fcoms-sand: #f3f1eb;
	--fcoms-line: #ece9e1;
	--fcoms-gold: #f5a524;
	--c-build: #18abe3;
	--t-build: #0b6fa4;
	--c-ai: #27963c;
	--t-ai: #1f7a31;
	--c-fix: #ed1c24;
	--t-fix: #c0161d;
	--c-comm: #fff200;
	--fcoms-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
	--fcoms-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--fcoms-shadow: 0 26px 46px -28px rgba(15, 27, 45, 0.45);
}

/* Sections */
.fcoms-hero,
.fcoms-section,
.fcoms-cta {
	padding: var(--fcoms-space) 16px;
	margin: 0;
}
.fcoms-hero {
	background: var(--global-palette7, #eaf1fb);
}
.fcoms-hero h1 {
	font-size: clamp(2rem, 4.2vw, 3rem);
	line-height: 1.15;
	margin-bottom: 0.5em;
}
.fcoms-hero > .wp-block-columns,
.fcoms-section > .wp-block-columns {
	align-items: center;
	gap: 48px;
}
/* Kadence gives every Group in the content a bottom margin (.single-content .wp-block-group), which
   left a 32px stripe of page background between the full-width sections. Sections sit flush. */
.entry-content.single-content > .fcoms-hero,
.entry-content.single-content > .fcoms-section,
.entry-content.single-content > .fcoms-cta,
.entry-content.single-content > .fcoms-strip {
	margin-top: 0;
	margin-bottom: 0;
}
.fcoms-section.fcoms-alt {
	background: var(--global-palette8, #f6f8fb);
}
.fcoms-section > * + h2 {
	margin-top: 2em;
}
.wp-block-group.fcoms-hero > *,
.wp-block-group.fcoms-section > *,
.wp-block-group.fcoms-cta > * {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}
/* Kadence's .entry-content .alignfull { padding-left: 0 } outranks the 16px above, which left text
   touching the screen edges on phones and tablets. Above 1160px the 1120px column has room anyway. */
@media (max-width: 1160px) {
	.entry-content .wp-block-group.alignfull,
	body.page .entry-content.single-content > .sharedaddy {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Closing call to action */
.fcoms-cta {
	background: var(--global-palette3, #0f1b2d);
	color: #fff;
	text-align: center;
}
.fcoms-cta h2,
.fcoms-cta p,
.fcoms-cta a:not(.wp-block-button__link) {
	color: #fff;
}
.fcoms-cta .wp-block-buttons {
	justify-content: center;
}
.fcoms-cta form,
.fcoms-cta .forminator-ui {
	text-align: left;
	max-width: 640px;
	margin: 24px auto;
	background: #fff;
	color: var(--global-palette4, #1f2937);
	padding: 24px;
	border-radius: var(--fcoms-radius);
}
.fcoms-cta-lead {
	font-size: 1.25rem;
}

/* Cards */
.fcoms-card {
	background: #fff;
	border: 1px solid #dbe3ee;
	border-radius: var(--fcoms-radius);
	padding: 24px;
	height: 100%;
	box-sizing: border-box;
}
.fcoms-card h3 {
	margin-top: 0;
	font-size: 1.25rem;
}
.fcoms-card h3 a {
	text-decoration: none;
}
.fcoms-card h3 a:hover,
.fcoms-card h3 a:focus {
	text-decoration: underline;
}
.fcoms-section .wp-block-columns + .wp-block-columns {
	margin-top: 24px;
}
.fcoms-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--global-palette1, #1a5fb4);
	margin: 2em 0 0.75em;
}
.fcoms-small {
	font-size: 0.95rem;
	color: var(--global-palette5, #4b5563);
}
.fcoms-cta .fcoms-small {
	color: #e5e7eb;
}

/* Photos */
.fcoms-photo img {
	border-radius: var(--fcoms-radius);
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Buttons: at least 44px tall, accent colour for the main action (plan §7) */
.wp-block-button__link {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	font-weight: 650;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--fcoms-accent);
	color: #fff;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	background: var(--fcoms-accent-dark);
	color: #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid #d9dee6;
	background: #fff;
	color: var(--fcoms-navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	border-color: var(--fcoms-navy);
	color: var(--fcoms-navy);
}
a:focus-visible,
.wp-block-button__link:focus-visible,
summary:focus-visible {
	outline: 3px solid #f5a524;
	outline-offset: 2px;
}

/* FAQ toggles: native <details> (Google indexes them), with a +/× button and a smooth open in
   browsers that can animate details content */
.wp-block-details {
	border: 1px solid var(--fcoms-line);
	border-radius: var(--fcoms-radius);
	padding: 0;
	margin: 0 0 12px;
	background: #fff;
	interpolate-size: allow-keywords;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.wp-block-details:hover {
	border-color: #d9d4c7;
}
.wp-block-details[open] {
	box-shadow: 0 20px 40px -30px rgba(15, 27, 45, 0.35);
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 650;
	font-size: 1.05rem;
	color: var(--fcoms-navy);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 20px 24px;
}
.wp-block-details summary::-webkit-details-marker {
	display: none;
}
.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background:
		linear-gradient(var(--fcoms-navy), var(--fcoms-navy)) center / 12px 2px no-repeat,
		linear-gradient(var(--fcoms-navy), var(--fcoms-navy)) center / 2px 12px no-repeat,
		var(--fcoms-sand);
	transition: transform 0.25s var(--fcoms-ease), background-color 0.25s;
}
.wp-block-details[open] summary::after {
	transform: rotate(45deg);
	background-color: color-mix(in srgb, var(--c-build) 18%, #fff);
}
.wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 24px 20px;
	color: var(--fcoms-muted);
}
.wp-block-details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.32s var(--fcoms-ease), content-visibility 0.32s allow-discrete;
}
.wp-block-details[open]::details-content {
	block-size: auto;
}

/* Tables */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table th,
.wp-block-table td {
	padding: 12px 14px;
	border: 1px solid #dbe3ee;
	text-align: left;
}
.wp-block-table thead th {
	background: var(--global-palette7, #eaf1fb);
}

/* Quotes */
.wp-block-quote {
	border-left: 4px solid var(--global-palette1, #1a5fb4);
	padding-left: 20px;
	font-size: 1.125rem;
}
.wp-block-quote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-size: 0.95rem;
}

/* Blog call-to-action box and archive notice */
.fcoms-cta-box {
	background: var(--global-palette7, #eaf1fb);
	border-radius: var(--fcoms-radius);
	padding: 28px;
	margin-top: 2.5em;
}
.fcoms-cta-box p:first-child {
	font-size: 1.25rem;
	font-weight: 700;
}
.fcoms-notice {
	background: #fff7e6;
	border-left: 4px solid #f5a524;
	padding: 16px 20px;
	margin-bottom: 2em;
}

/* Breadcrumbs */
.yoast-breadcrumbs,
nav .yoast-breadcrumb {
	max-width: 1120px;
	margin: 16px auto 0;
	padding: 0 16px;
	font-size: 0.9rem;
}

/* Mobile Call / Get a quote bar */
.fcoms-mobile-bar {
	display: none;
}
@media (max-width: 767px) {
	.fcoms-mobile-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
	}
	.fcoms-mobile-bar a {
		flex: 1;
		min-height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		text-decoration: none;
	}
	.fcoms-mobile-bar__call {
		background: #fff;
		color: var(--global-palette3, #0f1b2d);
	}
	.fcoms-mobile-bar__quote {
		background: var(--fcoms-accent);
		color: #fff;
	}
	body {
		padding-bottom: 52px;
	}
	.fcoms-hero > .wp-block-columns,
	.fcoms-section > .wp-block-columns {
		gap: 24px;
	}
}

/* Dark footer: readable text and links */
.site-footer,
.site-footer h3,
.site-footer p,
.site-footer li,
.site-footer a {
	color: #fff;
}
.site-footer a:hover,
.site-footer a:focus {
	color: #cfe0ff;
}
.site-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
}
.site-footer .wp-block-list li {
	margin-bottom: 6px;
}
.site-footer .site-bottom-footer-wrap p {
	font-size: 0.9rem;
	color: #d1d5db;
}

/* Header: keep the phone number and button on one line */
.site-header .header-html,
.site-header .header-html a,
.site-header .header-button,
.site-header .main-navigation .menu > li > a {
	white-space: nowrap;
}
.site-header .header-html a {
	font-size: 1rem;
	text-decoration: none;
}

/* Our Work: screenshots in a browser frame (top bar drawn in CSS) */
.fcoms-shot {
	position: relative;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dbe3ee;
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 12px 32px -12px rgba(15, 27, 45, 0.25);
	padding-top: 26px;
}
.fcoms-shot::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 26px;
	background:
		radial-gradient(circle at 14px 13px, #f87171 4px, transparent 4.5px),
		radial-gradient(circle at 28px 13px, #fbbf24 4px, transparent 4.5px),
		radial-gradient(circle at 42px 13px, #34d399 4px, transparent 4.5px),
		#eef2f7;
	border-bottom: 1px solid #dbe3ee;
	z-index: 1;
}
.fcoms-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
}
/* Linked shots (Our Work cards): the link holds the 16:10 box, so an image that fails to load
   can't stretch the card or the grid row (a broken image ignores aspect-ratio). */
.fcoms-shot > a {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.fcoms-shot > a img {
	height: 100%;
}

/* Case study hero: desktop shot with the phone version overlapping the bottom right */
.fcoms-showcase {
	position: relative;
	padding: 0 6% 12% 0;
	margin: 0;
}
.fcoms-showcase .fcoms-shot-phone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 27%;
	margin: 0;
	border: 6px solid #0f1b2d;
	border-radius: 22px;
	overflow: hidden;
	background: #0f1b2d;
	box-shadow: 0 20px 40px -12px rgba(15, 27, 45, 0.45);
	z-index: 2;
}
.fcoms-showcase .fcoms-shot-phone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 390 / 844;
	object-fit: cover;
	object-position: top center;
	border-radius: 16px;
}

/* Our Work grid cards */
.fcoms-work-card {
	display: flex;
	flex-direction: column;
	padding: 16px 16px 24px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fcoms-work-card:hover,
.fcoms-work-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -16px rgba(15, 27, 45, 0.3);
}
.fcoms-work-card .fcoms-card-shot {
	margin-bottom: 20px;
	box-shadow: none;
}
.fcoms-work-card .fcoms-card-shot img {
	transition: transform 0.4s ease;
}
.fcoms-work-card:hover .fcoms-card-shot img {
	transform: scale(1.03);
}
.fcoms-work-card .fcoms-eyebrow {
	margin: 0 0 6px;
	font-size: 0.8rem;
}
.fcoms-work-card h3 {
	margin: 0 0 8px;
}
.fcoms-work-card .fcoms-small {
	margin-top: auto;
	padding-top: 8px;
}
.fcoms-shot-empty {
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--global-palette7, #eaf1fb), #fff);
}
.fcoms-shot-empty p {
	margin: 0;
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--global-palette1, #1a5fb4);
}

/* Blog and category pages */
body.blog,
body.category {
	background: var(--global-palette8, #f6f8fb);
}
.fcoms-blog-hero {
	border-bottom: 1px solid #dbe3ee;
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(26, 95, 180, 0.14), transparent 60%),
		radial-gradient(40% 80% at 0% 100%, rgba(23, 128, 58, 0.08), transparent 60%),
		var(--global-palette7, #eaf1fb);
}
.fcoms-blog-hero__inner {
	max-width: 1120px;
	margin: 0 auto;
}
.fcoms-blog-hero .fcoms-eyebrow {
	margin-top: 0;
}
.fcoms-blog-hero h1 {
	max-width: 18em;
	margin-top: 0;
}
.fcoms-blog-hero__lead {
	max-width: 40em;
	font-size: 1.2rem;
	color: var(--global-palette5, #4b5563);
	margin-bottom: 28px;
}
.fcoms-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.fcoms-topics a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid #c9d6e8;
	background: #fff;
	color: var(--global-palette3, #0f1b2d);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}
.fcoms-topics a:hover,
.fcoms-topics a:focus {
	border-color: var(--global-palette1, #1a5fb4);
	color: var(--global-palette1, #1a5fb4);
}
.fcoms-topics a[aria-current="page"] {
	background: var(--global-palette3, #0f1b2d);
	border-color: var(--global-palette3, #0f1b2d);
	color: #fff;
}
body.blog .yoast-breadcrumbs,
body.category .yoast-breadcrumbs {
	padding-top: 4px;
}
body.blog #primary,
body.category #primary {
	margin-top: 48px;
}
body.blog .loop-entry,
body.category .loop-entry {
	border-radius: var(--fcoms-radius);
	border: 1px solid #dbe3ee;
	overflow: hidden;
	box-shadow: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.blog .loop-entry:hover,
body.blog .loop-entry:focus-within,
body.category .loop-entry:hover,
body.category .loop-entry:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -16px rgba(15, 27, 45, 0.3);
}
body.blog .loop-entry .entry-title a,
body.category .loop-entry .entry-title a {
	text-decoration: none;
}

@media (max-width: 767px) {
	.fcoms-showcase {
		padding: 0 8% 16% 0;
	}
	.fcoms-showcase .fcoms-shot-phone {
		border-width: 4px;
		border-radius: 16px;
	}
	.fcoms-blog-hero__lead {
		font-size: 1.05rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fcoms-work-card,
	.fcoms-work-card .fcoms-card-shot img,
	body.blog .loop-entry,
	body.category .loop-entry {
		transition: none;
	}
	.fcoms-work-card:hover,
	.fcoms-work-card:hover .fcoms-card-shot img,
	body.blog .loop-entry:hover,
	body.category .loop-entry:hover {
		transform: none;
	}
}

/* Gold review stars (home hero and review quote) */
.fcoms-stars {
	color: #e8a20c;
	letter-spacing: 0.06em;
}

/* Icons for CSS masks (stroke-only SVG, coloured by the element background) */
:root {
	--fcoms-i-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4M7 9h6M7 12h4'/%3E%3C/svg%3E");
	--fcoms-i-app: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M10 18h4M9 7h6M9 10h6M9 13h3'/%3E%3C/svg%3E");
	--fcoms-i-ai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7 4.7 1.8-4.7 1.8L12 16l-1.8-4.7-4.7-1.8 4.7-1.8zM19 15l.8 2.2 2.2.8-2.2.8L19 21l-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E");
	--fcoms-i-repair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.2L3 17.8V21h3.2l6.3-6.3a4 4 0 0 0 5.2-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E");
	--fcoms-i-upgrade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='10' rx='2'/%3E%3Cpath d='M8 7V4M12 7V4M16 7V4M8 20v-3M12 20v-3M16 20v-3M10 12l2-2 2 2'/%3E%3C/svg%3E");
	--fcoms-i-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3C/svg%3E");
	--fcoms-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--fcoms-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	--fcoms-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--fcoms-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--fcoms-i-money: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 6H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
	--fcoms-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
	--fcoms-i-arrow-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--fcoms-i-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Design refresh, 20 Oct 2026 (design-refresh-plan.md, phases 1–3)
   Phase 1: design system and site-wide micro-interactions.
   Phase 2: motion layer (motion.js adds .fcoms-motion to <html> and .is-in to blocks as they scroll
            into view; every hidden state depends on that class, so content shows without JavaScript).
   Phase 3: home page sections (.fcoms-home and the classes build.js gives each block).
   ========================================================================== */

/* ---------- Type ---------- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.fcoms-blog-hero h1 {
	font-family: var(--fcoms-display);
	color: var(--fcoms-navy);
	letter-spacing: -0.02em;
}
.fcoms-lead {
	font-size: 1.15rem;
	color: #374151;
}

/* ---------- Top bar (front.php) ---------- */
.fcoms-topbar {
	background: var(--fcoms-navy);
	color: #e5e7eb;
	font-size: 14px;
}
.fcoms-topbar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.fcoms-topbar b {
	color: var(--c-comm);
	font-weight: 600;
}
@media (max-width: 767px) {
	.fcoms-topbar__inner {
		justify-content: center;
		text-align: center;
		padding: 7px 16px;
	}
	.fcoms-topbar__hours {
		display: none;
	}
}

/* ---------- Header ---------- */
#masthead {
	view-transition-name: fcoms-header;
}
.site-header .site-header-row-container-inner {
	transition: background-color 0.25s, box-shadow 0.25s;
}
html.fcoms-scrolled #masthead .kadence-sticky-header .site-header-row-container-inner {
	background: rgba(251, 250, 247, 0.86) !important;
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 10px 30px -20px rgba(15, 27, 45, 0.4);
}
/* Menu links: a coloured underline slides in from the left */
.header-navigation .header-menu-container > ul > li > a {
	position: relative;
}
.header-navigation .header-menu-container > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0.6em;
	right: 0.6em;
	bottom: 0.35em;
	height: 2px;
	border-radius: 2px;
	background: var(--c-build);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease-out;
}
.header-navigation .header-menu-container > ul > li > a:hover::after,
.header-navigation .header-menu-container > ul > li > a:focus-visible::after,
.header-navigation .header-menu-container > ul > li.current-menu-item > a::after {
	transform: scaleX(1);
}
/* Phone number with an icon that rings once when the page loads */
.site-header .header-html a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.site-header .header-html a::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--fcoms-accent);
	-webkit-mask: var(--fcoms-i-phone) center / contain no-repeat;
	mask: var(--fcoms-i-phone) center / contain no-repeat;
	transform-origin: 50% 20%;
}
.site-header .header-button {
	border-radius: 999px;
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s;
}
.site-header .header-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -10px rgba(23, 128, 58, 0.65);
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s, border-color 0.18s, color 0.18s;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 6px 18px -8px rgba(23, 128, 58, 0.6);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 14px 26px -10px rgba(23, 128, 58, 0.65);
}
.wp-block-button__link:active {
	transform: scale(0.98);
}
.wp-block-button.fcoms-btn-arrow .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	transition: transform 0.2s ease-out;
}
.wp-block-button.fcoms-btn-arrow .wp-block-button__link:hover::after {
	transform: translateX(4px);
}
.wp-block-button.fcoms-btn-light .wp-block-button__link {
	background: var(--c-comm);
	color: var(--fcoms-navy);
	box-shadow: none;
}
.wp-block-button.fcoms-btn-light .wp-block-button__link:hover,
.wp-block-button.fcoms-btn-light .wp-block-button__link:focus {
	background: #fff;
	color: var(--fcoms-navy);
	box-shadow: none;
}

/* ---------- Links in text: the underline tightens on hover ---------- */
.entry-content p a:not(.wp-block-button__link),
.entry-content li a {
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-decoration-color 0.2s, text-underline-offset 0.2s;
}
.entry-content p a:not(.wp-block-button__link):hover,
.entry-content li a:hover {
	text-decoration-color: currentColor;
	text-underline-offset: 5px;
}

/* ---------- Cards site-wide ---------- */
.fcoms-card {
	border-color: var(--fcoms-line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s;
}
.fcoms-card:has(h3 a):hover,
.fcoms-card:has(h3 a):focus-within {
	transform: translateY(-4px);
	box-shadow: var(--fcoms-shadow);
	border-color: transparent;
}

/* ---------- Closing call to action: navy with the four logo colours drifting slowly behind ---------- */
.fcoms-cta {
	background:
		radial-gradient(40% 70% at 10% 20%, rgba(24, 171, 227, 0.22), transparent 70%),
		radial-gradient(35% 60% at 90% 30%, rgba(237, 28, 36, 0.16), transparent 70%),
		radial-gradient(40% 70% at 70% 100%, rgba(39, 150, 60, 0.2), transparent 70%),
		radial-gradient(30% 50% at 30% 100%, rgba(255, 242, 0, 0.12), transparent 70%),
		var(--fcoms-navy);
	background-size: 160% 160%;
}

/* ---------- Forms (Forminator) ---------- */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select {
	border-radius: 12px !important;
	background-color: #fff !important;
	border: 1px solid #d6d2c8 !important;
	color: var(--fcoms-ink) !important;
	transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui select:focus {
	border-color: var(--c-build) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-build) 22%, transparent) !important;
	outline: none;
}
/* Green like every other main action; Forminator's default light blue fails AA with white text */
.forminator-ui .forminator-button-submit {
	border-radius: 999px !important;
	background-color: var(--fcoms-accent) !important;
	color: #fff !important;
	font-weight: 600 !important;
	padding: 12px 26px !important;
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s;
}
.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:focus-visible {
	background-color: var(--fcoms-accent-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -10px rgba(23, 128, 58, 0.6);
}

/* ---------- Mobile bar slides up after the first scroll (only when motion.js runs) ---------- */
.fcoms-mobile-bar {
	transition: transform 0.35s var(--fcoms-ease);
}
html.fcoms-motion:not(.fcoms-scrolled) .fcoms-mobile-bar {
	transform: translateY(110%);
}
#mobile-header .kadence-sticky-header {
	transition: transform 0.3s var(--fcoms-ease);
}
html.fcoms-hdr-hide #mobile-header .kadence-sticky-header.item-is-fixed {
	transform: translateY(-100%);
}

/* ==========================================================================
   Home page
   ========================================================================== */
.fcoms-home-hero,
.fcoms-home:not(.fcoms-alt):not(.fcoms-band) {
	background: var(--fcoms-cream);
}
.fcoms-home.fcoms-alt {
	background: var(--fcoms-sand);
}
.fcoms-home h2 {
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	line-height: 1.12;
	font-weight: 800;
	margin: 0 0 16px;
}

/* Eyebrows with a coloured dot, and the four-dot version in the hero */
.fcoms-eyebrow[class*="fcoms-dot-"],
.fcoms-eyebrow-dots {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--fcoms-muted);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	margin: 0 0 14px;
}
.fcoms-eyebrow[class*="fcoms-dot-"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--dot, var(--c-build));
}
.fcoms-dot-ai { --dot: var(--c-ai); }
.fcoms-dot-fix { --dot: var(--c-fix); }
.fcoms-dot-gold { --dot: var(--fcoms-gold); }
.fcoms-dot-comm { --dot: var(--c-comm); }
.fcoms-eyebrow-dots::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-build);
	box-shadow: 16px 0 var(--c-fix), 32px 0 var(--c-comm), 48px 0 var(--c-ai);
	margin-right: 50px;
}

/* Section heads: left-aligned, at most 720px of text */
.wp-block-group.fcoms-section > .fcoms-sec-head,
.wp-block-group.fcoms-section > .fcoms-head-row {
	margin-bottom: 44px;
}
.fcoms-sec-head > * {
	max-width: 720px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.fcoms-sec-head > * + * {
	margin-top: 0;
}
.fcoms-head-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}
.fcoms-head-row > .fcoms-sec-head {
	margin: 0;
}
.fcoms-head-row > .wp-block-buttons {
	margin: 0;
}
.fcoms-group-label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fcoms-navy);
	margin: 40px auto 18px !important;
}
.fcoms-group-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e2ded3;
}
.wp-block-columns.fcoms-cards {
	gap: 24px;
	margin-bottom: 24px;
}

/* ---------- Hero ---------- */
.fcoms-home-hero {
	overflow: hidden;
}
.fcoms-home-hero h1 {
	font-size: clamp(2.4rem, 5vw, 3.9rem);
	line-height: 1.06;
	font-weight: 800;
	margin: 0 0 24px;
}
.wp-block-columns.fcoms-hero-grid > .wp-block-column:first-child {
	flex: 0 0 52% !important;
}
mark.fcoms-mark {
	position: relative;
	z-index: 0;
	white-space: nowrap;
	background: none;
	color: inherit;
}
mark.fcoms-mark::before {
	content: "";
	position: absolute;
	left: -4px;
	right: -6px;
	bottom: 0.06em;
	height: 0.36em;
	background: var(--c-comm);
	border-radius: 4px 10px 6px 12px;
	z-index: -1;
	opacity: 0.9;
	transform-origin: left;
}
.fcoms-home-hero .fcoms-lead {
	margin: 0 0 32px;
}
.fcoms-hero-buttons {
	gap: 14px;
}
.wp-block-list.fcoms-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.fcoms-trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	background: #fff;
	border: 1px solid #e6e3da;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 0.9rem;
	font-weight: 550;
	color: var(--fcoms-ink);
}
.fcoms-trust li:not(:first-child)::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--fcoms-accent);
	-webkit-mask: var(--fcoms-i-check) center / contain no-repeat;
	mask: var(--fcoms-i-check) center / contain no-repeat;
}

/* Photo collage, ring with the four logo dots, and two floating cards */
.wp-block-group.fcoms-collage {
	position: relative;
	height: 520px;
}
.wp-block-group.fcoms-collage > * {
	position: absolute;
	margin: 0 !important;
}
.fcoms-orbit {
	width: min(470px, 90%);
	aspect-ratio: 1;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	border: 2px dashed rgba(15, 27, 45, 0.12);
}
.fcoms-collage > .fcoms-orbit {
	position: absolute;
}
.fcoms-orbit i {
	position: absolute;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-radius: 50%;
}
.fcoms-orbit i:nth-child(1) { background: var(--c-build); left: 50%; top: 0; }
.fcoms-orbit i:nth-child(2) { background: var(--c-fix); left: 100%; top: 50%; }
.fcoms-orbit i:nth-child(3) { background: var(--c-comm); left: 50%; top: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.fcoms-orbit i:nth-child(4) { background: var(--c-ai); left: 0; top: 50%; }
.fcoms-ph {
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 60px -28px rgba(15, 27, 45, 0.45), 0 0 0 6px #fff;
	background: #ddd;
}
.fcoms-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fcoms-collage .fcoms-ph-main { width: 74%; height: 330px; left: 13%; top: 80px; }
.fcoms-collage .fcoms-ph-a { width: 39%; height: 160px; left: 0; bottom: 30px; }
.fcoms-collage .fcoms-ph-b { width: 37%; height: 150px; right: 0; top: 10px; }
.fcoms-chip {
	background: #fff;
	border-radius: 16px;
	padding: 12px 16px;
	box-shadow: 0 18px 40px -18px rgba(15, 27, 45, 0.35);
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--fcoms-muted);
	z-index: 2;
}
.fcoms-chip p {
	margin: 0;
}
.fcoms-chip strong {
	display: block;
	color: var(--fcoms-navy);
	font-size: 0.85rem;
}
.fcoms-chip .fcoms-stars {
	display: block;
	font-size: 0.85rem;
}
.fcoms-collage .fcoms-chip-review { left: 46%; top: 20px; }
.fcoms-collage .fcoms-chip-time { right: 10px; bottom: 70px; padding-left: 62px; }
.fcoms-chip-time::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	border-radius: 10px;
	background: #e7f4ea;
}
.fcoms-chip-time::after {
	content: "";
	position: absolute;
	left: 22px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--fcoms-accent);
	-webkit-mask: var(--fcoms-i-clock) center / contain no-repeat;
	mask: var(--fcoms-i-clock) center / contain no-repeat;
}

/* ---------- Client strip (marquee) ---------- */
.wp-block-group.fcoms-strip {
	background: #fff;
	border-top: 1px solid var(--fcoms-line);
	border-bottom: 1px solid var(--fcoms-line);
	padding: 22px 0;
	margin: 0;
	overflow: hidden;
}
.wp-block-group.fcoms-strip > * {
	max-width: none;
}
.fcoms-strip-label {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b7280;
	margin: 0 0 14px !important;
}
.wp-block-list.fcoms-marquee {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 0;
	list-style: none;
	margin: 0 !important;
	padding: 0 16px;
}
.fcoms-marquee li {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding-right: 22px;
	margin: 0;
	font-family: var(--fcoms-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--fcoms-ink);
	white-space: nowrap;
}
.fcoms-marquee li::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-build);
}
.fcoms-marquee li:nth-child(4n + 2)::after { background: var(--c-fix); }
.fcoms-marquee li:nth-child(4n + 3)::after { background: var(--c-ai); }
.fcoms-marquee li:nth-child(4n + 4)::after { background: #e6c700; }
/* motion.js doubles the list (the copy is hidden from screen readers) and adds .is-looping */
.fcoms-strip:has(.is-looping) {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.wp-block-list.fcoms-marquee.is-looping {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	padding: 0;
}

/* ---------- Service cards ---------- */
.fcoms-svc {
	--cc: var(--c-build);
	--ct: var(--t-build);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 104px 28px 26px;
}
.fcoms-c-ai { --cc: var(--c-ai); --ct: var(--t-ai); }
.fcoms-c-fix { --cc: var(--c-fix); --ct: var(--t-fix); }
.wp-block-group.fcoms-svc > * {
	margin: 0;
}
.fcoms-svc::before {
	content: "";
	position: absolute;
	left: 28px;
	right: 28px;
	top: 0;
	height: 4px;
	border-radius: 0 0 6px 6px;
	background: var(--cc);
	transition: height 0.2s ease-out;
}
.fcoms-svc::after {
	content: "";
	position: absolute;
	left: 28px;
	top: 30px;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--cc) 14%, #fff);
}
.fcoms-svc h3 {
	font-size: 1.4rem;
	font-weight: 750;
}
.fcoms-svc h3::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 41px;
	top: 43px;
	width: 28px;
	height: 28px;
	background: var(--ct);
	-webkit-mask: var(--ic) center / contain no-repeat;
	mask: var(--ic) center / contain no-repeat;
	transition: transform 0.35s var(--fcoms-ease);
}
.fcoms-ic-web { --ic: var(--fcoms-i-web); }
.fcoms-ic-app { --ic: var(--fcoms-i-app); }
.fcoms-ic-ai { --ic: var(--fcoms-i-ai); }
.fcoms-ic-repair { --ic: var(--fcoms-i-repair); }
.fcoms-ic-upgrade { --ic: var(--fcoms-i-upgrade); }
.fcoms-ic-support { --ic: var(--fcoms-i-support); }
/* The whole card is the link */
.fcoms-svc h3 a,
.fcoms-proj h3 a {
	color: inherit;
}
.fcoms-svc h3 a::after,
.fcoms-proj h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 20px;
}
.fcoms-svc > p:not(.fcoms-price) {
	flex: 1;
	color: var(--fcoms-muted);
	font-size: 1rem;
}
.fcoms-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px !important;
}
.fcoms-price span {
	display: inline-block;
	background: color-mix(in srgb, var(--cc) 12%, #fff);
	color: var(--ct);
	font-weight: 700;
	font-size: 0.9rem;
	padding: 6px 12px;
	border-radius: 999px;
}
.fcoms-price::after {
	content: "";
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-sizing: border-box;
	border: 1.5px solid #e2ded3;
	background: var(--fcoms-i-arrow-navy) center / 18px no-repeat;
	transition: transform 0.2s ease-out, background-color 0.2s, border-color 0.2s;
}
.fcoms-svc:hover::before,
.fcoms-svc:focus-within::before {
	height: 6px;
}
.fcoms-svc:hover h3::before {
	transform: scale(1.15) rotate(-6deg);
}
.fcoms-svc:hover .fcoms-price::after,
.fcoms-svc:focus-within .fcoms-price::after {
	transform: rotate(-45deg);
	border-color: var(--fcoms-navy);
	background: var(--fcoms-i-arrow-white) center / 18px no-repeat var(--fcoms-navy);
}

/* ---------- Project cards: browser frame, the phone version rises on hover ---------- */
.fcoms-proj {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 24px;
}
.wp-block-group.fcoms-proj > * {
	margin: 0;
}
.wp-block-group.fcoms-device {
	position: relative;
	margin-bottom: 22px;
}
.fcoms-device .fcoms-card-shot {
	margin: 0;
	box-shadow: none;
}
.fcoms-device .fcoms-card-shot img {
	transition: transform 0.6s var(--fcoms-ease);
}
.fcoms-device .fcoms-shot-phone {
	position: absolute;
	right: 14px;
	bottom: -18px;
	width: 22%;
	margin: 0;
	border: 4px solid var(--fcoms-navy);
	border-radius: 14px;
	overflow: hidden;
	background: var(--fcoms-navy);
	box-shadow: 0 18px 30px -14px rgba(15, 27, 45, 0.55);
	z-index: 2;
	transform: translateY(12%);
	transition: transform 0.45s var(--fcoms-ease);
}
.fcoms-device .fcoms-shot-phone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 390 / 700;
	object-fit: cover;
	object-position: top center;
	border-radius: 10px;
}
.fcoms-proj:hover .fcoms-card-shot img {
	transform: scale(1.03);
}
.fcoms-proj:hover .fcoms-shot-phone,
.fcoms-proj:focus-within .fcoms-shot-phone {
	transform: translateY(-14%);
}
.fcoms-tag {
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--t-build);
	background: color-mix(in srgb, var(--c-build) 12%, #fff);
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 8px !important;
}
.fcoms-proj h3 {
	font-size: 1.3rem;
	font-weight: 750;
	margin-bottom: 6px !important;
}
.fcoms-proj > p:last-child {
	color: var(--fcoms-muted);
	font-size: 1rem;
}

/* ---------- How it works: a timeline that draws itself ---------- */
.wp-block-columns.fcoms-steps {
	position: relative;
	gap: 40px;
}
.fcoms-steps::before,
.fcoms-steps::after {
	content: "";
	position: absolute;
	left: 32px;
	right: calc(33.33% - 32px);
	top: 30px;
	height: 4px;
	border-radius: 4px;
	background: #e2ded3;
}
.fcoms-steps::after {
	background: linear-gradient(90deg, var(--c-build), var(--c-ai), var(--c-fix));
	transform-origin: left;
	transition: transform 1.1s ease-out 0.15s;
}
.fcoms-steps > .wp-block-column {
	position: relative;
	z-index: 1;
}
.fcoms-step-dot {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 0 0 22px !important;
	color: #fff;
	background: var(--c-build);
	font-family: var(--fcoms-display);
	font-weight: 800;
	font-size: 1.5rem;
	box-shadow: 0 0 0 8px var(--fcoms-cream);
	transition: transform 0.45s var(--fcoms-ease), opacity 0.45s;
}
.fcoms-steps > :nth-child(2) .fcoms-step-dot { background: var(--c-ai); transition-delay: 0.55s; }
.fcoms-steps > :nth-child(3) .fcoms-step-dot { background: var(--c-fix); transition-delay: 1s; }
.fcoms-steps h3 {
	font-size: 1.35rem;
	font-weight: 750;
	margin: 0 0 8px;
}
.fcoms-steps p:not(.fcoms-step-dot) {
	color: var(--fcoms-muted);
}

/* ---------- Review ---------- */
.wp-block-columns.fcoms-review {
	gap: 56px;
	align-items: center;
}
.wp-block-columns.fcoms-review > .wp-block-column:first-child {
	flex: 0 0 56% !important;
}
.wp-block-group.fcoms-quote-card {
	position: relative;
	background: #fff;
	border-radius: 28px;
	padding: 48px 48px 40px;
	border: 1px solid var(--fcoms-line);
	box-shadow: 0 40px 80px -50px rgba(15, 27, 45, 0.45);
}
.fcoms-quote-card::before {
	content: "\201C";
	position: absolute;
	top: -26px;
	left: 40px;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--c-build);
	color: #fff;
	font: 800 54px/72px Georgia, serif;
	text-align: center;
}
.fcoms-quote-card > p:first-child {
	margin: 0 0 14px;
}
.fcoms-stars-lg {
	display: flex;
	gap: 6px;
	font-size: 1.9rem;
	line-height: 1;
}
.fcoms-stars-lg span {
	display: inline-block;
	transition: transform 0.4s var(--fcoms-ease), opacity 0.4s, color 0.4s;
}
.fcoms-stars-lg span:nth-child(2) { transition-delay: 0.12s; }
.fcoms-stars-lg span:nth-child(3) { transition-delay: 0.24s; }
.fcoms-stars-lg span:nth-child(4) { transition-delay: 0.36s; }
.fcoms-stars-lg span:nth-child(5) { transition-delay: 0.48s; }
.fcoms-quote-card .wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
}
.fcoms-quote-card .wp-block-quote p {
	font-family: var(--fcoms-display);
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	line-height: 1.45;
	color: var(--fcoms-navy);
	font-weight: 600;
	letter-spacing: -0.01em;
	font-style: normal;
}
.fcoms-quote-card cite {
	margin-top: 22px;
	color: var(--fcoms-muted);
}
.fcoms-quote-card cite strong {
	color: var(--fcoms-navy);
}

/* ---------- Community band ---------- */
.wp-block-group.fcoms-band {
	background: var(--fcoms-navy);
	color: #d7dce5;
}
.fcoms-band h2,
.fcoms-band strong {
	color: #fff;
}
.fcoms-band .fcoms-eyebrow {
	color: var(--c-comm);
}
.fcoms-band .fcoms-lead {
	color: #d7dce5;
}
.wp-block-columns.fcoms-band-grid {
	gap: 56px;
	align-items: center;
}
.fcoms-band-photo {
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(255, 255, 255, 0.08);
	margin: 0;
}
.fcoms-band-photo img {
	aspect-ratio: 3 / 2;
}
.wp-block-group.fcoms-flow {
	display: grid;
	grid-template-columns: 1fr 110px 1fr 110px 1fr;
	align-items: stretch;
	margin: 64px auto;
}
.wp-block-group.fcoms-flow > * {
	margin: 0;
}
.fcoms-node {
	position: relative;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	padding: 92px 20px 22px;
	text-align: center;
	font-size: 0.95rem;
	color: #b8c0cc;
}
.fcoms-node p {
	margin: 0;
}
.fcoms-node strong {
	font-family: var(--fcoms-display);
	font-size: 1.2rem;
}
.fcoms-node::before,
.fcoms-node::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 24px;
	width: 52px;
	height: 52px;
	margin-left: -26px;
	border-radius: 50%;
	background: var(--nc);
}
.fcoms-node::after {
	top: 37px;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	border-radius: 0;
	background: var(--fcoms-navy);
	-webkit-mask: var(--ni) center / contain no-repeat;
	mask: var(--ni) center / contain no-repeat;
}
.fcoms-node-project { --nc: var(--c-build); --ni: var(--fcoms-i-web); }
.fcoms-node-profit { --nc: var(--c-ai); --ni: var(--fcoms-i-money); }
.fcoms-node-profit::after { background: #fff; }
.fcoms-node-families { --nc: var(--c-comm); --ni: var(--fcoms-i-heart); }
.fcoms-pipe {
	position: relative;
	align-self: center;
	height: 4px;
	margin: 0 10px;
	border-radius: 4px;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 8px, transparent 8px 16px);
}
.fcoms-pipe i {
	position: absolute;
	top: -4px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--c-comm);
	opacity: 0;
}
.wp-block-columns.fcoms-stats {
	gap: 24px;
}
.fcoms-stats > .wp-block-column {
	border-top: 2px solid rgba(255, 255, 255, 0.14);
	padding-top: 22px;
}
.fcoms-stat-num {
	font-family: var(--fcoms-display);
	font-size: clamp(3rem, 6vw, 4rem);
	line-height: 1;
	color: #fff;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin: 0 0 10px !important;
}
.fcoms-stat-label {
	margin: 0;
	color: #d7dce5;
}
.fcoms-src {
	margin-top: 22px !important;
	font-size: 0.85rem;
	color: #9aa4b2;
}
.fcoms-band a:not(.wp-block-button__link) {
	color: #fff;
}

/* ---------- FAQ ---------- */
.wp-block-group.fcoms-faq > * {
	max-width: 860px;
	margin-top: 0;
}

/* ---------- Final contact card ---------- */
.wp-block-group.fcoms-contact {
	background: #fff;
	border-radius: 32px;
	overflow: hidden;
	border: 1px solid var(--fcoms-line);
	box-shadow: 0 50px 90px -60px rgba(15, 27, 45, 0.5);
}
.wp-block-columns.fcoms-contact-cols {
	gap: 0;
	margin: 0;
	align-items: stretch !important;
}
.wp-block-columns.fcoms-contact-cols > .wp-block-column:first-child {
	flex: 0 0 44% !important;
}
.wp-block-group.fcoms-contact-side {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--fcoms-navy);
	color: #d7dce5;
	padding: 52px 48px;
}
.fcoms-contact-side h2 {
	color: #fff;
	font-size: clamp(1.9rem, 3vw, 2.5rem);
}
.fcoms-contact-side .fcoms-eyebrow {
	color: var(--c-comm);
}
.fcoms-contact-side > .fcoms-orbit-sm {
	position: absolute;
	width: 220px;
	left: auto;
	top: auto;
	right: -110px;
	bottom: -110px;
	translate: none;
	margin: 0;
	border-color: rgba(255, 255, 255, 0.15);
}
.fcoms-orbit-sm i {
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
}
.fcoms-talk-label {
	margin: 36px 0 10px !important;
	color: #9aa4b2;
	font-size: 0.95rem;
}
.wp-block-list.fcoms-talk {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.fcoms-talk a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 650;
	text-decoration: none;
}
.fcoms-talk a::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--fcoms-i-arrow) center / contain no-repeat;
	mask: var(--fcoms-i-arrow) center / contain no-repeat;
	transition: transform 0.2s;
}
.fcoms-talk a:hover {
	color: var(--c-comm);
}
.fcoms-talk a:hover::before {
	transform: translateX(3px);
}
.wp-block-group.fcoms-contact-form {
	padding: 48px;
}
.fcoms-contact-form .fcoms-small {
	margin-top: 12px;
}

/* ---------- Phones and tablets ---------- */
@media (max-width: 781px) {
	.wp-block-columns.fcoms-hero-grid > .wp-block-column:first-child,
	.wp-block-columns.fcoms-review > .wp-block-column:first-child,
	.wp-block-columns.fcoms-contact-cols > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}
	.wp-block-group.fcoms-collage {
		height: 380px;
		margin-top: 8px;
	}
	.fcoms-collage .fcoms-ph-main { width: 76%; height: 240px; left: 12%; top: 60px; }
	.fcoms-collage .fcoms-ph-a { width: 40%; height: 120px; bottom: 10px; }
	.fcoms-collage .fcoms-ph-b { width: 38%; height: 110px; top: 0; }
	.fcoms-collage .fcoms-chip-review { left: 4%; top: 14px; }
	.fcoms-collage .fcoms-chip-time { right: 0; bottom: 24px; }
	.fcoms-chip { font-size: 0.75rem; padding: 10px 12px; }
	.fcoms-collage .fcoms-chip-time { padding-left: 56px; }
	.fcoms-steps::before,
	.fcoms-steps::after {
		display: none;
	}
	.wp-block-group.fcoms-flow {
		grid-template-columns: minmax(0, 1fr);
	}
	.wp-block-group.fcoms-flow > .fcoms-pipe {
		width: 4px;
		height: 44px;
		margin: 6px auto;
		background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0 8px, transparent 8px 16px);
	}
	.fcoms-pipe i {
		display: none;
	}
	.wp-block-group.fcoms-quote-card,
	.wp-block-group.fcoms-contact-side,
	.wp-block-group.fcoms-contact-form {
		padding: 36px 24px;
	}
	.wp-block-columns.fcoms-review,
	.wp-block-columns.fcoms-band-grid {
		gap: 40px;
	}
}

/* ==========================================================================
   Motion (design-refresh-plan.md §3). Nothing below runs when the visitor's device asks for
   reduced motion: the page shows its finished state straight away.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Cross-page fades; the header stays put */
	@view-transition {
		navigation: auto;
	}
}

/* Scroll reveals (Block Styles "Reveal" and "Reveal (stagger children)"). Hidden only once
   motion.js has run, so the content is always there without JavaScript. */
html.fcoms-motion .is-style-fcoms-reveal,
html.fcoms-motion .is-style-fcoms-stagger > *,
html.fcoms-motion .fcoms-auto-reveal {
	transition: opacity 0.6s var(--fcoms-ease), transform 0.6s var(--fcoms-ease);
}
html.fcoms-motion .is-style-fcoms-reveal:not(.is-in),
html.fcoms-motion .is-style-fcoms-stagger:not(.is-in) > *,
html.fcoms-motion .fcoms-auto-reveal:not(.is-in) {
	opacity: 0;
	transform: translateY(24px);
}
html.fcoms-motion .is-style-fcoms-stagger > :nth-child(2) { transition-delay: 0.07s; }
html.fcoms-motion .is-style-fcoms-stagger > :nth-child(3) { transition-delay: 0.14s; }
html.fcoms-motion .is-style-fcoms-stagger > :nth-child(4) { transition-delay: 0.21s; }

/* Timeline line draws, then each dot pops in its logo colour */
html.fcoms-motion .fcoms-steps:not(.is-in)::after {
	transform: scaleX(0);
}
html.fcoms-motion .fcoms-steps:not(.is-in) .fcoms-step-dot {
	transform: scale(0.4);
	opacity: 0;
}
/* The five review stars fill in one by one */
html.fcoms-motion .fcoms-stars-lg:not(.is-in) span {
	transform: scale(0.3) rotate(-30deg);
	opacity: 0.15;
	color: #d1d5db;
}

/* Lift on hover (Block Style) */
html.fcoms-motion .is-style-fcoms-lift {
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
html.fcoms-motion .is-style-fcoms-lift:hover,
html.fcoms-motion .is-style-fcoms-lift:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--fcoms-shadow);
}

/* Images fade in once loaded (motion.js marks lazy images that are still loading) */
html.fcoms-motion .entry-content img {
	transition: opacity 0.5s ease-out;
}
html.fcoms-motion .entry-content img.fcoms-img-wait {
	opacity: 0;
}

/* Header: the phone icon rings once */
html.fcoms-motion .site-header .header-html a::before {
	animation: fcoms-ring 0.9s 1.1s ease-in-out 1 both;
}

/* Hero (approved in the preview, 20 Oct). The main photo and the H1 never animate in (LCP). */
html.fcoms-motion .fcoms-home-hero .fcoms-orbit {
	animation: fcoms-ring-in 1.4s var(--fcoms-ease) both, fcoms-spin 40s linear infinite;
}
html.fcoms-motion .fcoms-home-hero .fcoms-orbit i {
	animation: fcoms-fade-in 0.5s ease-out both, fcoms-breathe 5s ease-in-out infinite;
}
html.fcoms-motion .fcoms-home-hero .fcoms-orbit i:nth-child(1) { animation-delay: 0.55s, 1.2s; }
html.fcoms-motion .fcoms-home-hero .fcoms-orbit i:nth-child(2) { animation-delay: 0.7s, 2.45s; }
html.fcoms-motion .fcoms-home-hero .fcoms-orbit i:nth-child(3) { animation-delay: 0.85s, 3.7s; }
html.fcoms-motion .fcoms-home-hero .fcoms-orbit i:nth-child(4) { animation-delay: 1s, 4.95s; }
html.fcoms-motion .fcoms-collage .fcoms-ph-b { animation: fcoms-pop-in 1s 0.2s var(--fcoms-ease) both; }
html.fcoms-motion .fcoms-collage .fcoms-ph-a { animation: fcoms-pop-in 1s 0.38s var(--fcoms-ease) both; }
html.fcoms-motion .fcoms-home-hero mark.fcoms-mark::before { animation: fcoms-swipe 0.9s 0.35s var(--fcoms-ease) both; }
html.fcoms-motion .fcoms-collage .fcoms-chip-review { animation: fcoms-pop-in 0.8s 0.85s var(--fcoms-ease) both, fcoms-bob 7s 2.6s ease-in-out infinite; }
html.fcoms-motion .fcoms-collage .fcoms-chip-time { animation: fcoms-pop-in 0.8s 1.05s var(--fcoms-ease) both, fcoms-bob 6s 1.9s ease-in-out infinite; }
html.fcoms-motion .fcoms-trust li { animation: fcoms-rise 0.5s ease-out both; }
html.fcoms-motion .fcoms-trust li:nth-child(2) { animation-delay: 0.08s; }
html.fcoms-motion .fcoms-trust li:nth-child(3) { animation-delay: 0.16s; }
/* One slow light sweep across the main button */
html.fcoms-motion .fcoms-hero-buttons .wp-block-button:first-child .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	left: -60%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	animation: fcoms-shine 1.2s 1.4s ease-out 1 both;
}
/* With a mouse, the collage layers shift at different depths (motion.js sets --mx and --my);
   the photos drift at different speeds as you scroll (--sy, 0 to 1 over the first 700px) */
@media (pointer: fine) {
	html.fcoms-motion .fcoms-collage > * {
		transition: translate 0.9s var(--fcoms-ease);
	}
	html.fcoms-motion .fcoms-collage > .fcoms-orbit { translate: calc(-50% + var(--mx, 0) * -12px) calc(-50% + var(--my, 0) * -12px); }
	html.fcoms-motion .fcoms-collage .fcoms-ph-main { translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 8px); transform: translateY(calc(var(--sy, 0) * -40px)); }
	html.fcoms-motion .fcoms-collage .fcoms-ph-b { translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 16px); transform: translateY(calc(var(--sy, 0) * 30px)); }
	html.fcoms-motion .fcoms-collage .fcoms-ph-a { translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 20px); transform: translateY(calc(var(--sy, 0) * -80px)); }
	html.fcoms-motion .fcoms-collage .fcoms-chip-time { translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 26px); }
	html.fcoms-motion .fcoms-collage .fcoms-chip-review { translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 22px); }
}

/* Client strip marquee: pauses on hover and keyboard focus. Founder decision (20 Oct): it scrolls
   under reduced motion too, at half speed, so it isn't gated on .fcoms-motion like the rest. */
.wp-block-list.fcoms-marquee.is-looping {
	animation: fcoms-marquee 48s linear infinite;
}
.fcoms-strip:hover .is-looping,
.fcoms-strip:focus-within .is-looping {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-list.fcoms-marquee.is-looping {
		animation-duration: 96s;
	}
}

/* Community flow: dots travel from your project to local families */
html.fcoms-motion .fcoms-pipe i { animation: fcoms-travel 2.8s linear infinite; }
html.fcoms-motion .fcoms-pipe i:nth-child(2) { animation-delay: 0.93s; }
html.fcoms-motion .fcoms-pipe i:nth-child(3) { animation-delay: 1.86s; }

/* Contact card ring and the closing CTA gradient turn slowly */
html.fcoms-motion .fcoms-contact-side > .fcoms-orbit-sm { animation: fcoms-spin 50s linear infinite reverse; }
html.fcoms-motion .fcoms-cta { animation: fcoms-drift 24s ease-in-out infinite alternate; }


@keyframes fcoms-spin { to { transform: rotate(360deg); } }
@keyframes fcoms-ring-in { from { opacity: 0; scale: 0.82; } to { opacity: 1; scale: 1; } }
@keyframes fcoms-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fcoms-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.2; } }
@keyframes fcoms-pop-in { from { opacity: 0; scale: 0.86; } to { opacity: 1; scale: 1; } }
@keyframes fcoms-swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fcoms-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fcoms-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fcoms-shine { from { left: -60%; } to { left: 130%; } }
@keyframes fcoms-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes fcoms-marquee { to { transform: translateX(-50%); } }
@keyframes fcoms-travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes fcoms-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }