/* =========================================================================
   Franchise design system  (.fx-*)
   -------------------------------------------------------------------------
   New components written from scratch for the industry pages, so they do not
   look like the service pages. Nothing here reuses a theme section.

   Keeps the site's type and palette:
     headings  Instrument Sans      body  DM Sans
     navy #04072A   deep #0A0F3D   cyan #05C9F5   pale #F2F8FA   muted #7393AE
   ========================================================================= */

.fx {
	--navy: #04072A;
	--deep: #0A1038;
	--cyan: #05C9F5;
	--cyan-soft: rgba(5, 201, 245, .12);
	--pale: #F2F8FA;
	--muted: #7393AE;
	--line: rgba(255, 255, 255, .12);
	--line-dark: rgba(4, 7, 42, .12);
	--radius: 18px;

	font-family: "DM Sans", sans-serif;
	position: relative;
	/* break out of the theme's content column so colour bands run edge to edge
	   instead of sitting in a floating box */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(44px, 4.4vw, 76px) clamp(20px, 4vw, 56px);
}

.fx * { box-sizing: border-box; }

/* The wrappers must NOT clip: clipping pulls the full-bleed bands back into
   the theme's 1290px column, which shows as white gutters either side.
   The sideways scrollbar is prevented on the page root instead. */
body:has(.fx) .page_content_wrap,
body:has(.fx) .content_wrap,
body:has(.fx) .post_content,
body:has(.fx) .content,
body:has(.fx) .post_item_single { overflow: visible; }

/* NOT overflow-x on the body: that turns the body into a scroll container, and
   position:sticky then sticks to a box that never scrolls - which silently
   kills the theme's stacked-card sections on any page holding an .fx band.
   The parent theme already guards sideways scroll with
   html:not(.edit-post-visual-editor) { overflow-x: hidden }, and clipping on
   the root does not break sticky. */

/* The theme pads the content wrapper by 144px at the bottom, which on these
   pages reads as an empty white strip between the last full-bleed band and the
   footer. The bands carry their own padding, so the wrapper needs none. */
body:has(.fx) .page_content_wrap { padding-bottom: 0; }

.fx-inner {
	max-width: 1290px;
	margin: 0 auto;
}

/* headings sit closer to their label and copy than the first pass allowed */
.fx-label + .fx-h2,
.fx-label + .fx-display { margin-top: 6px; }
.fx-h2 + .fx-lede { margin-top: 16px; }

/* tone ------------------------------------------------------------------- */
.fx-dark  { background: var(--navy); color: #C9D6E5; }
.fx-deep  { background: var(--deep); color: #C9D6E5; }
.fx-light { background: #fff;        color: var(--muted); }
.fx-pale  { background: var(--pale); color: var(--muted); }

.fx-dark h1, .fx-dark h2, .fx-dark h3, .fx-dark h4,
.fx-deep h1, .fx-deep h2, .fx-deep h3, .fx-deep h4 { color: #fff; }
.fx-light h1, .fx-light h2, .fx-light h3, .fx-light h4,
.fx-pale h1, .fx-pale h2, .fx-pale h3, .fx-pale h4 { color: var(--navy); }

/* a faint vertical rule texture, like the dark reference demos */
.fx-ruled::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 160px);
	opacity: .5;
	pointer-events: none;
}
.fx-ruled > * { position: relative; }

/* type ------------------------------------------------------------------- */
.fx h1, .fx h2, .fx h3, .fx h4 {
	font-family: "Instrument Sans", sans-serif;
	font-weight: 500;
	margin: 0;
	line-height: 1.08;
	letter-spacing: -.02em;
}
.fx-display { font-size: clamp(38px, 5.2vw, 68px); }
.fx-h2      { font-size: clamp(30px, 3.4vw, 46px); }
.fx-h3      { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; }
.fx-lede    { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.7; margin: 22px 0 0; max-width: 60ch; }
.fx p       { line-height: 1.7; }
.fx-accent  { color: var(--cyan); }

/* pill badge ------------------------------------------------------------- */
.fx-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cyan);
}
.fx-light .fx-badge, .fx-pale .fx-badge { border-color: var(--line-dark); }
.fx-badge::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--cyan);
}

