/*
Theme Name: First Class Services
Theme URI: https://firstclassservices.ng/
Author: First Class Services Limited
Description: Block theme for FIRST CLASS SERVICES LIMITED — a Nigerian technology-led solutions company. Built for mobile performance and WCAG 2.1 AA, with no page-builder dependency.
Version: 1.10.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: first-class-services
Tags: block-theme, business, full-site-editing, accessibility-ready, one-column
*/

/* ==========================================================================
   Contents
   1.  Base and accessibility primitives
   2.  Utility bar
   3.  Header and navigation
   4.  Hero
   5.  Page hero and breadcrumb
   6.  Section furniture
   7.  Cards and grids
   8.  Contact and forms
   9.  Footer
   10. Floating WhatsApp button
   11. Motion
   ========================================================================== */


/* ==========================================================================
   1. Base and accessibility primitives
   ========================================================================== */

:root {
	/* Updated by site.js so anchored sections clear the sticky header without
	   a hard-coded pixel value. */
	--fcs-header-bottom: 82px;
	--fcs-focus-ring: var(--wp--preset--color--accent-ink);
}

html {
	scroll-behavior: smooth;
}

/* Anything with an id can be a link target, so every one of them needs to
   clear the sticky header. The static build had none of this. */
[id] {
	scroll-margin-top: calc(var(--fcs-header-bottom) + 1.5rem);
}

body {
	overflow-x: hidden;
}

/* Long unbroken strings — the company email address is 35 characters — used to
   force the contact panel wider than a 375px viewport. */
body {
	overflow-wrap: break-word;
}

/* A single, unmistakable focus indicator for every interactive element.
   The old build set outline:none on form fields and defined nothing else. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--fcs-focus-ring);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Dark surfaces need a light ring to stay visible. */
:where(.fcs-topbar, .fcs-hero, .fcs-page-hero, .fcs-footer, .fcs-panel--navy)
	:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: #ffffff;
}

.skip-link:focus,
.skip-link:focus-visible {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 14px 20px;
	background: var(--wp--preset--color--navy);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--small);
	box-shadow: var(--wp--custom--shadow--raised);
}

.fcs-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Every tap target reaches 44x44, which the old 36x46 menu button did not. */
:where(.fcs-nav-toggle, .fcs-whatsapp, .fcs-icon-button) {
	min-width: 44px;
	min-height: 44px;
}

img {
	max-width: 100%;
	height: auto;
}


/* ==========================================================================
   2. Utility bar
   ========================================================================== */

.fcs-topbar {
	background: var(--wp--preset--color--navy-deep);
	color: #d7e2ec;
	font-size: var(--wp--preset--font-size--x-small);
}

.fcs-topbar a {
	color: #ffffff;
	text-decoration: none;
}

.fcs-topbar a:hover {
	text-decoration: underline;
}

.fcs-topbar .wp-block-group {
	gap: 1.25rem;
}


/* ==========================================================================
   3. Header and navigation
   ========================================================================== */

/* The navigation is a floating capsule (see refined.css). The strip around it
   paints nothing, so neither the background nor the rule under it survives. */
.fcs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: transparent;
}

/* The frosted glass moved onto the capsule itself; see the floating capsule
   section of refined.css. Nothing is painted at this width any more. */

.fcs-header .wp-block-site-logo img {
	width: auto;
	max-height: 52px;
}

/* The logo plus seven links needs ~740px of nav. Between the overlay
   breakpoint and a roomy desktop, give the gap and the logo somewhere to go
   so the bar stays on one line instead of dropping Contact Us to a second row. */
@media (max-width: 81.25rem) {
	.fcs-header .wp-block-site-logo img {
		max-height: 44px;
	}
}

.fcs-nav.wp-block-navigation {
	column-gap: clamp(0.85rem, 1.5vw, 1.6rem);
	row-gap: 0.5rem;
}

/* The menu is core's Navigation block, so the client edits it in the Site
   Editor and the mobile overlay comes with core's tested focus trap, Escape
   handling and aria wiring. What follows is presentation only. */

.fcs-nav {
	font-weight: 700;
}

.fcs-nav .wp-block-navigation-item__content {
	position: relative;
	color: #27455e;
	text-decoration: none;
	padding-block: 0.35rem;
}

.fcs-nav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--accent-ink);
	transition: width var(--wp--custom--transition);
}

.fcs-nav .wp-block-navigation-item__content:hover::after,
.fcs-nav .current-menu-item .wp-block-navigation-item__content::after,
.fcs-nav [aria-current='page']::after {
	width: 100%;
}

