/* First Class Services / Refined direction, 1.1.0.
 * Shared presentation only. Forms and core navigation retain their behaviour. */
:root { --fcs-paper:#f6f7f3; --fcs-ease:cubic-bezier(.22,1,.36,1); }
body { background:#fff; }
::selection { color:#fff; background:#102a43; }
main h1, main h2 { text-wrap:balance; }
main p { text-wrap:pretty; }
.wp-site-blocks > * + *, .wp-site-blocks > main > .fcs-hero { margin-block-start:0; }
/* The navigation is a floating capsule, so the strip it used to live in paints
   nothing at all. These three rules described that strip: a white background,
   a hairline, and a second hairline once the page moved. Setting them to
   transparent here rather than overriding them later means there is no cascade
   path left that can put a white band back behind the capsule. */
.fcs-header-shell { position:sticky; top:0; z-index:80; background:transparent; }
.fcs-header { position:relative; background:transparent; border-bottom:1px solid transparent; transition:border-color .25s; }
.fcs-topbar { background:var(--fcs-paper); color:#526575; }
/* The bar is a dark navy gradient further down this file, but this rule was
   written when it was still paper-coloured, so the phone number rendered navy
   on navy at 1.07:1 — present, but invisible. Inheriting the bar's own colour
   puts it at 9.55:1. It matters more than it looks: at phone widths the
   address is hidden, so this link is the only thing in the bar. */
.fcs-topbar a { color: inherit; }
.fcs-topbar p { font-size: 12px; }
.fcs-header .wp-block-site-logo img { max-height:42px; max-width:220px; }
.fcs-nav { font-size:13px; font-weight:600; }
.fcs-nav .wp-block-navigation__container { gap:clamp(.8rem,1.4vw,1.4rem); }
.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content { background:#102a43; border-radius:999px; padding:.85rem 1.25rem; }
.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content:hover { background:#b85200; }
.fcs-eyebrow { font-size: 12px; font-weight:600; letter-spacing:.15em; line-height:1.6; }
.wp-element-button, .wp-block-button__link { transition:transform .25s var(--fcs-ease),background .25s; }
.wp-element-button:hover, .wp-block-button__link:hover { transform:translateY(-2px); }
.wp-element-button span[aria-hidden] { display:inline-block; margin-left:1rem; transition:transform .25s; }
.wp-element-button:hover span[aria-hidden] { transform:translate(2px,-2px); }
.fcs-text-link { font-size:.88rem; text-underline-offset:5px; }
.fcs-text-link span { transition:transform .25s; }
.fcs-text-link:hover span { transform:translate(3px,-3px); }
/* ---------------------------------------------------------------------------
   The hero: photography behind the words, not beside them.

   A split hero asks the visitor to choose what to look at first. A full-bleed
   one does not: the picture sets the room and the sentence lands on top of it.

   Legibility is sized from the worst case rather than judged by eye. Against a
   blown-out window in the photograph, white text needs roughly 0.60 alpha of
   scrim to clear 4.5:1, and the orange accent needs 0.90. The text lane
   therefore holds >=0.90 the whole way across; only the far edge lightens,
   where no text ever lands.
   --------------------------------------------------------------------------- */
.fcs-hero--full {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: min(92vh, 860px);
	max-width: none;
	padding: 0;
	isolation: isolate;
	overflow: hidden;
	background: #071a2b;
	color: #fff;
}

.fcs-hero--full > * { min-width: 0; }

.fcs-hero--full .fcs-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	padding: 0;
}

.fcs-hero--full .fcs-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
	border-radius: 0;
	position: static;
}

/* Two layers: a directional scrim for the text lane, and a soft vertical
   gradient so the capability strip has something to sit against. */
.fcs-hero--full .fcs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Even across the width rather than fading out to the right. A directional
	   scrim only works if the words stay in the dark half; this one lets the
	   content sit anywhere, which is what centring it requires.

	   Alphas are measured, not guessed. Worst case is a blown-out white patch
	   of photograph: at 0.86 that composites to rgb(42,58,73), which holds the
	   white headline at 10.9:1 and the orange accent word at 4.29:1 against a
	   3:1 bar for text this size. It deepens toward the bottom so the
	   capability strip has something solid to sit on.
	   Re-measure if the hero photograph is ever replaced. */
	background:
		linear-gradient(to bottom,
			rgba(7, 26, 43, 0.82) 0%,
			rgba(7, 26, 43, 0.86) 45%,
			rgba(7, 26, 43, 0.92) 100%);
}

/* A flow container with its own inset, rather than a constrained one.
   WordPress forces margin-inline:auto !important on constrained children, which
   centres the content and defeats the left lane the scrim is built around. */
.fcs-hero--full .fcs-hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	padding-block: clamp(4rem, 9vw, 7.5rem);
	padding-inline: max(24px, calc((100% - var(--wp--style--global--wide-size)) / 2));
}

/* A centred block with the text left-aligned inside it. The left lane existed
   to keep the accent word out of the light end of a directional scrim; now the
   scrim is even, so the block can sit in the middle where it reads as the
   subject of the photograph rather than a caption pinned to one side.
   Left-aligned inside the block, because centred body copy gives the eye no
   consistent place to start each line. */
.fcs-hero--full .fcs-hero__content {
	max-width: 46rem;
	margin-inline: auto;
}

/* This label had its own orange treatment — pale orange text behind a 26px
   orange rule — which put two more orange marks in the hero and competed with
   the one orange button underneath it. It now uses the same neutral square as
   every other section label on the site. Worst case for #b9c7d4 here is a
   blown-out white patch of photograph under the 0.86 scrim, which composites
   to rgb(42,58,73) and still gives 6.71:1. */
.fcs-hero--full .fcs-hero-kicker {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1.4rem;
	color: #b9c7d4;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
}

.fcs-hero--full .fcs-hero-kicker::before {
	content: '';
	display: block;
	width: 4px;
	height: 4px;
	margin-right: 0;
	background: currentColor;
	border-radius: 0;
	flex: none;
}

.fcs-hero--full h1 {
	margin: 0 0 1.5rem;
	color: #fff;
	font-size: clamp(2.9rem, 6.4vw, 5.4rem);
	font-weight: 620;
	line-height: 1.02;
	letter-spacing: -0.055em;
	text-wrap: balance;
}

/* The one flourish. A serif italic against the tight sans gives the sentence
   somewhere to land, and it carries the brand orange at 6.1:1 on this scrim. */
.fcs-hero--full h1 em {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--accent);
}

.fcs-hero--full .fcs-hero-lede {
	max-width: 34rem;
	margin: 0;
	color: #dce7f0;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.65;
}

.fcs-hero--full .fcs-hero-actions {
	margin-top: 2.25rem;
	gap: 0.85rem;
}

.fcs-hero--full .fcs-hero-actions .wp-element-button { font-size: 0.9rem; }

/* Outlined button on photography needs a solid edge, not a tint. */
.fcs-hero--full .fcs-button--ghost .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(2px);
}