/* pill button with a circular icon, as in the Degency/Algenix demos ------- */
.fx-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 8px 8px 8px 26px;
	border-radius: 999px;
	background: var(--cyan);
	color: var(--navy);
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform .18s ease, background .18s ease;
}
.fx-btn:hover { transform: translateY(-2px); background: #27D4FA; color: var(--navy); }
.fx-btn span.fx-ico {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: 16px;
}
.fx-btn-ghost {
	background: transparent;
	color: #fff;
	border: 1px solid var(--line);
	padding: 14px 26px;
}
.fx-btn-ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.fx-light .fx-btn-ghost, .fx-pale .fx-btn-ghost { color: var(--navy); border-color: var(--line-dark); }

.fx-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* hero: copy left, stat stack right -------------------------------------- */
.fx-hero-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: clamp(30px, 5vw, 80px);
	align-items: center;
}
.fx-stats { display: grid; gap: 14px; }
.fx-stat {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px 26px;
	background: rgba(255, 255, 255, .03);
}
.fx-light .fx-stat, .fx-pale .fx-stat { border-color: var(--line-dark); background: #fff; }
.fx-stat b {
	display: block;
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--cyan);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.fx-stat span { font-size: 15px; line-height: 1.6; }

/* bento grid of service cards -------------------------------------------- */
.fx-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
	margin-top: 38px;
}
.fx-card {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 34px 30px;
	border-radius: var(--radius);
	border: 1px solid var(--line-dark);
	background: #fff;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fx-dark .fx-card, .fx-deep .fx-card { border-color: var(--line); background: rgba(255, 255, 255, .04); }
.fx-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(4, 7, 42, .12); border-color: var(--cyan); }
.fx-card-wide { grid-column: span 3; }
.fx-card-num {
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	letter-spacing: .18em;
	color: var(--cyan);
}
.fx-card p { margin: 0; font-size: 15px; }
.fx-card-go {
	margin-top: auto;
	padding-top: 10px;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--cyan);
}

/* numbered rows with hairline rules --------------------------------------- */
.fx-rows { margin-top: 34px; border-top: 1px solid var(--line-dark); }
.fx-dark .fx-rows, .fx-deep .fx-rows { border-color: var(--line); }
.fx-row {
	display: grid;
	grid-template-columns: 90px 1fr 1.1fr;
	gap: 28px;
	align-items: start;
	padding: 30px 0;
	border-bottom: 1px solid var(--line-dark);
}
.fx-dark .fx-row, .fx-deep .fx-row { border-color: var(--line); }
.fx-row-num {
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(28px, 3vw, 40px);
	color: var(--cyan);
	opacity: .55;
	line-height: 1;
}
.fx-row p { margin: 0; font-size: 15px; }

/* sticky split: title holds while the content scrolls --------------------- */
.fx-sticky {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: clamp(30px, 5vw, 70px);
	align-items: start;
}
.fx-sticky-head { position: sticky; top: 110px; }

/* timeline with a connector line ------------------------------------------ */
.fx-time { margin-top: 48px; display: grid; gap: 0; }
.fx-time-item {
	position: relative;
	padding: 0 0 38px 46px;
	border-left: 1px solid var(--line-dark);
}
.fx-dark .fx-time-item, .fx-deep .fx-time-item { border-color: var(--line); }
.fx-time-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.fx-time-item::before {
	content: "";
	position: absolute;
	left: -7px; top: 4px;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 0 5px var(--cyan-soft);
}
.fx-time-item h4 { margin-bottom: 8px; }
.fx-time-item p { margin: 0; font-size: 15px; }