/* The final item is styled as the primary call to action. */
.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child
	.wp-block-navigation-item__content {
	padding: 0.7rem 1.35rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent-ink);
	color: #ffffff;
}

.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child
	.wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--navy);
}

.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child
	.wp-block-navigation-item__content::after {
	display: none;
}

/* Core's hamburger: bring it up to a 44px tap target. The old build's was
   36x46, which misses the minimum on the horizontal axis.
   Note: no `display` here. Core owns that, and setting it unconditionally
   outranked core's own rule, leaving the hamburger visible on desktop
   alongside the full menu. */
.fcs-nav .wp-block-navigation__responsive-container-open,
.fcs-nav .wp-block-navigation__responsive-container-close {
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--navy);
}

/* Move the overlay breakpoint out from core's 600px to 62rem. Seven items,
   one of them "IT & Digital Solutions", wrap badly in between. */
@media (max-width: 61.999rem) {
	.fcs-nav
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.fcs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: grid;
	}
}

@media (min-width: 62rem) {
	.fcs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

.fcs-nav .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--soft);
}

/* The open overlay */
.fcs-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 5vw, 2.5rem);
}

.fcs-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 2rem;
}

.fcs-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	padding-block: 0.85rem;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
}

.fcs-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	display: none;
}

.fcs-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container
	> .wp-block-navigation-item:last-child
	.wp-block-navigation-item__content {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--medium);
}


/* ==========================================================================
   4. Hero
   ========================================================================== */

/* The static build made .hero a flex row and then switched .hero-strip to
   position:relative below 980px, which turned the strip into a sibling column
   beside the headline and collapsed the content to 429px with no left gutter.
   Grid rows remove the whole failure mode: the strip is always its own row. */
.fcs-hero {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: min(88vh, 760px);
	isolation: isolate;
	background: var(--wp--preset--color--navy-deep);
	color: #ffffff;
	overflow: hidden;
}

.fcs-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.fcs-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Text over live photography.
 *
 * The overlay is sized from the worst case rather than by eye: against a
 * blown-out white pixel, white text needs roughly 0.60 alpha to clear 4.5:1,
 * but the orange accent in the headline needs 0.90. The text lane therefore
 * holds >=0.90 all the way across, and only the right edge — where no text
 * ever lands — lightens enough to show the photograph.
 */
.fcs-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Positive, not negative. .fcs-hero__media is itself a stacking context
	   (position:absolute + z-index:-2), so a negative z-index here would paint
	   the scrim behind the photo it is meant to cover. */
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(7, 26, 43, 0.95) 0%,
		rgba(7, 26, 43, 0.93) 50%,
		rgba(7, 26, 43, 0.9) 64%,
		rgba(7, 26, 43, 0.55) 84%,
		rgba(7, 26, 43, 0.28) 100%
	);
}

/* Below the point where the headline stops being confined to a left lane, the
   scrim has to be uniform — there is no safe bright side any more. */
@media (max-width: 61.999rem) {
	.fcs-hero__media::after {
		background: linear-gradient(
			160deg,
			rgba(7, 26, 43, 0.92) 0%,
			rgba(7, 26, 43, 0.93) 60%,
			rgba(7, 26, 43, 0.95) 100%
		);
	}
}

.fcs-hero__body {
	display: flex;
	align-items: center;
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

.fcs-hero__content {
	max-width: 46rem;
}

.fcs-hero h1 {
	color: #ffffff;
	font-size: var(--wp--preset--font-size--hero);
	line-height: 0.98;
	letter-spacing: -0.05em;
}

.fcs-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--accent);
}

.fcs-hero p {
	color: #dbe6ef;
	max-width: 40rem;
}

.fcs-hero .fcs-eyebrow {
	color: #b9c7d4;
}

/* The capability strip: its own grid row, full width, at every size. */
.fcs-hero__strip {
	position: relative;
	z-index: 1;
	background: rgba(11, 31, 51, 0.9);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@supports (backdrop-filter: blur(12px)) {
	.fcs-hero__strip {
		backdrop-filter: blur(12px);
	}
}

.fcs-hero__strip .fcs-strip-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
}