.fcs-hero--full .fcs-button--ghost .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--navy-deep);
	border-color: #fff;
}

/* The capability strip: its own grid row, so it can never overlap the words. */
.fcs-hero--full .fcs-hero__strip {
	position: relative;
	z-index: 2;
	padding: 0 max(24px, calc((100% - var(--wp--style--global--wide-size)) / 2));
	background: rgba(6, 22, 37, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
}

.fcs-hero--full .fcs-strip-inner { padding-block: 0.5rem 0; }

.fcs-hero--full .fcs-strip-heading {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0.9rem 0 0.2rem;
	color: #a8bdcc;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.fcs-hero--full .fcs-strip-heading span:last-child { color: #7f97a9; }

.fcs-hero--full .fcs-strip-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fcs-hero--full .fcs-strip-item {
	position: relative;
	display: block;
	padding: 1.15rem 1.4rem 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
	transition: background .25s var(--fcs-ease);
}

.fcs-hero--full .fcs-strip-item:first-child { padding-left: 0; }
.fcs-hero--full .fcs-strip-item:last-child { border-right: 0; }
.fcs-hero--full .fcs-strip-item:hover { background: rgba(255, 255, 255, 0.08); }

.fcs-hero--full .fcs-strip-item .fcs-strip-index {
	/* Neutral: these are an index, not four calls to action. */
	color: #b9c7d4;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.fcs-hero--full .fcs-strip-item strong {
	display: block;
	margin: 0.5rem 0 0.15rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
}

.fcs-hero--full .fcs-strip-item .fcs-strip-note {
	color: #b7c9d7;
	font-size: 0.78rem;
}

/* An arrow that only appears on intent, so the strip stays calm at rest. */
.fcs-hero--full .fcs-strip-item::after {
	content: '\2192';
	position: absolute;
	right: 1.1rem;
	top: 1rem;
	color: var(--wp--preset--color--accent);
	font-size: 1.1rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .25s, transform .25s;
}

.fcs-hero--full .fcs-strip-item:hover::after,
.fcs-hero--full .fcs-strip-item:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (max-width: 61.999rem) {
	.fcs-hero--full { min-height: min(88vh, 740px); }

	/* No safe bright side once the text spans the full width. */
	.fcs-hero--full .fcs-hero__scrim {
		background:
			linear-gradient(to bottom,
				rgba(7, 26, 43, 0.84) 0%,
				rgba(7, 26, 43, 0.88) 45%,
				rgba(7, 26, 43, 0.93) 100%);
	}

	.fcs-hero--full .fcs-strip-grid { grid-template-columns: 1fr 1fr; }
	.fcs-hero--full .fcs-strip-item:nth-child(2n) { border-right: 0; }
	.fcs-hero--full .fcs-strip-item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
	.fcs-hero--full .fcs-strip-item { padding-inline: 0 1rem; }
}

@media (max-width: 40rem) {
	.fcs-hero--full .fcs-strip-heading span:last-child { display: none; }
	.fcs-hero--full .fcs-strip-grid { grid-template-columns: 1fr; }
	.fcs-hero--full .fcs-strip-item { border-right: 0; padding: 0.9rem 0 1rem; }
	.fcs-hero--full .fcs-strip-item::after { opacity: 1; transform: none; }
}

/* More room between ideas, less decoration between words. */
.fcs-intro { padding-block:clamp(4rem,8vw,8rem) !important; }
.fcs-intro h2 { font-size:clamp(2rem,3.45vw,3.4rem); max-width:15ch; }
.fcs-intro .fcs-lead { font-size:1.1rem; color:#18324a; }
.fcs-intro .has-muted-color { font-size:.95rem; }
.fcs-intro .fcs-photo-card { box-shadow:none; border-radius:4px; }
.fcs-intro .fcs-photo-card img { height:clamp(300px,34vw,455px); }
.fcs-intro .fcs-photo-card figcaption { border-radius:0; left:0; right:2rem; bottom:0; background:#102a43; font-size:.75rem; padding:1.25rem; }

/* A photograph that closes a section, rather than one sitting beside a column
   of text. Same card, shorter: .fcs-photo-card is sized for a half-width
   column, and at the full content width that height turns a photograph into a
   wall. This is the Technical and Logistics sections on the Services page,
   which had no photograph at all until the client's own were available. */
.fcs-photo-band img { height: clamp(14rem, 26vw, 22rem); }
.fcs-fact { padding:1.1rem 0; border:0; border-top:1px solid #dce5ec; border-radius:0; background:transparent; }
.fcs-fact strong { font-size:1.1rem; font-weight:650; letter-spacing:-.035em; }
.fcs-fact span { display:block; margin-top:.4rem; font-size: 0.75rem; }

/* A fact with nothing in it draws its top rule and holds its column anyway, so
   deleting the words out of one leaves an empty bordered box in the row rather
   than closing the gap. That is what happened when the incorporation date was
   taken off the live About page: the text went, the wrapper stayed, and the
   grid kept a third of its width for it. Hidden rather than merely emptied, so
   removing a fact by clearing it has the result a person expects. */
.fcs-fact:not(:has(strong:not(:empty))) { display: none; }
/* Capabilities are native disclosures: work without JavaScript. */
/* The mid-tone. The three navies in the palette measured 1.02:1 to 1.17:1
   against each other — below the roughly 1.2:1 at which the eye separates two
   large flat fields at all — so the dark half of the site read as one block
   from the hero to the footer whichever of them a section used.

   #1c3b5c sits 1.54:1 off the hero and 1.49:1 off the footer, which is a step
   a person can actually see, and it is as light as the palette can go before
   the orange stops carrying: white text holds 11.48:1 on it, the light body
   copy 8.08:1, and the accent orange 4.21:1. A step lighter and the orange
   falls under 3:1 and stops passing for a button.

   It is used on the mid-page panels only. The hero and the footer keep the
   deep navies, so the page now reads dark, lighter, dark rather than flat. */
.fcs-digital-section { background:var(--wp--preset--color--navy-mid); padding:clamp(4rem,7vw,7rem) 24px; }
.fcs-feature-panel { overflow:visible; border-radius:0; padding:0; background:none; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.5rem,7vw,7rem); align-items:start; }
.fcs-feature-panel::before { display:none; }
.fcs-feature-panel__copy h2 { font-size:clamp(2.8rem,4.5vw,4.5rem); font-weight:600; letter-spacing:-.05em; line-height:1.08; margin:1.5rem 0; }
.fcs-feature-panel__copy h2 em { font-family:Georgia,serif; color:#f47b20; font-weight:400; }
.fcs-feature-panel__copy > p:not(.fcs-eyebrow) { max-width:26rem; margin-bottom:2rem; font-size:1rem; }
.fcs-feature-panel .wp-element-button { font-size:.8rem; }
.fcs-digital-signature { display:flex; gap:1.2rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid #ffffff25; color:#a8bdcc; font-size: 12px; letter-spacing:.16em; }
.fcs-capability { border-top:1px solid #ffffff30; }
.fcs-capability:last-child { border-bottom:1px solid #ffffff30; }
.fcs-capability summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:1.5rem 1fr 20px; gap:1rem; align-items:center; padding:1.45rem 0; }
.fcs-capability summary::-webkit-details-marker { display:none; }
.fcs-capability h3 { margin:0; color:#fff; font-size:clamp(.95rem,1.4vw,1.1rem); font-weight:500; letter-spacing:-.025em; line-height:1.5; }
.fcs-capability-index { font-size: 0.75rem; color:#a8bdcc; }
.fcs-capability-symbol { position:relative; width:16px; height:16px; color:#b9c7d4; }
.fcs-capability-symbol::before,.fcs-capability-symbol::after { content:''; position:absolute; background:currentColor; top:7px; left:1px; width:14px; height:1px; transition:transform .25s; }
.fcs-capability-symbol::after { transform:rotate(90deg); }
.fcs-capability[open] .fcs-capability-symbol::after { transform:rotate(0); }
/* Open state reads as brighter, not oranger; the symbol already rotates. */
.fcs-capability[open] summary h3 { color:#ffffff; }
.fcs-capability-description p { color:#cbd9e4; font-size:.88rem; line-height:1.8; margin:0 1.5rem 1.5rem 2.5rem; }
.fcs-capability summary:focus-visible { outline-color:#fff; outline-offset:5px; }
/* A useful interactive moment, with a complete no-JS fallback. */
.fcs-showcase { background:#fff; }
.fcs-showcase-heading h2 { font-size:clamp(2.4rem,4vw,3.8rem); }
.fcs-showcase-heading .fcs-lead { max-width:33rem; font-size:1rem; }
.fcs-system-showcase { margin-top:2.5rem; }
.fcs-demo-controls { display:flex; border-bottom:1px solid #dce5ec; gap:2rem; margin-bottom:0; }
.fcs-demo-controls[hidden] { display:none; }
.fcs-demo-controls button { cursor:pointer; padding:1rem 0; color:#526575; background:transparent; border:0; border-bottom:2px solid transparent; font:inherit; font-size:.85rem; font-weight:600; }
.fcs-demo-controls button span { margin-left:2rem; }
.fcs-demo-controls button[aria-selected=true] { color:#102a43; border-color:#b85200; }
.fcs-system-showcase .fcs-demo-grid { display:block; }
.fcs-system-showcase .fcs-demo { display:grid; grid-template-columns:.8fr 1.25fr; align-items:center; gap:2.5rem; padding:3rem 0; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.fcs-system-showcase .fcs-demo[hidden] { display:none; }
.fcs-demo__copy { padding:0; }
.fcs-demo__copy h3 { font-size:2rem; letter-spacing:-.045em; font-weight:600; }
.fcs-demo__copy > p:not(.fcs-eyebrow) { margin-top:1rem; max-width:25rem; line-height:1.8; }
.fcs-demo__copy ul { list-style:none; padding:0; margin:1.5rem 0 2rem; font-size:.8rem; color:#526575; }
.fcs-demo__copy li { margin:.6rem 0; padding-left:1.3rem; position:relative; }
.fcs-demo__copy li::before { content:'↗'; position:absolute; left:0; color:#b85200; }
.fcs-demo__img { padding:1.8rem; border-radius:10px; background:#edf1ef; }
.fcs-demo__img img { display:block; width:100%; height:auto; border-radius:0 0 4px 4px; }
.fcs-browser-bar { display:flex; gap:4px; align-items:center; padding:.8rem; border:1px solid #d8e2e9; border-bottom:0; border-radius:4px 4px 0 0; background:#fff; }
.fcs-browser-bar span { width:5px; height:5px; border-radius:50%; background:#a9b8bd; }
.fcs-browser-bar b { margin-left:auto; font-size:8px; color:#526575; letter-spacing:.1em; font-weight:500; }
.fcs-demo-caption { margin:1rem 0 0; text-align:center; color:#526575; font-size: 12px; }
/* Supporting services become generous editorial rows. */
.fcs-divisions { background:var(--fcs-paper); }
.fcs-divisions > .alignwide > h2 { font-size:clamp(2.4rem,4vw,3.8rem); }
.fcs-divisions .fcs-lead { font-size:1rem; max-width:33rem; }
.fcs-divisions .fcs-card-grid { display:block; }
.fcs-divisions .fcs-service-card { display:grid; grid-template-columns:1.8fr 2fr 3fr 40px; align-items:center; gap:2rem; min-height:0; padding:2rem 0; border-top:1px solid #cdd7d3; border-radius:0; background:transparent; color:#102a43; }
.fcs-divisions .fcs-service-card:last-child { border-bottom:1px solid #cdd7d3; }
.fcs-divisions .fcs-service-card:hover { transform:none; background:#eaf0e9; }
.fcs-divisions .fcs-service-card__num { position:static; color:#5c6e80; font-size: 12px; letter-spacing:.08em; }
.fcs-divisions .fcs-service-card h3 { color:#102a43; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:600; margin:0; }
.fcs-divisions .fcs-service-card p { color:#526575; font-size:.85rem; line-height:1.8; }
.fcs-divisions .fcs-service-card__arrow { position:static; color:#102a43; font-size:1.4rem; transition:transform .25s; }
.fcs-service-card:hover .fcs-service-card__arrow { transform:translateX(5px); }
.fcs-sectors h2 { font-size:clamp(2.3rem,4vw,3.8rem); }
.fcs-industries { grid-template-columns:repeat(5,minmax(0,1fr)); border:0; gap:0 1.5rem; }
.fcs-industry { border:0; border-top:1px solid #dce5ec; background:none; padding:1.5rem 0; min-height:9rem; gap:1.3rem; }
.fcs-industry span { font-size: 0.75rem; font-weight:500; color:#5c6e80; }
.fcs-industry b { font-weight:500; font-size:.9rem; }
.fcs-why { background:var(--fcs-paper); }
.fcs-why h2 { font-size:clamp(2.4rem,4vw,3.8rem); }
.fcs-why .fcs-lead { font-size:1rem; }
.fcs-reason-grid { grid-template-columns:1fr; gap:0; counter-reset:reasons; }
.fcs-reason-grid .fcs-card { position:relative; padding:1.4rem 0 1.4rem 2.5rem; border:0; border-top:1px solid #d0d9d5; background:transparent; border-radius:0; }
.fcs-reason-grid .fcs-card::before { counter-increment:reasons; content:'0' counter(reasons); position:absolute; top:1.65rem; left:0; color:#b85200; font-size: 12px; }
.fcs-reason-grid .fcs-card strong { font-weight:600; font-size:1rem; }
.fcs-reason-grid .fcs-card p { font-size:.87rem; }
.fcs-process { grid-template-columns:repeat(4,minmax(0,1fr)); }
.fcs-step { padding:2rem 2rem 0 0; border-top:1px solid #dce5ec; }
.fcs-step::before { top:-4px; left:0; width:7px; height:7px; }
.fcs-step span { font-size: 0.75rem; margin-bottom:1.6rem; }
.fcs-step b { font-size:1.25rem; font-weight:600; }
.fcs-step p { font-size:.85rem; }
.fcs-closing { padding-top:2rem !important; padding-bottom:0 !important; }
.fcs-cta { border-radius:4px; padding:clamp(2rem,5vw,5rem) !important; gap:2rem; }
.fcs-cta::after { width:18rem; height:18rem; border-width:1px; right:-5rem; top:-6rem; border-color:#ffffff25; }
.fcs-cta h2 { font-size:clamp(3rem,5.5vw,5.5rem); font-weight:550; letter-spacing:-.055em; line-height:1.08; }
.fcs-cta p { max-width:32rem; font-size:.95rem; }
.fcs-footer { margin-top:4rem !important; }
.fcs-footer a, .fcs-footer p { font-size:.82rem; }
.fcs-footer h2 { font-size:.9rem; }
.fcs-footer .wp-block-site-logo { max-width:220px; }
.fcs-whatsapp { width:48px; height:48px; right:18px; bottom:18px; }
/* Carry the same type and detail language through interior pages. */
.fcs-page-hero { background:var(--fcs-paper); padding-block:clamp(3rem,7vw,6rem); border-bottom:1px solid #dce5ec; }
.fcs-page-hero h1 { color:#102a43; font-size:clamp(2.8rem,5vw,4.8rem); letter-spacing:-.055em; }
.fcs-page-hero p { color:#526575; }
.fcs-page-hero .fcs-breadcrumb, .fcs-page-hero .fcs-breadcrumb a { color:#526575; }
.fcs-page-hero a:focus-visible { outline-color:#b85200; }
.fcs-industry { position:relative; display:grid; grid-template-columns:2.6rem 1fr; grid-template-rows:auto 1fr; align-content:start; gap:.65rem .85rem; min-height:9.5rem; transition:background .25s var(--fcs-ease),transform .25s var(--fcs-ease); }
.fcs-industry::before { content:''; grid-column:1; grid-row:1 / 3; width:2.25rem; height:2.25rem; background:center/contain no-repeat; }
.fcs-industry span { grid-column:2; align-self:start; }
.fcs-industry b { grid-column:2; align-self:end; }
/* Was a warm orange wash. Neutral hover keeps orange for actions only. */
.fcs-industry:hover { background:var(--wp--preset--color--soft); transform:translateY(-2px); }
/* Any card carrying a sector modifier gets its mark, wherever it is used. */
.fcs-card[class*='fcs-card--'] { position:relative; }
.fcs-card[class*='fcs-card--']::after { content:''; position:absolute; top:1.5rem; right:1.5rem; width:2.5rem; height:2.5rem; background:center/contain no-repeat; opacity:.9; }
.fcs-card { box-shadow:none; border-radius:8px; }
.fcs-contact-panel { border-radius:8px; }
.fcs-form { border-radius:8px; }
.fcs-form .fcs-form { padding:0; border:0; }
.fcs-field :is(input,select,textarea) { border-radius:5px; }
/* Enhancement is armed per element only when its observer is ready. */
.fcs-motion-item { transition:opacity .6s var(--fcs-ease),transform .6s var(--fcs-ease); transition-delay:var(--fcs-delay,0ms); }
.fcs-motion-item.fcs-motion-pending { opacity:0; transform:translateY(20px); }
.fcs-motion-item:focus-within { opacity:1; transform:none; }
.fcs-reveal:focus-within { opacity:1; transform:none; }
.fcs-read-progress { position:fixed; left:0; top:0; z-index:100; width:100%; height:2px; background:#b85200; transform:scaleX(0); transform-origin:left; pointer-events:none; }
@media (prefers-reduced-motion:no-preference) {
 .fcs-hero__content > * { animation:fcs-arrive .85s var(--fcs-ease) both; }
 .fcs-hero__content > :nth-child(2) { animation-delay:80ms; }
 .fcs-hero__content > :nth-child(3) { animation-delay:160ms; }
 .fcs-hero__content > :nth-child(4) { animation-delay:240ms; }
 .fcs-hero__content > :nth-child(5) { animation-delay:300ms; }
 .fcs-demo:not([hidden]) .fcs-demo__copy { animation:fcs-arrive .5s var(--fcs-ease); }
 .fcs-demo:not([hidden]) .fcs-demo__img { animation:fcs-arrive .65s var(--fcs-ease); }
 .fcs-capability[open] .fcs-capability-description { animation:fcs-arrive .35s var(--fcs-ease); }
}
@keyframes fcs-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media (max-width:1100px) {
 .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; }
 .fcs-divisions .fcs-service-card { grid-template-columns:1fr 1.5fr 2fr 24px; gap:1.25rem; }
}
@media (max-width:781px) {
 .fcs-topbar__tagline { display:none; }
 .fcs-intro .wp-block-columns { gap:2.5rem; }
 .fcs-intro h2 { max-width:none; }
 .fcs-feature-panel { grid-template-columns:1fr; }
 .fcs-feature-panel__copy h2 { font-size:3.2rem; }
 .fcs-digital-signature { display:none; }
 .fcs-system-showcase .fcs-demo { grid-template-columns:1fr; gap:2rem; padding-top:2rem; }
 .fcs-demo__copy { max-width:100%; }
 .fcs-demo__img { padding:1rem; }
 .fcs-demo-controls { gap:1.5rem; }
 .fcs-demo-controls button { font-size:.8rem; }
 .fcs-demo-controls button span { margin-left:.5rem; }
 .fcs-divisions .fcs-service-card { grid-template-columns:1fr 24px; gap:1rem; }
 .fcs-divisions .fcs-service-card__num { grid-column:1; }
 .fcs-divisions .fcs-service-card h3,.fcs-divisions .fcs-service-card p { grid-column:1; }
 .fcs-divisions .fcs-service-card__arrow { grid-column:2; grid-row:2; }
 .fcs-industries { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fcs-process { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; }
 .fcs-footer { margin-top:3rem !important; }
}
@media (max-width:400px) {
 .fcs-hero-actions .wp-element-button { padding:1rem .9rem; font-size:.75rem; }
 .fcs-hero-actions .wp-element-button span { margin-left:.5rem; }
 .fcs-strip-heading { font-size: 12px; }
 .fcs-capability summary { gap:.6rem; }
 .fcs-capability h3 { font-size:.9rem; }
 .fcs-process { grid-template-columns:1fr; }
 .fcs-demo-controls { gap:1rem; }
 .fcs-demo-controls button { font-size: 0.75rem; }
}
@media (prefers-reduced-motion:reduce) {
 .fcs-motion-item.fcs-motion-pending { opacity:1; transform:none; }
 .fcs-motion-item { transition:none; }
 .fcs-read-progress { display:none; }
 .wp-element-button:hover,.wp-block-button__link:hover { transform:none; }
}
.editor-styles-wrapper .fcs-motion-item,.editor-styles-wrapper .fcs-reveal { opacity:1; transform:none; animation:none; }
@media print {
 .fcs-header-shell,.fcs-whatsapp,.fcs-read-progress,.fcs-demo-controls { display:none !important; }
 .fcs-hero__media { display:none; }
 .fcs-motion-item,.fcs-reveal { opacity:1 !important; transform:none !important; }
 .fcs-system-showcase .fcs-demo[hidden] { display:block; }
}

/* Icons keyed to the sector, not to its position in the list. */
.fcs-industry--oil-gas::before,
.fcs-card--oil-gas::after { background-image:url('../icons/oil-gas.svg'); }
.fcs-industry--energy::before,
.fcs-card--energy::after { background-image:url('../icons/energy.svg'); }
.fcs-industry--engineering::before,
.fcs-card--engineering::after { background-image:url('../icons/engineering.svg'); }
.fcs-industry--government::before,
.fcs-card--government::after { background-image:url('../icons/government.svg'); }
.fcs-industry--professional::before,
.fcs-card--professional::after { background-image:url('../icons/professional.svg'); }
.fcs-industry--education::before,
.fcs-card--education::after { background-image:url('../icons/education.svg'); }
.fcs-industry--healthcare::before,
.fcs-card--healthcare::after { background-image:url('../icons/healthcare.svg'); }
.fcs-industry--retail::before,
.fcs-card--retail::after { background-image:url('../icons/retail.svg'); }
.fcs-industry--manufacturing::before,
.fcs-card--manufacturing::after { background-image:url('../icons/manufacturing.svg'); }
.fcs-industry--logistics::before,
.fcs-card--logistics::after { background-image:url('../icons/logistics.svg'); }


/* ---------------------------------------------------------------------------
   Location map, consent-gated.
   The placeholder has to look deliberate rather than broken, so it carries the
   address and the directions link whether or not the map is ever loaded.
   --------------------------------------------------------------------------- */
.fcs-map {
	position: relative;
	margin-top: 1.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	background:
		linear-gradient(rgba(16, 42, 67, 0.04), rgba(16, 42, 67, 0.04)),
		repeating-linear-gradient(45deg, #f3f5f3 0 14px, #eef1ee 14px 28px);
	overflow: hidden;
}

.fcs-map__placeholder {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	min-height: 15rem;
	align-content: center;
}

.fcs-map__pin {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--wp--preset--color--accent-ink);
}

.fcs-map .fcs-map__address {
	margin: 0;
	max-width: 24rem;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.4;
}

.fcs-map__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: 0.25rem;
}

.fcs-map__load {
	min-height: 44px;
	padding: 0.7rem 1.35rem;
	border-radius: var(--wp--custom--radius--small);
	/* This card is a light striped surface, not the navy panel around it. An
	   earlier pass read the panel instead of the card and made this a white
	   outline with white text, which measured 1.1:1. Navy on the card is
	   10.7:1. */
	background: var(--wp--preset--color--navy);
	border: 0;
	color: #fff;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	cursor: pointer;
	transition: background .25s var(--fcs-ease);
}

.fcs-map__load:hover { background: var(--wp--preset--color--navy-deep); color: #fff; }

.fcs-map__directions {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	/* This card is not white: the stripes carry a 4% navy overlay, so the
	   darkest one composites to rgb(229,233,231). Measured against that, neither
	   orange reaches the 4.5:1 needed at this size — accent is 2.23:1 and
	   accent-ink is 4.04:1. Navy is 11.96:1, and the underline carries the
	   affordance that the colour was carrying. */
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-underline-offset: 4px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.fcs-map .fcs-map__note {
	margin: 0;
	max-width: 32rem;
	/* muted is 4.29:1 on the composited card, just under the bar. This is 4.93:1. */
	color: #526575;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}

.fcs-map.is-loaded {
	background: none;
	aspect-ratio: 16 / 10;
}

.fcs-map.is-loaded iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 40rem) {
	.fcs-map.is-loaded { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
   Page hero backdrop: the page's own Featured Image, not a CSS background.
   The client can change it in the editor, and WordPress supplies srcset, so a
   phone is not served the desktop file for something shown at low opacity.
   --------------------------------------------------------------------------- */
.fcs-page-hero__media {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 0;
	width: min(56vw, 760px);
	pointer-events: none;
	/* Visible as a photograph, not a wash.
	
	   It was at .28 with the mask reaching full strength 38% across the band,
	   which put a faint image directly under the headline and the lede. That
	   was not only pale, it was a contrast problem: measured against the six
	   banner photographs, the lede came out at 3.74:1 over the darkest of
	   them, under the 4.5:1 it needs.
	
	   So the two move together. The mask now holds the image off until 42%
	   across, and the longest headline on the site — IT & Digital Solutions —
	   ends at 40%, measured in the page rather than guessed. Nothing sits over
	   type any more, which is what makes it safe to more than double the
	   opacity. The photograph is strong across the right third and fades out
	   before it reaches a word. */
	opacity: .62;
	-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 42%, #000 70%);
	mask-image: linear-gradient(to right, transparent 0, transparent 42%, #000 70%);
}

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

@media (max-width: 61.999rem) {
	/* On a phone the banner has no clear ground to give. The text runs to 89%
	   of its height, so there is nowhere for a photograph to be strong without
	   being under a word. It stays a texture here, lifted only as far as the
	   masked-off tail below the lede allows — which works out to the same
	   amount of image over the type as before, and more beneath it.
	
	   Making it properly visible on a phone would mean a taller banner with
	   the picture below the words, which is a layout change rather than a
	   tuning one. */
	.fcs-page-hero__media {
		width: 100%;
		opacity: .22;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 70%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0, transparent 70%, #000 100%);
	}
}

/* ---------------------------------------------------------------------------
   Premium motion and navigation layer — 1.3.0

   One visual language runs through the page: fine technical lines, measured
   depth and controlled movement. Everything remains progressive enhancement;
   reduced-motion visitors get the same hierarchy with no animation.
   --------------------------------------------------------------------------- */
:root {
	--fcs-header-glass: rgba(255, 255, 255, 0.9);
	--fcs-premium-line: rgba(16, 42, 67, 0.12);
}

/* Premium utility bar and glass-to-solid navigation. */
.fcs-header-shell {
	background: transparent;
	box-shadow: 0 1px 0 rgba(11, 31, 51, 0.04);
}

.fcs-topbar {
	max-height: 42px;
	overflow: hidden;
	background: linear-gradient(90deg, #071a2b 0%, #102f4b 52%, #071a2b 100%);
	color: #cfdae4;
	transition: max-height .6s var(--fcs-ease), opacity .25s ease, padding .6s var(--fcs-ease);
}

.fcs-topbar > .alignwide { min-height: 20px; }
.fcs-topbar p { letter-spacing: .045em; }
.fcs-topbar__details { gap: 1.1rem !important; }

.fcs-topbar__location,
.fcs-topbar__phone { display: inline-flex; align-items: center; gap: .55rem; }

.fcs-topbar__location::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px rgba(244, 123, 32, .12);
}

.fcs-topbar__phone::before {
	content: '';
	width: 1px;
	height: 12px;
	background: rgba(255,255,255,.22);
}

.fcs-topbar__tagline {
	color: #aebfcd;
	font-weight: 600;
	letter-spacing: .11em !important;
	text-transform: uppercase;
}

/* The frosted bar is painted by a pseudo-element, not by the header itself.
   backdrop-filter makes an element a containing block for every fixed-position
   descendant, and the mobile menu overlay is exactly that: with the filter on
   .fcs-header the overlay resolved its inset:0 against the 62px-tall bar
   instead of the viewport, so tapping the hamburger opened a menu that was
   clipped to nothing. On ::before the glass looks identical and contains
   nothing. */
.fcs-header {
	background: transparent;
	border-bottom-color: rgba(16, 42, 67, .08);
	transition: padding .25s var(--fcs-ease), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.fcs-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--fcs-header-glass);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	pointer-events: none;
	transition: opacity .6s var(--fcs-ease);
}

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

.fcs-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(16,42,67,.15) 24%, rgba(16,42,67,.15) 76%, transparent);
	pointer-events: none;
}

.fcs-header__inner { min-height: 48px; }

.fcs-header .wp-block-site-logo img {
	transition: max-height .25s var(--fcs-ease), transform .25s var(--fcs-ease);
}

.fcs-header-shell.is-scrolled .fcs-topbar {
	max-height: 0;
	padding-block: 0 !important;
	opacity: 0;
}

/* Scrolled, the capsule tightens; the strip behind it still paints nothing.
   Only the padding survives from when this was a solid bar. */
.fcs-header-shell.is-scrolled .fcs-header {
	padding-block: .55rem !important;
}

.fcs-header-shell.is-scrolled .wp-block-site-logo img { max-height: 36px; }

.fcs-nav { letter-spacing: -.01em; }
.fcs-nav .wp-block-navigation__container { align-items: center; }

.fcs-nav .wp-block-navigation-item__content {
	padding: .72rem .12rem;
	transition: color .25s ease;
}

.fcs-nav .wp-block-navigation-item__content::after {
	left: 50%;
	bottom: .38rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	transform: translateX(-50%) scale(0);
	transition: transform .25s var(--fcs-ease);
}

.fcs-nav .wp-block-navigation-item__content:hover,
.fcs-nav .current-menu-item .wp-block-navigation-item__content,
.fcs-nav [aria-current='page'] { color: var(--wp--preset--color--navy-deep); }

.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: 5px;
	transform: translateX(-50%) scale(1);
}

.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	min-height: 44px;
	padding: .78rem 1.15rem;
	border: 1px solid rgba(255,255,255,.12);
	/* Fully round, to match the capsule it sits inside. */
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(11,31,51,.12);
	transition: transform .25s var(--fcs-ease), background .25s ease, box-shadow .25s ease;
}

.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content::after {
	content: '\2197';
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	background: none;
	font-size: 1rem;
	line-height: 1;
	transform: none;
	transition: transform .25s var(--fcs-ease);
}

.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(11,31,51,.18);
}

.fcs-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content:hover::after {
	transform: translate(2px,-2px);
}

/* Hero depth, technical grid and a quiet brand orbit. */
.fcs-hero--full::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: linear-gradient(to right, #000, transparent 75%);
	mask-image: linear-gradient(to right, #000, transparent 75%);
}

.fcs-hero--full .fcs-hero__media img {
	transform: scale(1.055);
	will-change: transform;
}

.fcs-hero--full .fcs-hero__content {
	width: 100%;
	max-width: 54rem;
	margin-inline: 0;
}

.fcs-hero--full h1 { max-width: 12ch; font-size: clamp(3.15rem, 6.7vw, 6.15rem); }
.fcs-hero--full .fcs-hero-lede { max-width: 31rem; }

.fcs-hero--full .fcs-hero-actions .wp-element-button {
	position: relative;
	overflow: hidden;
}

.fcs-hero--full .fcs-hero-actions .has-accent-background-color::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.38) 48%, transparent 76%);
	transform: translateX(-130%);
	transition: transform .6s var(--fcs-ease);
}

.fcs-hero--full .fcs-hero-actions .has-accent-background-color:hover::before { transform: translateX(130%); }

.fcs-hero-orbit {
	position: absolute;
	z-index: 1;
	top: clamp(2rem,8vh,6rem);
	right: max(24px, calc((100% - var(--wp--style--global--wide-size)) / 2));
	display: grid;
	place-items: center;
	width: clamp(15rem,30vw,28rem);
	aspect-ratio: 1;
	border: 1px solid rgba(255,255,255,.11);
	border-radius: 50%;
	pointer-events: none;
}

.fcs-hero-orbit::before,
.fcs-hero-orbit::after {
	content: '';
	position: absolute;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 50%;
}

.fcs-hero-orbit::before { inset: 12%; }
.fcs-hero-orbit::before { border-top-color: rgba(244,123,32,.5); }
.fcs-hero-orbit::after { inset: 31%; border-color: rgba(244,123,32,.28); }

.fcs-hero-orbit span {
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.15);
	font-size: clamp(4rem,10vw,9rem);
	font-weight: 800;
	letter-spacing: -.08em;
}

.fcs-hero-scroll {
	position: absolute;
	z-index: 3;
	right: max(24px, calc((100% - var(--wp--style--global--wide-size)) / 2));
	bottom: 12.5rem;
	display: flex;
	align-items: center;
	gap: .8rem;
	color: #c7d4de;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: .15em;
	text-decoration: none;
	text-transform: uppercase;
}

.fcs-hero-scroll i {
	position: relative;
	display: block;
	width: 36px;
	height: 1px;
	background: rgba(255,255,255,.4);
	overflow: hidden;
}

.fcs-hero-scroll i::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--accent);
	transform: translateX(-100%);
}

/* Motion that makes sections feel connected instead of independently faded. */
.fcs-section-tracked { position: relative; }
.fcs-section-tracked .fcs-eyebrow { transition: letter-spacing .6s var(--fcs-ease); }
.fcs-section-tracked.is-in-view .fcs-eyebrow { letter-spacing: .19em; }

.fcs-photo-card,
.fcs-demo__img { overflow: hidden; }

.fcs-photo-card img,
.fcs-demo__img img { transition: transform .6s var(--fcs-ease), filter .6s ease; }
.fcs-photo-card:hover img,
.fcs-demo__img:hover img { transform: scale(1.025); }

.fcs-divisions .fcs-service-card {
	transition: transform .25s var(--fcs-ease), background .25s ease;
}

.fcs-divisions .fcs-service-card:hover { transform: translateX(6px); }

.fcs-capability summary { transition: padding .25s var(--fcs-ease), color .25s ease; }
.fcs-capability summary:hover { padding-inline: .5rem; }
.fcs-capability-description { overflow: hidden; }

.fcs-industries-section { background: linear-gradient(180deg,#fff 0%,#f8faf9 100%); }

/* The glow follows the pointer across the closing panel. The custom
   properties carry the panel's own corner as their default, so with
   JavaScript off, or under prefers-reduced-motion, the gradient still sits
   where it was designed to sit rather than collapsing to the top-left. */
.fcs-cta {
	background-image: radial-gradient(circle at var(--fcs-pointer-x,80%) var(--fcs-pointer-y,20%), rgba(244,123,32,.18), transparent 28%);
}

.fcs-read-progress {
	height: 3px;
	background: linear-gradient(90deg,#f47b20,#d95f08 65%,#102a43);
	box-shadow: 0 0 12px rgba(244,123,32,.28);
}

@media (prefers-reduced-motion:no-preference) {
	.fcs-hero--full .fcs-hero__media { animation: fcs-hero-focus 1.5s var(--fcs-ease) both; }
	.fcs-hero-orbit { animation: fcs-orbit-arrive 1.2s .25s var(--fcs-ease) both; }
	.fcs-hero-orbit::before { animation: fcs-orbit-turn 1.2s .35s var(--fcs-ease) both; }
	.fcs-hero-scroll i::after { animation: fcs-scroll-line 1.1s 1.1s var(--fcs-ease) both; }
	.fcs-js .fcs-reveal { transform: translateY(34px); transition: opacity .6s var(--fcs-ease), transform .6s var(--fcs-ease); }
	.fcs-js .fcs-reveal.is-visible .fcs-photo-card img { animation: fcs-image-settle 1.15s .15s var(--fcs-ease) both; }
}

@keyframes fcs-hero-focus { from { opacity:.35; transform:scale(1.035); } to { opacity:1; transform:none; } }
@keyframes fcs-orbit-arrive { from { opacity:0; transform:scale(.82) rotate(-10deg); } to { opacity:1; transform:none; } }
@keyframes fcs-orbit-turn { from { transform:rotate(-24deg); } to { transform:none; } }
@keyframes fcs-scroll-line { 0% { transform:translateX(-100%); } 48%,100% { transform:translateX(110%); } }
@keyframes fcs-image-settle { from { transform:scale(1.08); filter:saturate(.65); } to { transform:none; filter:none; } }

@media (max-width: 68.75rem) {
	.fcs-hero-orbit { right:-8rem; opacity:.55; }
	.fcs-hero-scroll { display:none; }
}

@media (max-width: 61.999rem) {
	.fcs-header { padding-block: .55rem !important; }
	.fcs-header__inner { min-height: 44px; }
	.fcs-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: linear-gradient(145deg,#071a2b,#102f4b);
		color: #fff;
	}
	.fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color:#fff; }
	.fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
	.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 { border-bottom:0; background:var(--wp--preset--color--accent); color:#071a2b; }
	.fcs-hero--full .fcs-hero__content { max-width: 44rem; }
}

@media (max-width: 40rem) {
	.fcs-topbar__location { display:none; }
	.fcs-topbar__phone::before { display:none; }
	.fcs-topbar > .alignwide { justify-content:center; }
	.fcs-topbar__tagline { display:none; }
	.fcs-hero--full::before { background-size:48px 48px; }
	.fcs-hero-orbit { width:15rem; top:4rem; right:-8rem; }
	.fcs-hero--full h1 { font-size:clamp(2.85rem,14vw,4rem); }
	.fcs-divisions .fcs-service-card:hover { transform:translateX(3px); }
}

@media (prefers-reduced-motion:reduce) {
	.fcs-hero--full .fcs-hero__media img { transform:none; will-change:auto; }
	.fcs-hero-orbit,
	.fcs-hero-orbit::before,
	.fcs-hero-scroll i::after { animation:none; }
}


/* ---------------------------------------------------------------------------
   Floating pill navigation
   ---------------------------------------------------------------------------

   The bar is a capsule that floats over the page rather than a band that sits
   on top of it. Every page, not only the front one: a navigation that changes
   shape between the home page and the rest reads as two different sites.

   Because the capsule is white on all of them, the wordmark inside it is the
   navy one everywhere and nothing has to swap on scroll. That is the whole
   reason to prefer a white capsule over a transparent bar: the version that
   changed colour over the hero needed a second logo file, a second set of link
   colours and a scroll threshold to switch between them, and it only worked on
   the one page dark enough behind it.

   The utility strip keeps its own dark band at the very top. It carries the
   phone number and the city, which is not navigation and should not be inside
   the capsule, and it collapses on scroll as it always has.
   --------------------------------------------------------------------------- */

.fcs-overlay-header .fcs-header-shell {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	box-shadow: none;
}

/* Signed in, the admin bar is fixed above everything else. */
.fcs-overlay-header.admin-bar .fcs-header-shell { top: 32px; }

@media (max-width: 782px) {
	.fcs-overlay-header.admin-bar .fcs-header-shell { top: 46px; }
}

/* The band the capsule used to be. Nothing paints here now. */
.fcs-overlay-header .fcs-header {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	padding-block: .85rem !important;
}

.fcs-overlay-header .fcs-header::before,
.fcs-overlay-header .fcs-header::after { display: none; }

/* The capsule. fit-content is what centres it: a full-width bar with centred
   contents would still draw a full-width shadow. */
.fcs-overlay-header .fcs-header__inner {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	padding: .45rem .5rem .45rem 1.35rem;
	gap: clamp(1rem, 2.2vw, 2rem);
	border-radius: 999px;
	transition: padding .25s var(--fcs-ease), transform .25s var(--fcs-ease);
}

/* Painted from ::before, not from the element. backdrop-filter makes whatever
   carries it the containing block for every fixed-position descendant, and the
   mobile menu overlay is one: on .fcs-header__inner it would resolve inset:0
   against the capsule and open a menu the size of a button. Absolutely
   positioned, it is also not a flex item, so it does not join the row. */
.fcs-overlay-header .fcs-header__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.93);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	box-shadow: 0 18px 44px rgba(8, 29, 48, .16), 0 2px 6px rgba(8, 29, 48, .07);
	pointer-events: none;
	transition: box-shadow .25s var(--fcs-ease), background .25s ease;
}

.fcs-overlay-header .fcs-header__inner > * { position: relative; z-index: 1; }

/* Once the page has moved, the capsule tightens and its shadow shortens, so it
   reads as having settled closer to the page. */
.fcs-overlay-header .is-scrolled .fcs-header { padding-block: .5rem !important; }

.fcs-overlay-header .is-scrolled .fcs-header__inner { padding-block: .35rem; }

.fcs-overlay-header .is-scrolled .fcs-header__inner::before {
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 10px 26px rgba(8, 29, 48, .13), 0 1px 4px rgba(8, 29, 48, .06);
}

/* The pill is short, so the wordmark is capped harder than it was in a band. */
.fcs-overlay-header .fcs-header .wp-block-site-logo img { max-height: 34px; }
.fcs-overlay-header .is-scrolled .wp-block-site-logo img { max-height: 30px; }

/* The hero is no longer pushed down by a bar in the flow, so its content would
   ride up by the whole height of one. The full hero centres its content, so
   returning that height as top padding moves it down by half, which is what
   leaves the headline optically centred in what is actually visible. The page
   hero stacks from the top, so it takes the whole height back.
   --fcs-header-height is written by initScrollDetails from the real bar. */
.fcs-overlay-header .fcs-hero--full .fcs-hero__body {
	padding-top: calc(clamp(4rem, 9vw, 7.5rem) + var(--fcs-header-height, 104px));
}

.fcs-overlay-header .fcs-page-hero {
	padding-top: calc(clamp(3rem, 7vw, 6rem) + var(--fcs-header-height, 104px));
}

@media (max-width: 61.999rem) {
	/* At phone widths the capsule is nearly the full width anyway, so it keeps
	   a margin rather than pretending to be centred in open space. */
	.fcs-overlay-header .fcs-header { padding-block: .6rem !important; }
	.fcs-overlay-header .fcs-header__inner {
		width: auto;
		padding: .4rem .55rem .4rem 1rem;
	}
}

/* ---------------------------------------------------------------------------
   The menu as a card, not a takeover
   ---------------------------------------------------------------------------

   WordPress's responsive navigation is a full-screen modal: fixed, inset 0,
   the page behind it gone. Against a capsule that is only ever a few hundred
   pixels wide, tapping it and losing the whole screen is a jolt out of all
   proportion to the seven links inside.

   So it becomes a card that drops from under the capsule and is only as tall
   as what it holds. Nothing about the markup or the behaviour changes — the
   same button, the same Escape handling, the same focus trap — only where the
   panel is drawn and how big it is.

   .fcs-nav goes static so the card resolves its left and right against the
   capsule rather than against the hamburger, which is all .fcs-nav is at this
   width. Scoped to the breakpoint, because on a desktop .fcs-nav being
   positioned is what submenus hang from.
   --------------------------------------------------------------------------- */

@media (max-width: 61.999rem) {
	.fcs-overlay-header .fcs-nav { position: static; }

	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		top: calc(100% + .6rem);
		right: 0;
		left: 0;
		bottom: auto;
		width: auto;
		height: auto;
		max-height: calc(100vh - 11rem);
		padding: .5rem 1.1rem 1.1rem;
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.98);
		color: #102a43;
		box-shadow: 0 22px 52px rgba(8, 29, 48, .22), 0 2px 6px rgba(8, 29, 48, .08);
		overflow-y: auto;

	}

	/* The block is justified right, and core feeds that setting down through
	   this property: inside the overlay each item becomes a column flex box
	   with align-items:flex-end, which is why the links sat against the right
	   edge as 44px-wide boxes rather than filling their rows.
	
	   It has to be redeclared on the list as well as on the card, because the
	   items-justified-right class WordPress puts on the list sets it again
	   there and a value set on an ancestor does not survive that. Overriding
	   the property rather than the four align-items rules it feeds keeps this
	   to one idea, and leaves the desktop row untouched. */
	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open,
	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		--navigation-layout-justification-setting: stretch;
	}

	/* Core centres or right-aligns the overlay's contents from the block's own
	   layout setting. In a card the links want one left edge to start from. */
	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		padding-top: 1.9rem;
	}

	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		gap: 0 !important;
	}

	/* Sized for a card rather than for a screen: the x-large step was set when
	   each link had a seventh of the viewport to itself. */
	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding-block: .78rem;
		font-size: 1rem;
		font-weight: 600;
		color: #18324a;
		text-align: left;
	}

	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
		border-top: 1px solid #e6ecf1;
	}

	/* The call to action keeps its weight and stops being a row in the list. */
	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
		border-top: 0;
		margin-top: .7rem;
	}

	.fcs-overlay-header .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: block;
		padding: .85rem 1.2rem;
		border-radius: 999px;
		background: #b85200;
		color: #fff;
		text-align: center;
	}

	/* The card is the positioned ancestor, so core's absolute close button
	   lands in its top corner without being moved out of the flow by hand. */
	.fcs-overlay-header .fcs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: .5rem;
		right: .6rem;
		padding: .3rem;
		color: #5c6e80;
	}
}

/* ---------------------------------------------------------------------------
   Footer wordmark
   ---------------------------------------------------------------------------

   The footer is #081d30 and the wordmark is navy, which measured 1.17:1
   against it — present in the markup, invisible on the screen. The light file
   is the same artwork with the type recoloured and the mark left orange, and
   measures 17.09:1 on the same background.

   Painted on the link with the <img> faded out underneath, so the image keeps
   its box and the link keeps its alt text, focus ring and hit area.
   --------------------------------------------------------------------------- */

.fcs-footer .wp-block-site-logo a {
	display: block;
	background-image: url('../images/logo-light.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.fcs-footer .wp-block-site-logo img { opacity: 0; }