/* tag cloud --------------------------------------------------------------- */
.fx-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.fx-tag {
	padding: 11px 22px;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	font-size: 15px;
	color: var(--navy);
	text-decoration: none;
}
.fx-dark .fx-tag, .fx-deep .fx-tag { border-color: var(--line); color: #fff; }
.fx-tag:hover { border-color: var(--cyan); color: var(--cyan); }

/* native accordion -------------------------------------------------------- */
.fx-acc { margin-top: 44px; border-top: 1px solid var(--line-dark); }
.fx-dark .fx-acc, .fx-deep .fx-acc { border-color: var(--line); }
.fx-acc details { border-bottom: 1px solid var(--line-dark); }
.fx-dark .fx-acc details, .fx-deep .fx-acc details { border-color: var(--line); }
.fx-acc summary {
	list-style: none;
	cursor: pointer;
	padding: 24px 46px 24px 0;
	position: relative;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 500;
	font-size: clamp(17px, 1.5vw, 21px);
	color: var(--navy);
}
.fx-dark .fx-acc summary, .fx-deep .fx-acc summary { color: #fff; }
.fx-acc summary::-webkit-details-marker { display: none; }
.fx-acc summary::after {
	content: "+";
	position: absolute;
	right: 8px; top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	color: var(--cyan);
	line-height: 1;
}
.fx-acc details[open] summary::after { content: "\2013"; }
.fx-acc .fx-acc-body { padding: 0 46px 26px 0; font-size: 15px; }
.fx-acc .fx-acc-body ul { margin: 12px 0 0; padding-left: 20px; }
.fx-acc .fx-acc-body li { margin-bottom: 7px; }

/* closing CTA band -------------------------------------------------------- */
.fx-cta-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 60px); align-items: center; }

/* lists ------------------------------------------------------------------- */
.fx-ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.fx-ticks li { position: relative; padding-left: 30px; font-size: 15px; }
.fx-ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: 7px;
	width: 14px; height: 8px;
	border-left: 2px solid var(--cyan);
	border-bottom: 2px solid var(--cyan);
	transform: rotate(-45deg);
}

/* responsive -------------------------------------------------------------- */
@media (max-width: 1024px) {
	.fx-hero-grid, .fx-sticky, .fx-cta-grid { grid-template-columns: 1fr; }
	.fx-sticky-head { position: static; }
	.fx-card { grid-column: span 3; }
	.fx-row { grid-template-columns: 60px 1fr; }
	.fx-row > :last-child { grid-column: 2; }
}

@media (max-width: 640px) {
	.fx { padding: 48px 16px; }
	.fx-card, .fx-card-wide { grid-column: span 6; }
	.fx-row { grid-template-columns: 1fr; gap: 10px; }
	.fx-row > :last-child { grid-column: 1; }
	.fx-actions { gap: 10px; }
	.fx-btn { padding-left: 20px; font-size: 14px; }
}

/* -------------------------------------------------------------------------
   Variations, so sections stop repeating one recipe: filled colour cards,
   image rows, a photo strip, and a cyan closing band.
   ------------------------------------------------------------------------- */

/* small uppercase label - a quieter alternative to the pill badge */
.fx-label {
	display: block;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 14px;
}