.fcs-hero__strip .fcs-strip-item {
	padding: 1.25rem 1.5rem;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.fcs-hero__strip .fcs-strip-item:last-child {
	border-right: 0;
}

.fcs-hero__strip strong {
	display: block;
	color: #ffffff;
	font-size: var(--wp--preset--font-size--small);
}

.fcs-hero__strip span {
	font-size: var(--wp--preset--font-size--x-small);
	color: #b7c9d7;
}

@media (max-width: 61.999rem) {
	.fcs-hero__strip .fcs-strip-grid {
		grid-template-columns: 1fr 1fr;
	}

	.fcs-hero__strip .fcs-strip-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.fcs-hero__strip .fcs-strip-item:nth-child(2n) {
		border-right: 0;
	}
}

@media (max-width: 40rem) {
	.fcs-hero__strip .fcs-strip-grid {
		grid-template-columns: 1fr;
	}

	.fcs-hero__strip .fcs-strip-item {
		border-right: 0;
		padding: 0.9rem 0;
	}
}


/* ==========================================================================
   5. Page hero and breadcrumb
   ========================================================================== */

.fcs-page-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--navy-deep);
	color: #ffffff;
	padding-block: clamp(4rem, 9vw, 6.5rem);
}

.fcs-page-hero::after {
	content: '';
	position: absolute;
	right: -9rem;
	top: -10rem;
	width: 28rem;
	height: 28rem;
	border: 5.5rem solid rgba(244, 123, 32, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.fcs-page-hero > * {
	position: relative;
	z-index: 1;
}

.fcs-page-hero h1 {
	color: #ffffff;
}

.fcs-page-hero p {
	color: #cfdae3;
	max-width: 48rem;
}

.fcs-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #a8bccc;
	margin-bottom: 1.75rem;
}

.fcs-breadcrumb a {
	color: #ffffff;
}


/* ==========================================================================
   6. Section furniture
   ========================================================================== */

.fcs-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* 800 at 11px uppercase with this much tracking reads as shouting. The
	   label only has to be findable, not loud. */
	font-weight: 600;
	/* Orange used to mark every section label, which left nine orange words on
	   the homepage and no way for the one orange button to stand out. The label
	   is now neutral and the square below carries the job the colour was doing.
	   #5c6e80 is 5.25:1 on white and 4.79:1 on the soft panels. */
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.75rem;
}

/* A solid square instead of a colour change: it reads as a specification
   marker rather than decoration, which is the register this company works in.
   currentColor keeps it neutral on light panels and light on dark ones.

   inline-block rather than a flex item on purpose. These labels are long
   enough to wrap at narrow widths, and a flex row would centre the square
   against both lines; this way it stays on the first line where it belongs. */
.fcs-eyebrow::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 0.625rem;
	/* Sits the square on the cap-height of the uppercase text. */
	vertical-align: 0.15em;
	background: currentColor;
}

.fcs-lead {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
	max-width: 45rem;
}

.fcs-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--accent-ink);
	text-decoration: none;
}

.fcs-text-link:hover {
	text-decoration: underline;
}

.fcs-text-link svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	transition: transform var(--wp--custom--transition);
}

.fcs-text-link:hover svg {
	transform: translateX(3px);
}

.fcs-panel--navy {
	/* The mid-tone: see .fcs-digital-section in refined.css for why. */
	background: var(--wp--preset--color--navy-mid);
	color: #ffffff;
	border-radius: var(--wp--custom--radius--x-large);
}

.fcs-panel--navy :is(h1, h2, h3, h4) {
	color: #ffffff;
}

.fcs-panel--navy p {
	color: #cbd9e4;
}

/* On dark panels the label goes light rather than orange, for the same reason
   it went neutral on white: orange is now reserved for the call to action.
   #b9c7d4 is 8.24:1 on navy-deep. */
.fcs-panel--navy .fcs-eyebrow {
	color: #b9c7d4;
}


/* ==========================================================================
   7. Cards and grids
   ========================================================================== */

.fcs-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	padding: 1.75rem;
	background: #ffffff;
	transition: transform var(--wp--custom--transition),
		border-color var(--wp--custom--transition);
}

/* Hover darkens the hairline instead of floating the card. A drop shadow is
   the most dated thing a card can do, and the border already defines it. */
.fcs-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--muted);
}

.fcs-card__icon {
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	margin-bottom: 1.25rem;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--accent-wash);
	/* 2.50:1 on the wash before; this token is 4.69:1. */
	color: var(--wp--preset--color--accent-ink);
	font-weight: 900;
}

/* Service cards: whole-card links, so the hit area is the card not the text. */
.fcs-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 20rem;
	padding: 2rem;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--navy);
	color: #ffffff;
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--wp--custom--transition);
}

.fcs-service-card:nth-child(2) {
	background: #173f61;
}

.fcs-service-card:nth-child(3) {
	background: #0c2237;
}

.fcs-service-card:hover {
	transform: translateY(-4px);
}

.fcs-service-card h3 {
	color: #ffffff;
	margin-bottom: 0.6rem;
}