/* photo strip that overlaps the band above it */
.fx-collage {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: -90px;
	position: relative;
	z-index: 2;
}
.fx-collage figure {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 20px 50px rgba(4, 7, 42, .18);
}
.fx-collage figure:nth-child(even) { transform: translateY(26px); }
.fx-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* filled cards - the reference alternates colours rather than repeating one */
.fx-fill {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 34px 30px;
	border-radius: var(--radius);
}
.fx-fill h3, .fx-fill h4 { color: inherit; }
.fx-fill p { margin: 0; font-size: 15px; }
.fx-fill-navy  { background: var(--navy); color: #C9D6E5; }
.fx-fill-navy h3 { color: #fff; }
.fx-fill-cyan  { background: var(--cyan); color: #04223A; }
.fx-fill-cyan h3 { color: var(--navy); }
.fx-fill-cyan .fx-ticks li::before { border-color: var(--navy); }
.fx-fill-soft  { background: rgba(5, 201, 245, .10); color: var(--muted); }
.fx-fill-soft h3 { color: var(--navy); }
.fx-fill-line  { background: #fff; border: 1px solid var(--line-dark); }
.fx-fill-line h3 { color: var(--navy); }
.fx-fill .fx-num {
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	letter-spacing: .18em;
	opacity: .75;
}

.fx-grid-3 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 30px; align-items: stretch; }
.fx-grid-3 > * { grid-column: span 2; }
/* a row of two should fill the width, not leave a hole on the right */
.fx-grid-3 > :nth-child(4):nth-last-child(2), .fx-grid-3 > :nth-child(5):last-child { grid-column: span 3; }
.fx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }

/* copy beside an image, alternating sides down the page */
.fx-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(26px, 4vw, 64px);
	align-items: center;
	padding: 42px 0;
	border-top: 1px solid var(--line-dark);
}
.fx-media:first-of-type { border-top: 0; }
.fx-media.is-flipped .fx-media-figure { order: -1; }
.fx-media-figure {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16 / 11;
}
.fx-media-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-media h3 { margin-bottom: 12px; }
.fx-media p { margin: 0 0 12px; font-size: 15px; }

/* closing band in cyan, so it does not repeat the navy hero */
.fx-band-cyan { background: var(--cyan); color: #04223A; }
.fx-band-cyan h2, .fx-band-cyan h3 { color: var(--navy); }
.fx-band-cyan .fx-lede { color: #05405C; }
.fx-band-cyan .fx-btn { background: var(--navy); color: #fff; }
.fx-band-cyan .fx-btn span.fx-ico { background: #fff; color: var(--navy); }
.fx-band-cyan .fx-btn-ghost { background: transparent; color: var(--navy); border-color: rgba(4,7,42,.35); }

@media (max-width: 1024px) {
	.fx-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.fx-collage { grid-template-columns: repeat(2, 1fr); margin-top: -50px; }
	.fx-media { grid-template-columns: 1fr; }
	.fx-media.is-flipped .fx-media-figure { order: 0; }
}

@media (max-width: 640px) {
	.fx-grid-3, .fx-grid-2 { grid-template-columns: 1fr; }
	.fx-collage { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: -30px; }
	.fx-collage figure:nth-child(even) { transform: none; }
}

/* two-up text blocks, used where photos would add nothing ------------------ */
.fx-split-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 30px;
}
.fx-block {
	padding: 30px 28px;
	border-radius: var(--radius);
	background: #fff;
	border: 1px solid var(--line-dark);
}
.fx-dark .fx-block, .fx-deep .fx-block { background: rgba(255,255,255,.04); border-color: var(--line); }
.fx-block h3 { margin-bottom: 10px; }
.fx-block p { margin: 0 0 10px; font-size: 15px; }
.fx-block p:last-child, .fx-block ul:last-child { margin-bottom: 0; }
.fx-block .fx-num {
	display: inline-block;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--cyan);
	margin-bottom: 10px;
}

/* a quieter lead-in paragraph set large, for the top of a section */
.fx-standfirst {
	font-size: clamp(18px, 1.7vw, 23px);
	line-height: 1.55;
	max-width: 46ch;
	margin: 0;
}
.fx-light .fx-standfirst, .fx-pale .fx-standfirst { color: var(--navy); }

@media (max-width: 860px) {
	.fx-split-2 { grid-template-columns: 1fr; }
	.fx-grid-3 > *, .fx-grid-3 > :nth-child(4):nth-last-child(2), .fx-grid-3 > :nth-child(5):last-child { grid-column: 1 / -1; }
}

/* confirmation mark, horizontal steps and a link grid (thank-you page) ----- */
.fx-check {
	width: 64px; height: 64px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--cyan);
	color: var(--navy);
	font-size: 30px; line-height: 1;
	margin-bottom: 26px;
	box-shadow: 0 0 0 10px rgba(5, 201, 245, .14);
}

/* four steps on one line, joined by a rule that runs behind the markers */
.fx-steps-h {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	margin-top: 42px;
	position: relative;
}
.fx-steps-h::before {
	content: "";
	position: absolute;
	left: 22px; right: 22px; top: 21px;
	height: 1px;
	background: var(--line-dark);
}
.fx-dark .fx-steps-h::before, .fx-deep .fx-steps-h::before { background: var(--line); }
.fx-step { position: relative; }
.fx-step-dot {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--navy);
	color: #fff;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px; font-weight: 600;
	margin-bottom: 18px;
	position: relative; z-index: 1;
}
.fx-pale .fx-step-dot, .fx-light .fx-step-dot { box-shadow: 0 0 0 6px var(--pale); }
.fx-step h3 { font-size: 18px; margin-bottom: 8px; }
.fx-step p { margin: 0; font-size: 15px; }

/* services as a grid of links */
.fx-linkgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 30px;
}
.fx-linkgrid a, .fx-linkgrid span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	border: 1px solid var(--line-dark);
	border-radius: 12px;
	background: #fff;
	color: var(--navy);
	font-family: "Instrument Sans", sans-serif;
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
.fx-linkgrid a::after { content: "→"; color: var(--cyan); }
.fx-linkgrid a:hover { border-color: var(--cyan); transform: translateY(-2px); color: var(--navy); }

/* a quiet sign-off strip */
.fx-signoff { text-align: center; }
.fx-signoff .fx-h3 { margin-bottom: 8px; }
.fx-signoff p { margin: 0 auto; max-width: 60ch; font-size: 15px; }

@media (max-width: 900px) {
	.fx-steps-h { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
	.fx-steps-h::before { display: none; }
	.fx-linkgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.fx-steps-h, .fx-linkgrid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Hub pages  -  /services/ and /industry/
   -------------------------------------------------------------------------
   Both hubs are directories: a lot of names and short descriptions that must
   not collapse into another wall of identical cards. Each hub gets its own
   components below, deliberately different from each other and from the
   service pages.
   ========================================================================= */

/* --- anchor pills under a hero (services) -------------------------------- */
.fx-anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 38px;
	padding-top: 30px;
	border-top: 1px solid var(--line);
}
.fx-anchors a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	color: #C9D6E5;
	text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}
.fx-anchors a:hover {
	border-color: var(--cyan);
	background: var(--cyan-soft);
	color: #fff;
}

/* --- problem / solution contrast (services) ------------------------------ */
.fx-vs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 44px;
	align-items: stretch;
}
.fx-vs > div {
	border-radius: var(--radius);
	padding: clamp(26px, 2.6vw, 40px);
}
.fx-vs-bad {
	border: 1px solid var(--line-dark);
	background: #fff;
}
.fx-vs-good {
	background: var(--navy);
	color: #C9D6E5;
}
.fx-vs-good h3 { color: #fff; }
.fx-vs h3 { margin-bottom: 18px; }
.fx-vs ul { list-style: none; margin: 0; padding: 0; }
.fx-vs li {
	position: relative;
	padding: 11px 0 11px 30px;
	font-size: 16px;
	border-top: 1px solid var(--line-dark);
}
.fx-vs-good li { border-top-color: var(--line); }
.fx-vs li:first-child { border-top: 0; }
.fx-vs-bad li::before,
.fx-vs-bad li::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 21px;
	width: 13px;
	height: 1px;
	background: #D06A6A;
}
.fx-vs-bad li::before { transform: rotate(45deg); }
.fx-vs-bad li::after  { transform: rotate(-45deg); }
.fx-vs-good li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 16px;
	width: 7px;
	height: 12px;
	border: solid var(--cyan);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.fx-vs-note {
	grid-column: 1 / -1;
	padding: 0;
	margin: 4px 0 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.6;
	color: var(--navy);
	max-width: 70ch;
}