.fcs-service-card p {
	color: #c9d7e2;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.fcs-service-card__num {
	position: absolute;
	top: 2rem;
	left: 2rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.15em;
	color: #a3b7c7;
}

.fcs-service-card__arrow {
	position: absolute;
	right: 1.6rem;
	bottom: 1.4rem;
	color: var(--wp--preset--color--accent);
	font-size: 1.75rem;
	line-height: 1;
}

/* Industries: a hairline matrix that reflows without orphan cells. */
.fcs-industries {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 1px solid var(--wp--preset--color--line);
}

.fcs-industry {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	min-height: 9rem;
	padding: 1.5rem 1.15rem;
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: #ffffff;
}

.fcs-industry span {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--accent-ink);
	line-height: 1;
}

.fcs-industry b {
	color: var(--wp--preset--color--navy);
}

/* Process steps */
.fcs-process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 0;
}

.fcs-step {
	position: relative;
	padding: 1.5rem 1.5rem 2rem;
	border-top: 3px solid var(--wp--preset--color--line);
}

.fcs-step::before {
	content: '';
	position: absolute;
	top: -0.5rem;
	left: 1.5rem;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

.fcs-step span {
	display: block;
	margin-bottom: 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.fcs-step b {
	display: block;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.35rem;
}

.fcs-step p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Fact tiles */
.fcs-fact {
	padding: 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	background: #ffffff;
}

.fcs-fact strong {
	display: block;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--navy);
	line-height: 1.15;
}

.fcs-fact span {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Shared responsive grids. auto-fit with a min track means no breakpoint has to
   be hand-written and no row is ever left with an orphan card. */
.fcs-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 1.375rem;
}

.fcs-demo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: 1.75rem;
}

.fcs-reason-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1rem;
}

.fcs-card--flat:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--wp--preset--color--line);
}

.fcs-card--flat strong {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
}

.fcs-card--flat p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Demo cards */
.fcs-demo {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	background: #ffffff;
	overflow: hidden;
}

.fcs-demo__img {
	background: #eef4f8;
	padding: 1.125rem;
}

.fcs-demo__img img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--small);
	border: 1px solid #d8e2e9;
}

.fcs-demo__copy {
	padding: 1.75rem;
}

.fcs-demo__copy h3 {
	margin: 0 0 0.5rem;
}

.fcs-demo__copy p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Core-division feature panel */
.fcs-feature-panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: 2.5rem;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--wp--custom--radius--x-large);
	background: var(--wp--preset--gradient--navy-panel);
	color: #ffffff;
}

.fcs-feature-panel::before {
	content: '';
	position: absolute;
	right: -9rem;
	top: -9rem;
	width: 22rem;
	height: 22rem;
	border: 5rem solid rgba(244, 123, 32, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.fcs-feature-panel__copy {
	position: relative;
	z-index: 1;
}

.fcs-feature-panel__copy h2 {
	color: #ffffff;
	font-size: var(--wp--preset--font-size--display);
	margin: 0 0 1rem;
}

.fcs-feature-panel__copy p {
	color: #d3e0ea;
}

/* On the dark side of this panel the original brand orange is correct at
   6.1:1. Scoped to __copy on purpose: the inner card is white, and letting
   this cascade into it put the eyebrow back at 2.73:1. */
.fcs-feature-panel__copy .fcs-eyebrow {
	color: #b9c7d4;
}

.fcs-cap-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: 0.75rem;
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.fcs-cap-list li {
	padding: 0.875rem 1rem;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--small);
	font-size: var(--wp--preset--font-size--small);
}

/* On a dark panel, orange fill with navy text is the accessible pairing —
   white on orange is only 2.73:1. */
.fcs-button--accent {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy-deep);
	text-decoration: none;
}

.fcs-button--accent:hover {
	background: #ffffff;
	color: var(--wp--preset--color--navy-deep);
}

.fcs-feature-panel__card {
	position: relative;
	z-index: 1;
	padding: 1.625rem;
	border-radius: var(--wp--custom--radius--medium);
	background: #ffffff;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
}

.fcs-feature-panel__card h3 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.fcs-mini-ui {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
	gap: 0.75rem;
}

.fcs-mini-ui div {
	padding: 1.125rem;
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
}

.fcs-mini-ui strong {
	display: block;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--large);
}