/* --- numbered editorial index (services capabilities) -------------------- */
.fx-index {
	margin-top: 44px;
	border-top: 1px solid var(--line-dark);
}
.fx-dark .fx-index, .fx-deep .fx-index { border-top-color: var(--line); }
.fx-index-row {
	display: grid;
	grid-template-columns: 76px minmax(200px, 1fr) minmax(0, 1.5fr) auto;
	gap: 28px;
	align-items: start;
	padding: 30px 0;
	border-bottom: 1px solid var(--line-dark);
	text-decoration: none;
	color: inherit;
	transition: background .22s;
}
.fx-dark .fx-index-row, .fx-deep .fx-index-row { border-bottom-color: var(--line); }
a.fx-index-row:hover { background: rgba(5, 201, 245, .06); }
.fx-index-n {
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	letter-spacing: .1em;
	color: var(--cyan);
	padding-top: 6px;
}
.fx-index-row h3 { margin: 0; }
.fx-index-row p  { margin: 0; font-size: 16px; }
.fx-index-go {
	align-self: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--navy);
	transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.fx-dark .fx-index-go, .fx-deep .fx-index-go { border-color: var(--line); color: #fff; }
a.fx-index-row:hover .fx-index-go {
	background: var(--cyan);
	border-color: var(--cyan);
	color: var(--navy);
	transform: translateX(4px);
}

/* --- ascending ladder (services delivery model) -------------------------- */
.fx-ladder {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 46px;
	align-items: end;
}
.fx-ladder-step {
	border-radius: 14px 14px 0 0;
	padding: 22px 20px 26px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--line);
	border-bottom: 0;
}
.fx-ladder-step:nth-child(1) { min-height: 152px; }
.fx-ladder-step:nth-child(2) { min-height: 188px; }
.fx-ladder-step:nth-child(3) { min-height: 224px; }
.fx-ladder-step:nth-child(4) { min-height: 260px; }
.fx-ladder-step:nth-child(5) {
	min-height: 296px;
	background: var(--cyan);
	border-color: var(--cyan);
}
.fx-ladder-step:nth-child(5) h3,
.fx-ladder-step:nth-child(5) .fx-ladder-n { color: var(--navy); }
.fx-ladder-n {
	display: block;
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--cyan);
	margin-bottom: 10px;
}
.fx-ladder-step h3 { font-size: clamp(17px, 1.4vw, 20px); }

/* --- compact linked tiles (services industries) -------------------------- */
.fx-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 40px;
}
.fx-tiles a, .fx-tiles span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: 14px;
	font-family: "Instrument Sans", sans-serif;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
	transition: background .2s, border-color .2s;
}
.fx-tiles a::after {
	content: "\2192";
	color: var(--cyan);
	transition: transform .2s;
}
.fx-tiles a:hover {
	background: rgba(5, 201, 245, .1);
	border-color: var(--cyan);
}
.fx-tiles a:hover::after { transform: translateX(4px); }

/* --- three phase panels (services 90-day model) -------------------------- */
.fx-phases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 44px;
}
.fx-phase {
	position: relative;
	border-radius: var(--radius);
	padding: clamp(26px, 2.4vw, 38px) clamp(26px, 2.4vw, 38px) clamp(32px, 2.8vw, 44px);
	background: #fff;
	border: 1px solid var(--line-dark);
	overflow: hidden;
	--fill: .34;
}
.fx-phase:nth-child(2) {
	background: var(--navy);
	color: #C9D6E5;
	border-color: var(--navy);
	--fill: .67;
}
.fx-phase:nth-child(2) h3 { color: #fff; }
.fx-phase:nth-child(3) { --fill: 1; }
.fx-phase-k {
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cyan);
}
.fx-phase h3 { margin: 12px 0 14px; }
.fx-phase p  { margin: 0; font-size: 16px; }
.fx-phase::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--cyan);
	transform: scaleX(var(--fill));
	transform-origin: left;
}

/* --- hero with a numbered index column (industry) ------------------------ */
.fx-hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(32px, 5vw, 86px);
	align-items: start;
}
.fx-hero-list {
	border-top: 1px solid var(--line);
	margin-top: 10px;
}
.fx-hero-list a {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	color: #C9D6E5;
	text-decoration: none;
	font-size: 16px;
	transition: color .2s, padding-left .2s;
}
.fx-hero-list a:hover { color: #fff; padding-left: 6px; }
.fx-hero-list i {
	font-style: normal;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--cyan);
}
.fx-hero-list a::after {
	content: "\2192";
	color: var(--cyan);
	opacity: 0;
	transition: opacity .2s;
}
.fx-hero-list a:hover::after { opacity: 1; }

/* --- six-cell matrix (industry differences) ------------------------------ */
.fx-matrix {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 44px;
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--line-dark);
	gap: 1px;
}
.fx-matrix > div {
	background: #fff;
	padding: clamp(24px, 2.2vw, 34px);
	min-height: 152px;
}
.fx-matrix b {
	display: block;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 12px;
}
.fx-matrix p {
	margin: 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--navy);
}

/* --- directory rows (industry expertise) --------------------------------- */
.fx-dir { margin-top: 46px; }
.fx-dir-row {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
	gap: clamp(24px, 4vw, 70px);
	padding: 34px 0;
	border-top: 1px solid var(--line-dark);
	align-items: start;
}
.fx-dark .fx-dir-row, .fx-deep .fx-dir-row { border-top-color: var(--line); }
.fx-dir-row:last-child { border-bottom: 1px solid var(--line-dark); }
.fx-dark .fx-dir-row:last-child, .fx-deep .fx-dir-row:last-child { border-bottom-color: var(--line); }
.fx-dir-row h3 {
	font-size: clamp(22px, 2.1vw, 31px);
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.fx-dir-row h3 em {
	font-style: normal;
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--cyan);
}
.fx-dir-row p { margin: 0 0 16px; font-size: 16px; }
.fx-dir-go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--cyan);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color .2s, gap .2s;
}
.fx-dir-go:hover { border-bottom-color: var(--cyan); gap: 15px; }

/* --- stepped indent list (industry approach) ----------------------------- */
.fx-stair { margin-top: 44px; }
.fx-stair-row {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line-dark);
}
.fx-dark .fx-stair-row, .fx-deep .fx-stair-row { border-bottom-color: var(--line); }
.fx-stair-row:nth-child(2) { margin-left: 4%; }
.fx-stair-row:nth-child(3) { margin-left: 8%; }
.fx-stair-row:nth-child(4) { margin-left: 12%; }
.fx-stair-row:nth-child(5) { margin-left: 16%; }
.fx-stair-n {
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--cyan);
	flex: 0 0 34px;
}
.fx-stair-row h3 { font-size: clamp(19px, 1.7vw, 26px); }

/* --- large trait lines (industry market traits) -------------------------- */
.fx-traits {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.fx-traits li {
	position: relative;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(20px, 2.1vw, 30px);
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #fff;
	padding: 18px 0 18px 42px;
	border-bottom: 1px solid var(--line);
}
.fx-traits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 1px;
	background: var(--cyan);
}

/* --- outcome cards (industry results) ------------------------------------ */
.fx-out {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 42px;
}
.fx-out > div {
	padding: clamp(24px, 2.2vw, 34px);
	border-radius: var(--radius);
	background: #fff;
	border: 1px solid var(--line-dark);
}
.fx-out > div:nth-child(3n+2) { background: var(--pale); }
.fx-out i {
	display: block;
	font-style: normal;
	font-family: "Instrument Sans", sans-serif;
	font-size: 34px;
	line-height: 1;
	color: var(--cyan);
	margin-bottom: 14px;
}
.fx-out p {
	margin: 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.4;
	color: var(--navy);
}

/* --- service rail on the closing band (industry) ------------------------- */
.fx-rail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 44px;
	margin-top: 36px;
}
.fx-rail a, .fx-rail span {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(4, 7, 42, .18);
	color: var(--navy);
	text-decoration: none;
	font-family: "Instrument Sans", sans-serif;
	font-size: 17px;
	transition: gap .2s;
}
.fx-rail a:hover { gap: 22px; }
.fx-rail em {
	font-style: normal;
	font-size: 12px;
	letter-spacing: .1em;
	opacity: .55;
}

/* --- hub responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
	.fx-vs, .fx-tiles, .fx-phases, .fx-matrix, .fx-out { grid-template-columns: repeat(2, 1fr); }
	.fx-ladder { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
	.fx-ladder-step { min-height: 0; border-radius: 14px; border-bottom: 1px solid var(--line); }
	.fx-hero-split, .fx-dir-row { grid-template-columns: 1fr; }
	.fx-index-row { grid-template-columns: 54px 1fr auto; }
	.fx-index-row p { grid-column: 2 / -1; }
	.fx-stair-row { margin-left: 0; }
}
@media (max-width: 720px) {
	.fx-vs, .fx-tiles, .fx-phases, .fx-matrix, .fx-out, .fx-ladder, .fx-rail { grid-template-columns: 1fr; }
	.fx-anchors a { font-size: 13px; padding: 8px 14px; }
	.fx-index-row { grid-template-columns: 44px 1fr; row-gap: 10px; padding: 22px 0; }
	.fx-index-go { display: none; }
	.fx-traits li { padding-left: 30px; }
	.fx-traits li::before { width: 16px; }
}