.fcs-mini-ui span {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Closing CTA */
.fcs-cta {
	position: relative;
	overflow: hidden;
}

.fcs-cta::after {
	content: '';
	position: absolute;
	right: -5.5rem;
	top: -5.5rem;
	width: 16rem;
	height: 16rem;
	border: 3.5rem solid rgba(244, 123, 32, 0.18);
	border-radius: 50%;
	pointer-events: none;
}

.fcs-cta > * {
	position: relative;
	z-index: 1;
}

/* Photo card with caption */
.fcs-photo-card {
	position: relative;
	border-radius: var(--wp--custom--radius--x-large);
	overflow: hidden;
}

.fcs-photo-card img {
	width: 100%;
	height: clamp(20rem, 45vw, 32rem);
	object-fit: cover;
	display: block;
}

.fcs-photo-card figcaption {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	padding: 1rem 1.1rem;
	background: rgba(16, 42, 67, 0.92);
	color: #ffffff;
	border-radius: var(--wp--custom--radius--small);
	font-size: var(--wp--preset--font-size--x-small);
}


/* ==========================================================================
   8. Contact and forms
   ========================================================================== */

.fcs-contact-panel {
	background: var(--wp--preset--color--navy);
	color: #ffffff;
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.fcs-contact-panel :is(h2, h3) {
	color: #ffffff;
}

.fcs-contact-panel p {
	color: #d1dee8;
}

.fcs-contact-row {
	padding: 1.1rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	/* The 35-character email address was the source of the 375px overflow. */
	overflow-wrap: anywhere;
}

.fcs-contact-row b {
	display: block;
	color: #ffffff;
	margin-bottom: 0.2rem;
}

.fcs-contact-row a {
	color: #e4edf4;
}

/* Form */
.fcs-form {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(1.25rem, 4vw, 2.125rem);
	background: #ffffff;
}

.fcs-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1.1rem;
}

.fcs-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
	min-width: 0;
}

.fcs-field--full {
	grid-column: 1 / -1;
}

.fcs-field label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	color: var(--wp--preset--color--navy);
}

.fcs-req {
	color: var(--wp--preset--color--accent-ink);
}

.fcs-field :is(input, select, textarea) {
	width: 100%;
	padding: 0.8rem 0.875rem;
	border: 1px solid #b9c7d3;
	border-radius: var(--wp--custom--radius--small);
	background: #ffffff;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

/* Focus is a real ring now, not outline:none plus a 12%-opacity shadow. */
.fcs-field :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-ink);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-ink);
}

.fcs-field :is(input, select, textarea):user-invalid {
	border-color: #b3261e;
}

.fcs-hint {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.fcs-field--submit {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.fcs-required-note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.fcs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fcs-notice {
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: var(--wp--custom--radius--small);
	border-left: 4px solid;
}

.fcs-notice:focus {
	outline: 3px solid var(--fcs-focus-ring);
	outline-offset: 2px;
}

.fcs-notice p {
	margin: 0 0 0.35rem;
}

.fcs-notice p:last-child,
.fcs-notice ul:last-child {
	margin-bottom: 0;
}

.fcs-notice--success {
	background: #eaf5ee;
	border-color: #1c6b3a;
	color: #12522b;
}

.fcs-notice--error {
	background: #fdecea;
	border-color: #b3261e;
	color: #8c1d18;
}

.fcs-notice ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.fcs-editor-note {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--soft);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}


/* ==========================================================================
   9. Footer
   ========================================================================== */

.fcs-footer {
	background: var(--wp--preset--color--navy-darkest);
	color: #c2d2df;
}

.fcs-footer :is(h2, h3, h4) {
	color: #ffffff;
}

.fcs-footer a {
	color: #c2d2df;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.fcs-footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.fcs-footer .wp-block-navigation__container,
.fcs-footer .wp-block-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.fcs-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
}


/* ==========================================================================
   10. Floating WhatsApp button
   ========================================================================== */

.fcs-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	/* Darker than WhatsApp's #25D366, which puts the white glyph at 1.98:1.
	   This is 5.10:1 and still unmistakably WhatsApp green. */
	background: #0f7f3b;
	color: #ffffff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
	transition: transform var(--wp--custom--transition);
}

.fcs-whatsapp:hover {
	transform: scale(1.06);
}

.fcs-whatsapp svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: currentColor;
}

/* Keep the button clear of the submit row on narrow screens. */
@media (max-width: 40rem) {
	.fcs-field--submit {
		padding-bottom: 3.5rem;
	}
}


/* ==========================================================================
   11. Motion
   ========================================================================== */

/* The hidden state is scoped to .fcs-js, which an inline head script sets. With
   JavaScript blocked or broken the class never lands and every section renders
   normally — the old build left 18 elements at opacity:0 in that case. */
.fcs-js .fcs-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s ease;
}

.fcs-js .fcs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.fcs-js .fcs-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}