/* ==========================================================================
   FutureAVO Replica — theme.css

   Layer order is fixed and must not be reshuffled; the whole cascade depends
   on it. Every selector is single-class or lower so nothing needs !important
   to win, and no two layers style the same property on the same element.

     1. tokens        design system variables
     2. reset         normalisation
     3. base          element defaults
     4. layout        container ladder, section rhythm
     5. components    logo, buttons, cards, menu, forms, accordion…
     6. sections      page-specific composition
     7. utilities     a deliberately tiny set
     8. motion        reveal engine + reduced-motion opt-out

   Values are not invented: the container ladder, the section padding pair,
   the gradient stops and the type steps were read out of the reference
   site's own compiled CSS. See DESIGN-TOKENS.md.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* --- Brand ---------------------------------------------------------- */
	--c-purple:       #86209b;
	--c-blue:         #1a82bf;
	--c-indigo:       #44326e;
	--c-black:        #000000;
	--c-white:        #ffffff;

	/* --- Text ----------------------------------------------------------- */
	--c-ink:          #13100d;   /* headings on light */
	--c-body:         #202020;   /* paragraphs on light */
	--c-muted:        #707070;   /* meta, rules, footer dividers */
	--c-muted-2:      #535756;

	/* --- Surfaces ------------------------------------------------------- */
	--c-surface:      #ffffff;
	--c-surface-alt:  #e3e3e3;   /* the grey band under the hero */
	--c-surface-soft: #f5f5f5;
	--c-line:         #ebebeb;
	--c-line-strong:  #d6d6d6;

	/* --- Gradients (stops copied from the reference) --------------------- */
	--grad-brand-x:   linear-gradient(to right, #000 10%, #1a82bf 70%, #86209b 100%);
	--grad-blue-y:    linear-gradient(to bottom, #1a82bf, #000);
	--grad-purple-y:  linear-gradient(to bottom, #86209b, #000);
	--grad-btn:       linear-gradient(88deg, #86209b -11.16%, #86209b 46.95%, #1a82bf 94.89%);

	/* --- Type ----------------------------------------------------------- */
	--font-body:      "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-heading:   var(--font-body);

	--fs-xs:          0.75rem;    /* 12px  — disclaimer */
	--fs-sm:          0.875rem;   /* 14px  — nav, meta, buttons */
	--fs-base:        1rem;       /* 16px  — body */
	--fs-lg:          1.125rem;   /* 18px  — lead */
	--fs-xl:          1.25rem;    /* 20px */
	--fs-2xl:         1.5rem;     /* 24px  — footer h4 */
	--fs-3xl:         1.875rem;   /* 30px  — section heading, mobile */
	--fs-4xl:         2.25rem;    /* 36px  — section heading, desktop */
	--fs-5xl:         3rem;       /* 48px  — hero h1, desktop */
	--fs-6xl:         3.75rem;    /* 60px  — oversized display */

	--lh-tight:       1.15;
	--lh-heading:     1.25;
	--lh-body:        1.6;
	--lh-relaxed:     1.75;

	--fw-light:       300;
	--fw-normal:      400;
	--fw-medium:      500;
	--fw-semibold:    600;
	--fw-bold:        700;
	--fw-extrabold:   800;

	/* --- Spacing: the 4px-based scale the reference compiles to ---------- */
	--sp-1:           0.25rem;   /* 4  */
	--sp-2:           0.5rem;    /* 8  */
	--sp-3:           0.75rem;   /* 12 */
	--sp-4:           1rem;      /* 16 */
	--sp-5:           1.25rem;   /* 20 */
	--sp-6:           1.5rem;    /* 24 */
	--sp-8:           2rem;      /* 32 */
	--sp-10:          2.5rem;    /* 40 — section padding, mobile */
	--sp-12:          3rem;      /* 48 */
	--sp-16:          4rem;      /* 64 */
	--sp-20:          5rem;      /* 80 — section padding, desktop */
	--sp-28:          7rem;      /* 112 — the taller CTA band */

	/* Section rhythm. Everything vertical derives from these two, which is
	   why the page scans as one system rather than a stack of one-offs. */
	--section-y:      var(--sp-10);
	--section-y-lg:   var(--sp-20);

	/* --- Radii ---------------------------------------------------------- */
	--r-sm:           0.125rem;  /* menu panels */
	--r-md:           0.5rem;    /* buttons */
	--r-lg:           0.625rem;  /* 10px — approach + portfolio cards */
	--r-xl:           1rem;
	--r-3xl:          1.5rem;    /* 24px — the rounded band edges */
	--r-full:         9999px;

	/* --- Elevation ------------------------------------------------------ */
	--shadow-card:    0 23px 56px rgba(0, 0, 0, 0.3);
	--shadow-soft:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-badge:   0 4px 6px -1px rgba(0, 0, 0, 0.2);

	/* --- Motion --------------------------------------------------------- */
	--ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast:       0.15s;
	--dur-base:       0.3s;
	--dur-slow:       1s;

	/* --- Chrome --------------------------------------------------------- */
	--header-h:       76px;
	--header-top:     0px;
	--z-header:       50;
	--z-drawer:       60;
	--z-skip:         100;

	/* --- Focus ---------------------------------------------------------- */
	--focus-ring:     2px solid #1a82bf;
	--focus-offset:   3px;
}

@media (min-width: 768px) {
	:root {
		--header-h:   84px;
		--header-top: 20px;  /* the header floats 20px off the top on desktop */
	}
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--sp-5));
}

body {
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	font-weight: var(--fw-normal);
	color: var(--c-body);
	background-color: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Locked while the mobile drawer is open. */
body.fa-scroll-locked {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol {
	list-style: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--c-ink);
	text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

@media (min-width: 768px) {
	h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); }
	h2 { font-size: var(--fs-4xl); }
	h3 { font-size: var(--fs-2xl); }
}

p {
	text-wrap: pretty;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	border-radius: var(--r-sm);
}

::selection {
	background: var(--c-purple);
	color: var(--c-white);
}

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

.fa-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	z-index: var(--z-skip);
	padding: var(--sp-3) var(--sp-5);
	background: var(--c-white);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-soft);
	transition: top var(--dur-base) var(--ease-out);
}

.fa-skip-link:focus {
	top: var(--sp-4);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* The container ladder, read verbatim out of the reference build. It is not a
   single max-width: the gutter narrows in steps so wide monitors get more
   content without the text measure ever running away. */
.fa-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

@media (min-width: 576px)  { .fa-container { max-width: 576px; } }
@media (min-width: 640px)  { .fa-container { max-width: 640px; } }
@media (min-width: 768px)  { .fa-container { max-width: 768px; } }
@media (min-width: 992px)  { .fa-container { max-width: 992px; } }
@media (min-width: 1024px) { .fa-container { max-width: 1024px; } }
@media (min-width: 1140px) { .fa-container { max-width: 1140px; } }
@media (min-width: 1300px) { .fa-container { max-width: 1200px; } }
@media (min-width: 1400px) { .fa-container { max-width: 1300px; } }
@media (min-width: 1500px) { .fa-container { max-width: 1400px; } }

.fa-container--narrow {
	max-width: 820px;
}

/* One rule owns vertical section rhythm. Nothing else sets section padding,
   which is what stops the "why is this gap 63px" class of bug. */
.fa-section {
	padding-block: var(--section-y);
	position: relative;
}

@media (min-width: 768px) {
	.fa-section {
		padding-block: var(--section-y-lg);
	}
}

.fa-section--tall {
	padding-block: var(--section-y);
}

@media (min-width: 768px) {
	.fa-section--tall {
		padding-block: var(--sp-28);
	}
}

.fa-section--flush-top    { padding-block-start: 0; }
.fa-section--flush-bottom { padding-block-end: 0; }

/* Section skins. */
.fa-section--grey     { background-color: var(--c-surface-alt); }
.fa-section--soft     { background-color: var(--c-surface-soft); }
.fa-section--dark     { background-color: var(--c-black); }
.fa-section--brand-x  { background-image: var(--grad-brand-x); }
.fa-section--blue-y   { background-image: var(--grad-blue-y); }
.fa-section--purple-y { background-image: var(--grad-purple-y); }

.fa-section--round      { border-radius: var(--r-3xl); }
.fa-section--round-top  { border-radius: var(--r-3xl) var(--r-3xl) 0 0; }

.fa-section--clip { overflow: hidden; }

/* Any dark-skinned section flips its own text colours. Declared once here so
   individual components never have to know what they are sitting on. */
.fa-section--dark,
.fa-section--brand-x,
.fa-section--blue-y,
.fa-section--purple-y {
	color: rgba(255, 255, 255, 0.85);
}

.fa-section--dark :is(h1, h2, h3, h4, h5, h6),
.fa-section--brand-x :is(h1, h2, h3, h4, h5, h6),
.fa-section--blue-y :is(h1, h2, h3, h4, h5, h6),
.fa-section--purple-y :is(h1, h2, h3, h4, h5, h6) {
	color: var(--c-white);
}

/* Only templates that open with neither the video hero nor a page hero need
   the fixed header's height added back. See fa_body_class(). */
.fa-needs-offset .fa-main {
	padding-block-start: calc(var(--header-h) + var(--header-top));
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- 5.1 Section title ---------------------------------------------------- */

.fa-sec-title {
	margin-block-end: var(--sp-10);
}

.fa-sec-title--center {
	text-align: center;
}

.fa-sec-title--center .fa-sec-title__lead {
	margin-inline: auto;
}

.fa-sec-title--start {
	text-align: start;
}

.fa-sec-title__eyebrow {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-blue);
	margin-block-end: var(--sp-3);
}

.fa-sec-title--light .fa-sec-title__eyebrow {
	color: rgba(255, 255, 255, 0.75);
}

.fa-sec-title__heading {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-semibold);
	text-transform: capitalize;
	margin-block-end: var(--sp-3);
}

@media (min-width: 768px) {
	.fa-sec-title__heading {
		font-size: var(--fs-4xl);
	}
}

.fa-sec-title--light .fa-sec-title__heading {
	color: var(--c-white);
}

.fa-sec-title__lead {
	font-size: var(--fs-base);
	color: var(--c-body);
	max-width: 62ch;
}

.fa-sec-title--light .fa-sec-title__lead {
	color: rgba(255, 255, 255, 0.8);
}

/* Bilingual heading pairs. The reference sets Arabic and English on one line;
   splitting them into spans lets each get its own size and direction. */
.fa-bi {
	display: block;
}

.fa-bi__ar {
	display: block;
	direction: rtl;
	unicode-bidi: isolate;
	font-weight: var(--fw-bold);
	line-height: 1.6;
}

.fa-bi__en {
	display: block;
}

/* --- 5.2 Outlined display heading ---------------------------------------- */

/* The hero H1: transparent fill with a 1px white stroke. Kept as its own
   class because it is the one place the design uses an outline treatment. */
.fa-outline-heading {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px var(--c-white);
	text-transform: capitalize;
	word-break: break-word;
	font-weight: var(--fw-bold);
}

.fa-outline-heading--soft {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.49);
}

/* Safari/Firefox without -webkit-text-stroke would render invisible text, so
   fall back to solid white. @supports is the guard, not a UA sniff. */
@supports not (-webkit-text-stroke: 1px white) {
	.fa-outline-heading {
		-webkit-text-fill-color: currentColor;
		color: var(--c-white);
	}
}

/* --- 5.3 Logo placeholder ------------------------------------------------ */

/* Sized to the footprint the real logo occupies (200×48 at the desktop
   breakpoint) so dropping in a Site Identity logo shifts nothing. */
.fa-logo {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

.fa-logo__img {
	width: auto;
	max-height: 48px;
	object-fit: contain;
}

.fa-logo__placeholder {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	width: 200px;
	max-width: 100%;
	height: 48px;
	padding-inline: var(--sp-3);
	border: 1px dashed currentColor;
	border-radius: var(--r-md);
}

.fa-logo--light .fa-logo__placeholder { color: rgba(255, 255, 255, 0.7); }
.fa-logo--dark  .fa-logo__placeholder { color: var(--c-muted); }

.fa-logo__mark {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: var(--r-sm);
	background-image: var(--grad-btn);
}

.fa-logo__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.1;
	letter-spacing: 0.08em;
}

.fa-logo__line1 {
	font-size: 0.6875rem;
	font-weight: var(--fw-bold);
}

.fa-logo__line2 {
	font-size: 0.5rem;
	font-weight: var(--fw-medium);
	opacity: 0.75;
}

@media (max-width: 767px) {
	.fa-logo__placeholder {
		width: 168px;
		height: 42px;
	}

	.fa-logo,
	.fa-logo__img {
		min-height: 42px;
		max-height: 42px;
	}
}

/* --- 5.4 Buttons --------------------------------------------------------- */

/* One button, three skins. The gradient variant reproduces the reference's
   masked-border trick: a gradient painted into the padding box and punched out
   with mask-composite, so the border is a gradient but the fill is not. */
.fa-btn {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	width: fit-content;
	padding: var(--sp-4) var(--sp-6);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-align: center;
	border: none;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: color var(--dur-base) var(--ease-standard),
	            background-color var(--dur-base) var(--ease-standard),
	            transform var(--dur-base) var(--ease-standard);
}

.fa-btn__arrow {
	position: relative;
	left: 0;
	display: inline-flex;
	transition: left var(--dur-base) var(--ease-standard);
}

.fa-btn:hover .fa-btn__arrow {
	left: var(--sp-2);
}

.fa-btn:active {
	transform: translateY(1px);
}

/*
 * Gradient-bordered, transparent-filled.
 *
 * The fill is transparent, so the label has to take its colour from whatever
 * the button is sitting on. Ink is the default because most sections are
 * light; the dark-section override immediately below flips it to white. Fixing
 * the label to white here is what makes this button vanish on a white band.
 */
.fa-btn--gradient {
	color: var(--c-ink);
	background: transparent;
}

.fa-section--dark .fa-btn--gradient,
.fa-section--brand-x .fa-btn--gradient,
.fa-section--blue-y .fa-btn--gradient,
.fa-section--purple-y .fa-btn--gradient,
.fa-page-hero .fa-btn--gradient,
.fa-hero .fa-btn--gradient,
.fa-drawer .fa-btn--gradient,
.fa-footer .fa-btn--gradient {
	color: var(--c-white);
}

.fa-btn--gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: var(--r-md);
	background: var(--grad-btn) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.fa-btn--gradient:hover {
	background-image: var(--grad-btn);
	color: var(--c-white);
}

/* Solid gradient fill — the primary CTA. */
.fa-btn--solid {
	color: var(--c-white);
	background-image: var(--grad-btn);
	background-size: 160% 100%;
	background-position: 0% 0%;
	transition: background-position 0.5s var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

.fa-btn--solid:hover {
	background-position: 100% 0%;
	color: var(--c-white);
}

/* Quiet outline for secondary actions on light grounds. */
.fa-btn--ghost {
	color: var(--c-ink);
	background: transparent;
	border: 1px solid var(--c-line-strong);
}

.fa-btn--ghost:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
}

.fa-btn--block {
	width: 100%;
}

.fa-btn[disabled],
.fa-btn[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* On the light hero card the button text must go dark to stay legible. */
.fa-btn--on-light {
	color: var(--c-ink);
}

@media (min-width: 768px) {
	.fa-btn--on-light {
		color: var(--c-white);
	}
}

/* --- 5.5 Header ---------------------------------------------------------- */

.fa-header {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	width: 100%;
	padding-block: var(--sp-2);
	background-color: rgba(0, 0, 0, 0.5);
	transition: background-color var(--dur-base) var(--ease-standard),
	            transform var(--dur-base) var(--ease-standard),
	            box-shadow var(--dur-base) var(--ease-standard);
}

@media (min-width: 768px) {
	.fa-header {
		position: fixed;
		inset-block-start: var(--header-top);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}

/* Once scrolled past the hero the bar sticks to the very top and goes opaque —
   the reference's behaviour, reproduced without a scroll-jank listener (see
   theme.js: it is driven by a sentinel IntersectionObserver). */
.fa-header.is-stuck {
	inset-block-start: 0;
	background-color: rgba(0, 0, 0, 0.92);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.fa-header.is-hidden {
	transform: translateY(calc(-100% - var(--header-top)));
}

.fa-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}

.fa-header__brand {
	flex: 0 0 auto;
}

.fa-header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.fa-header__nav {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		justify-content: flex-end;
	}
}

.fa-header__actions {
	display: none;
}

@media (min-width: 1024px) {
	.fa-header__actions {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		flex: 0 0 auto;
		margin-inline-start: var(--sp-5);
	}
}

/* --- 5.6 Desktop menu ---------------------------------------------------- */

.fa-menu__list {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.fa-menu__item {
	position: relative;
}

.fa-menu__item--d0 {
	display: flex;
	align-items: center;
	margin-inline: var(--sp-2);
}

.fa-menu__link {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 2.5;
	color: var(--c-white);
	white-space: nowrap;
	transition: opacity var(--dur-fast) var(--ease-standard);
}

.fa-menu__link:hover {
	opacity: 0.75;
}

.fa-menu__item--d0.is-current > .fa-menu__link {
	color: var(--c-white);
	position: relative;
}

.fa-menu__item--d0.is-current > .fa-menu__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.5em;
	height: 2px;
	background-image: var(--grad-btn);
}

.fa-menu__caret {
	display: inline-flex;
	transition: transform var(--dur-base) var(--ease-standard);
}

.fa-menu__item--parent:hover > .fa-menu__link .fa-menu__caret,
.fa-menu__link[aria-expanded="true"] .fa-menu__caret {
	transform: rotate(180deg);
}

.fa-menu__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	object-fit: contain;
	margin-inline-end: var(--sp-3);
}

/* Flyout panels. Level 1 drops below the bar; level 2 opens sideways out of
   its parent row, which is what the reference does. */
.fa-menu__panel {
	position: absolute;
	z-index: 10;
	min-width: 260px;
	opacity: 0;
	visibility: hidden;
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-card);
	transition: opacity var(--dur-base) var(--ease-standard),
	            visibility var(--dur-base) var(--ease-standard),
	            transform var(--dur-base) var(--ease-standard);
}

.fa-menu__panel--l1 {
	inset-block-start: 100%;
	inset-inline-start: 0;
	transform: translateY(var(--sp-2));
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding-block: var(--sp-2);
}

.fa-menu__panel--l2 {
	inset-block-start: 0;
	inset-inline-start: 100%;
	transform: translateX(var(--sp-2));
	background-color: var(--c-white);
	padding-block: var(--sp-2);
}

/* Open on hover for pointers… */
@media (hover: hover) and (min-width: 1024px) {
	.fa-menu__item--parent:hover > .fa-menu__panel,
	.fa-menu__item--parent:focus-within > .fa-menu__panel {
		opacity: 1;
		visibility: visible;
		transform: translate(0, 0);
	}
}

/* …and on explicit toggle for keyboard and touch. */
.fa-menu__item--parent.is-open > .fa-menu__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(0, 0);
}

.fa-menu__sublist {
	display: flex;
	flex-direction: column;
}

.fa-menu__item--d1 > .fa-menu__link,
.fa-menu__item--d2 > .fa-menu__link,
.fa-menu__item--d1 > .fa-menu__link--toggle,
.fa-menu__item--d2 > .fa-menu__link--toggle {
	width: 100%;
	padding: var(--sp-3) var(--sp-5);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	color: var(--c-ink);
	text-transform: capitalize;
	white-space: nowrap;
	transition: background-color var(--dur-fast) var(--ease-standard),
	            color var(--dur-fast) var(--ease-standard);
}

.fa-menu__item--d1 > .fa-menu__link:hover,
.fa-menu__item--d2 > .fa-menu__link:hover,
.fa-menu__item--d1 > .fa-menu__link--toggle:hover,
.fa-menu__item--d2 > .fa-menu__link--toggle:hover {
	background-color: var(--c-muted);
	color: var(--c-white);
	opacity: 1;
}

.fa-menu__item--d1 .fa-menu__caret,
.fa-menu__item--d2 .fa-menu__caret {
	margin-inline-start: auto;
	transform: rotate(-90deg);
}

.fa-menu__item--d1:hover .fa-menu__caret {
	transform: rotate(-90deg);
}

/* --- 5.7 Mobile drawer --------------------------------------------------- */

.fa-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: var(--sp-2);
	border-radius: var(--r-md);
	color: var(--c-white);
}

@media (min-width: 1024px) {
	.fa-burger {
		display: none;
	}
}

.fa-burger__line {
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	border-radius: var(--r-full);
	transition: transform var(--dur-base) var(--ease-out),
	            opacity var(--dur-fast) var(--ease-standard);
}

.fa-burger[aria-expanded="true"] .fa-burger__line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.fa-burger[aria-expanded="true"] .fa-burger__line:nth-child(2) {
	opacity: 0;
}

.fa-burger[aria-expanded="true"] .fa-burger__line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.fa-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: grid;
	grid-template-columns: 1fr;
	visibility: hidden;
	pointer-events: none;
}

/* The drawer ships with the `hidden` attribute so it is out of the a11y tree
   before JavaScript runs. A class selector outranks the UA stylesheet's
   [hidden]{display:none}, so without this rule the drawer's contents render
   inline in the page flow on desktop. */
.fa-drawer[hidden] {
	display: none;
}

.fa-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.fa-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.fa-drawer.is-open .fa-drawer__scrim {
	opacity: 1;
}

.fa-drawer__panel {
	position: relative;
	inset-inline-start: 0;
	width: min(92vw, 400px);
	height: 100%;
	margin-inline-start: auto;
	padding: var(--sp-5);
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--c-black);
	background-image: var(--grad-blue-y);
	transform: translateX(100%);
	transition: transform 0.35s var(--ease-out);
}

.fa-drawer.is-open .fa-drawer__panel {
	transform: translateX(0);
}

.fa-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block-end: var(--sp-5);
	margin-block-end: var(--sp-4);
	border-block-end: 1px solid rgba(255, 255, 255, 0.15);
}

.fa-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--c-white);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--r-md);
}

/* Inside the drawer the same walker markup lays out as a stacked accordion. */
.fa-drawer .fa-menu__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.fa-drawer .fa-menu__item--d0 {
	display: block;
	margin-inline: 0;
	border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}

.fa-drawer .fa-menu__link,
.fa-drawer .fa-menu__link--toggle {
	width: 100%;
	padding-block: var(--sp-4);
	font-size: var(--fs-base);
	line-height: 1.3;
	color: var(--c-white);
	background: none;
	text-transform: none;
	/* The desktop bar sets nowrap so items never wrap mid-label. In the drawer
	   the same rule pushes long entries ("Android App Development") past the
	   panel edge on a 320px screen, so wrapping is restored here. */
	white-space: normal;
	overflow-wrap: anywhere;
}

.fa-drawer .fa-menu__link--toggle {
	justify-content: space-between;
}

.fa-drawer .fa-menu__link:hover,
.fa-drawer .fa-menu__link--toggle:hover {
	background: none;
	color: var(--c-white);
	opacity: 0.75;
}

.fa-drawer .fa-menu__caret {
	margin-inline-start: auto;
	transform: none;
}

.fa-drawer .fa-menu__link[aria-expanded="true"] .fa-menu__caret {
	transform: rotate(180deg);
}

/* Height-animated panels rather than display:none, so the open/close reads as
   a movement instead of a jump. */
.fa-drawer .fa-menu__panel {
	position: static;
	min-width: 0;
	visibility: visible;
	opacity: 1;
	transform: none;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	padding-block: 0;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.fa-drawer .fa-menu__item--parent.is-open > .fa-menu__panel {
	grid-template-rows: 1fr;
}

.fa-drawer .fa-menu__sublist {
	overflow: hidden;
	padding-inline-start: var(--sp-4);
}

.fa-drawer .fa-menu__item--d1 > .fa-menu__link,
.fa-drawer .fa-menu__item--d2 > .fa-menu__link,
.fa-drawer .fa-menu__item--d1 > .fa-menu__link--toggle {
	padding: var(--sp-3) 0;
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.85);
}

.fa-drawer .fa-menu__item--d1 > .fa-menu__link:hover,
.fa-drawer .fa-menu__item--d2 > .fa-menu__link:hover {
	background: none;
	color: var(--c-white);
}

.fa-drawer__foot {
	margin-block-start: var(--sp-8);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

/* --- 5.8 Hero ------------------------------------------------------------ */

.fa-hero {
	position: relative;
	height: auto;
	background-color: var(--c-black);
}

@media (min-width: 768px) {
	.fa-hero {
		height: 100vh;
		height: 100svh;
	}
}

.fa-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fa-hero__video,
.fa-hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mobile gets a static poster rather than an autoplaying video: on cellular
   the video is the single largest asset on the site and it is decorative. */
@media (max-width: 767px) {
	.fa-hero {
		min-height: 78vh;
	}
}

.fa-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.4) 100%);
}

.fa-hero__inner {
	position: relative;
	height: 100%;
}

.fa-hero__box {
	position: relative;
	inset-block-end: 0;
	width: 100%;
	padding: var(--sp-5);
	text-align: center;
	border-radius: var(--r-md) var(--r-md) 0 0;
	background-color: var(--c-white);
}

@media (min-width: 768px) {
	.fa-hero__box {
		position: absolute;
		inset-inline: 0;
		inset-block-end: var(--sp-16);
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
	}
}

.fa-hero__title {
	font-size: var(--fs-3xl);
	text-transform: capitalize;
	margin-block-end: var(--sp-3);
	color: var(--c-ink);
}

@media (min-width: 768px) {
	.fa-hero__title {
		font-size: var(--fs-5xl);
	}
}

/* Outline treatment only reads on the dark desktop card; on the white mobile
   card it would be unreadable, so it is scoped to the breakpoint. */
@media (max-width: 767px) {
	.fa-hero__title.fa-outline-heading {
		-webkit-text-fill-color: currentColor;
		-webkit-text-stroke: 0;
		color: var(--c-ink);
	}
}

.fa-hero__text {
	font-size: var(--fs-sm);
	color: var(--c-body);
	max-width: 68ch;
	margin-inline: auto;
	margin-block-end: var(--sp-4);
}

@media (min-width: 768px) {
	.fa-hero__text {
		color: var(--c-white);
	}
}

.fa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}

.fa-hero__scroll {
	display: none;
}

@media (min-width: 768px) {
	.fa-hero__scroll {
		position: absolute;
		inset-inline: 0;
		inset-block-end: var(--sp-4);
		display: flex;
		justify-content: center;
	}
}

.fa-hero__scroll-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--c-white);
	opacity: 0.6;
	animation: fa-bob 2.5s var(--ease-standard) infinite;
}

.fa-hero__scroll-btn:hover {
	opacity: 1;
}

/* --- 5.9 Approach cards (the fanned stack) -------------------------------- */

/* At rest the five cards sit fanned out (−200 … +200px). Hovering anywhere on
   the group collapses them into an even row and reveals each caption. It is
   the signature interaction on the reference homepage. */
.fa-approach {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: var(--sp-4);
}

@media (min-width: 1024px) {
	.fa-approach {
		flex-wrap: nowrap;
	}
}

.fa-approach__col {
	width: 45%;
}

@media (min-width: 1024px) {
	.fa-approach__col {
		width: 20%;
	}
}

.fa-approach__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	transition: right var(--dur-slow) var(--ease-standard),
	            transform var(--dur-slow) var(--ease-standard),
	            box-shadow var(--dur-base) var(--ease-standard);
}

.fa-approach__card::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0) 60%);
	transition: opacity var(--dur-slow) var(--ease-standard);
	pointer-events: none;
}

.fa-approach__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 768px) {
	.fa-approach__img {
		height: 345px;
	}
}

.fa-approach__caption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--sp-4);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--c-white);
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-standard);
}

@media (min-width: 1024px) {
	.fa-approach__col:nth-child(1) .fa-approach__card { right: -200px; z-index: 1; }
	.fa-approach__col:nth-child(2) .fa-approach__card { right: -100px; z-index: 2; box-shadow: var(--shadow-card); }
	.fa-approach__col:nth-child(3) .fa-approach__card { right: 0;      z-index: 3; box-shadow: var(--shadow-card); }
	.fa-approach__col:nth-child(4) .fa-approach__card { right: 100px;  z-index: 4; box-shadow: var(--shadow-card); }
	.fa-approach__col:nth-child(5) .fa-approach__card { right: 200px;  z-index: 5; }

	.fa-approach:hover .fa-approach__card,
	.fa-approach:focus-within .fa-approach__card {
		right: 0;
		cursor: pointer;
	}
}

.fa-approach:hover .fa-approach__card::before,
.fa-approach:hover .fa-approach__caption,
.fa-approach:focus-within .fa-approach__card::before,
.fa-approach:focus-within .fa-approach__caption {
	opacity: 1;
}

/* Touch devices have no hover, so the captions are simply always on. */
@media (hover: none) {
	.fa-approach__card::before,
	.fa-approach__caption {
		opacity: 1;
	}
}

/* --- 5.10 Award badge carousel ------------------------------------------- */

.fa-badges {
	margin-block-start: var(--sp-10);
	padding: var(--sp-5);
}

.fa-badges__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	margin-inline: auto;
	padding: var(--sp-4);
	overflow: hidden;
	background-color: var(--c-white);
	border-radius: var(--r-full);
	box-shadow: var(--shadow-badge);
}

.fa-badges__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- 5.11 Service showcase rows ------------------------------------------ */

.fa-showcase {
	display: grid;
	gap: var(--sp-8);
	align-items: center;
}

@media (min-width: 992px) {
	.fa-showcase {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-12);
	}

	/* Odd rows put the copy on the right, even rows flip it. The alternation
	   is what stops nine consecutive rows reading as a list. */
	.fa-showcase--flip .fa-showcase__media {
		order: 2;
	}
}

.fa-showcase + .fa-showcase {
	margin-block-start: var(--sp-16);
}

.fa-showcase__title {
	font-size: var(--fs-2xl);
	margin-block-end: var(--sp-4);
}

@media (min-width: 768px) {
	.fa-showcase__title {
		font-size: var(--fs-3xl);
	}
}

.fa-showcase__text {
	margin-block-end: var(--sp-5);
}

.fa-showcase__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
}

.fa-showcase__thumb {
	width: 100%;
	height: auto;
	border-radius: var(--r-lg);
	object-fit: cover;
	transition: transform var(--dur-base) var(--ease-out);
}

.fa-showcase__thumb:hover {
	transform: translateY(-6px);
}

/* --- 5.11b Services showcase: list / visual / detail ---------------------- */

.fa-svc__grid{
	display:grid;
	gap:var(--sp-10);
}

@media (min-width:1140px){
	.fa-svc__grid{
		grid-template-columns:minmax(0,.72fr) minmax(0,.88fr) minmax(0,1fr);
		gap:var(--sp-10);
		align-items:center;
	}
}

/* --- left: heading with the list beneath it --- */
.fa-svc__eyebrow{
	font-size:.74rem;
	font-weight:var(--fw-semibold);
	letter-spacing:.28em;
	text-transform:uppercase;
	color:rgba(255,255,255,.55);
	margin-block-end:var(--sp-3);
}

.fa-svc__title{
	font-size:var(--fs-4xl);
	font-weight:var(--fw-semibold);
	line-height:1.1;
	letter-spacing:-.02em;
	color:var(--c-white);
	margin-block-end:var(--sp-5);
}

@media (min-width:1140px){
	.fa-svc__title{ font-size:2.6rem; }
}

/* A rule between the heading and the list, so the list reads as belonging to
   it rather than as a separate navigation block. */
.fa-svc__title::after{
	content:"";
	display:block;
	width:64px;
	height:1px;
	background:rgba(255,255,255,.42);
	margin-block-start:var(--sp-5);
}

.fa-svc__list{
	display:flex;
	flex-direction:column;
	gap:2px;
	margin-block-end:var(--sp-8);
}

.fa-svc__tab{
	display:block;
	width:100%;
	padding:.62rem 0 .62rem 1rem;
	text-align:start;
	font-size:1.02rem;
	font-weight:var(--fw-medium);
	line-height:1.35;
	color:rgba(255,255,255,.46);
	border-inline-start:2px solid transparent;
	transition:color var(--dur-base) var(--ease-standard),
	           border-color var(--dur-base) var(--ease-standard);
}

.fa-svc__tab:hover{ color:rgba(255,255,255,.82); }

.fa-svc__tab.is-active{
	color:var(--c-white);
	font-weight:var(--fw-semibold);
	border-inline-start-color:#A57DEF;
}

.fa-svc__cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:var(--sp-4) var(--sp-8);
	font-size:var(--fs-sm);
	font-weight:var(--fw-semibold);
	color:var(--c-white);
	background-image:var(--grad-btn);
	border-radius:var(--r-full);
	box-shadow:0 12px 30px rgba(110,79,216,.34);
	transition:transform var(--dur-base) var(--ease-out),
	           box-shadow var(--dur-base) var(--ease-out);
}

.fa-svc__cta:hover{
	transform:translateY(-2px);
	box-shadow:0 18px 40px rgba(110,79,216,.46);
}

/* --- middle: the visual --- */
.fa-svc__visual{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1fr);
	aspect-ratio:4 / 5;
	border-radius:22px;
	overflow:hidden;
	background:
		radial-gradient(80% 60% at 50% 18%, rgba(139,107,232,.30), transparent 70%),
		linear-gradient(168deg, #2a1c3e 0%, #191026 60%, #120a1b 100%);
	border:1px solid rgba(255,255,255,.09);
	box-shadow:0 30px 70px rgba(10,5,20,.45);
}

.fa-svc__shot{
	grid-area:1 / 1;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0;
	padding:var(--sp-6);
	opacity:0;
	transform:scale(.97);
	transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}

.fa-svc__shot.is-active{ opacity:1; transform:scale(1); }

.fa-svc__shot img{
	width:100%;
	height:auto;
	max-height:100%;
	object-fit:contain;
}

/* --- right: the detail --- */
/* Panels stack in one cell, so the column is only ever as tall as the tallest
   one and switching does not move anything else on the page. */
[data-fa-svc-ready] .fa-svc__details{
	display:grid;
	grid-template-columns:minmax(0,1fr);
}

[data-fa-svc-ready] .fa-svc__panel{
	grid-area:1 / 1;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transform:translateY(10px);
	transition:opacity var(--dur-base) var(--ease-out),
	           transform var(--dur-base) var(--ease-out),
	           visibility var(--dur-base) var(--ease-out);
}

[data-fa-svc-ready] .fa-svc__panel.is-active{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:none;
}

.fa-svc__panel + .fa-svc__panel{ margin-block-start:var(--sp-10); }
[data-fa-svc-ready] .fa-svc__panel + .fa-svc__panel{ margin-block-start:0; }

.fa-svc__panel-title{
	font-size:1.65rem;
	font-weight:var(--fw-semibold);
	color:var(--c-white);
	margin-block-end:var(--sp-3);
}

.fa-svc__desc{
	font-size:.96rem;
	line-height:1.78;
	color:rgba(255,255,255,.76);
	margin-block-end:var(--sp-5);
	max-width:46ch;
}

.fa-svc__bullets{
	display:grid;
	gap:var(--sp-2) var(--sp-6);
	margin-block-end:var(--sp-6);
	font-size:.9rem;
	color:rgba(255,255,255,.82);
}

@media (min-width:560px){
	.fa-svc__bullets{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Dots drawn rather than list markers, so they can carry the accent. */
.fa-svc__bullets li{
	position:relative;
	padding-inline-start:var(--sp-5);
	line-height:1.5;
}

.fa-svc__bullets li::before{
	content:"";
	position:absolute;
	inset-inline-start:0;
	inset-block-start:.52em;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#A57DEF;
}

.fa-svc__more{
	display:inline-flex;
	align-items:center;
	gap:var(--sp-2);
	font-size:.88rem;
	font-weight:var(--fw-semibold);
	color:var(--c-white);
	padding-block-end:var(--sp-1);
	border-block-end:1px solid rgba(255,255,255,.42);
	transition:gap var(--dur-base) var(--ease-out),
	           border-color var(--dur-base) var(--ease-standard);
}

.fa-svc__more:hover{ gap:var(--sp-4); border-block-end-color:var(--c-white); }

@media (max-width:1139px){
	.fa-svc__visual{ max-width:440px; margin-inline:auto; aspect-ratio:1; }
}

@media (prefers-reduced-motion:reduce){
	.fa-svc__shot,.fa-svc__panel,.fa-svc__tab,.fa-svc__cta{ transition:none; }
}
/* --- 5.12 Icon cards (industries, features, why-us) ---------------------- */

.fa-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.fa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fa-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.fa-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.fa-grid { gap: var(--sp-6); }
}

.fa-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	height: 100%;
	padding: var(--sp-5);
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	transition: transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out);
}

.fa-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
	border-color: transparent;
}

.fa-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--c-white);
	background-image: var(--grad-btn);
	border-radius: var(--r-md);
}

.fa-card__title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
}

.fa-card__text {
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

/* Glass variant, for cards sitting on a gradient band. */
.fa-card--glass {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.85);
}

.fa-card--glass .fa-card__title {
	color: var(--c-white);
}

.fa-card--glass .fa-card__text {
	color: rgba(255, 255, 255, 0.72);
}

.fa-card--glass:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Compact centred variant for the 22-item industry grid. */
.fa-card--tile {
	align-items: center;
	text-align: center;
	padding: var(--sp-4);
	gap: var(--sp-2);
}

.fa-card--tile .fa-card__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

/* --- 5.12b Industries marquee --------------------------------------------- */

/* Two rows of pills scrolling opposite ways. The track prints its items twice
   and travels exactly -50%, so the duplicate lands where the original began
   and the loop has no visible seam. */
.fa-ind__rows{
	display:flex;
	flex-direction:column;
	gap:var(--sp-4);
	/* full-bleed: the rows run off both edges of the viewport */
	width:100vw;
	margin-inline-start:50%;
	transform:translateX(-50%);
	/* fade the ends so items enter and leave rather than being cut */
	mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.fa-ind__row{ overflow:hidden; }

.fa-ind__track{
	display:flex;
	gap:var(--sp-4);
	width:max-content;
	padding-block:var(--sp-1);
	will-change:transform;
}

.fa-ind__row--fwd .fa-ind__track{ animation:fa-marquee-l 46s linear infinite; }
.fa-ind__row--rev .fa-ind__track{ animation:fa-marquee-r 52s linear infinite; }

@keyframes fa-marquee-l{
	from{ transform:translateX(0); }
	to  { transform:translateX(-50%); }
}

@keyframes fa-marquee-r{
	from{ transform:translateX(-50%); }
	to  { transform:translateX(0); }
}

/* let people read a pill they are pointing at */
.fa-ind__rows:hover .fa-ind__track{ animation-play-state:paused; }

.fa-ind__item{ flex:0 0 auto; }

.fa-ind__pill{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:var(--sp-2);
	min-width:186px;
	padding:var(--sp-4) var(--sp-6);
	background:rgba(255,255,255,.055);
	border:1px solid rgba(255,255,255,.13);
	border-radius:var(--r-lg);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	transition:background-color var(--dur-base) var(--ease-standard),
	           border-color var(--dur-base) var(--ease-standard),
	           transform var(--dur-base) var(--ease-out);
}

.fa-ind__item:hover .fa-ind__pill{
	background:rgba(255,255,255,.11);
	border-color:rgba(255,255,255,.30);
	transform:translateY(-3px);
}

.fa-ind__icon{
	color:var(--c-white);
	opacity:.92;
	flex:0 0 auto;
}

.fa-ind__label{
	font-size:var(--fs-sm);
	font-weight:var(--fw-semibold);
	color:var(--c-white);
	white-space:nowrap;
	letter-spacing:.005em;
}

@media (max-width:640px){
	.fa-ind__pill{ min-width:148px; padding:var(--sp-3) var(--sp-4); }
	.fa-ind__label{ font-size:var(--fs-xs); }
}

/* A marquee is motion nobody asked for. Stop it, and let the rows wrap into a
   static grid so every industry is still readable. */
@media (prefers-reduced-motion:reduce){
	.fa-ind__track{ animation:none !important; flex-wrap:wrap; width:auto; justify-content:center; }
	.fa-ind__rows{ mask-image:none; -webkit-mask-image:none; width:auto; margin-inline-start:0; transform:none; }
	.fa-ind__item[aria-hidden="true"]{ display:none; }
}
/* --- 5.12c Split panels: philosophy / why choose us ----------------------- */

/* Two full-bleed panels meeting at the centre line. Stacks on narrow screens
   rather than shrinking to two unreadable columns. */
.fa-split{
	display:grid;
	grid-template-columns:1fr;
}

@media (min-width:992px){
	.fa-split{ grid-template-columns:1fr 1fr; }
}

.fa-split__panel{
	display:flex;
	align-items:center;
	padding:var(--sp-12) var(--sp-6);
}

@media (min-width:768px){
	.fa-split__panel{ padding:var(--sp-20) var(--sp-10); }
}

@media (min-width:1400px){
	.fa-split__panel{ padding:var(--sp-20) var(--sp-16); }
}

.fa-split__panel--accent{
	background-image:var(--grad-btn);
	color:rgba(255,255,255,.88);
}

.fa-split__panel--dark{
	background-color:#191322;
	color:rgba(255,255,255,.76);
}

.fa-split__inner{
	width:100%;
	max-width:44rem;
	margin-inline:auto;
}

.fa-split__title{
	font-size:var(--fs-4xl);
	font-weight:var(--fw-extrabold);
	line-height:1.02;
	letter-spacing:-.02em;
	text-transform:uppercase;
	color:var(--c-white);
	margin-block-end:var(--sp-6);
}

@media (min-width:1140px){
	.fa-split__title{ font-size:3.4rem; }
}

/* Two columns of body copy on the left panel, as in the reference. */
.fa-split__cols{
	display:grid;
	gap:var(--sp-6);
}

@media (min-width:640px){
	.fa-split__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-8); }
}

.fa-split__col p,
.fa-split__body p{
	font-size:var(--fs-sm);
	line-height:1.8;
	margin-block-end:var(--sp-4);
}

.fa-split__col p:last-child,
.fa-split__body p:last-child{ margin-block-end:0; }

/* The lead line on the dark panel picks up the accent, so the two sides read
   as a pair rather than two unrelated blocks. */
.fa-split__intro{
	font-size:var(--fs-base);
	font-weight:var(--fw-semibold);
	line-height:1.6;
	color:#A57DEF;
	margin-block-end:var(--sp-5);
}

.fa-split__actions{ margin-block-start:var(--sp-8); }

.fa-split__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:var(--sp-4) var(--sp-8);
	font-size:var(--fs-sm);
	font-weight:var(--fw-semibold);
	border-radius:var(--r-full);
	transition:transform var(--dur-base) var(--ease-out),
	           box-shadow var(--dur-base) var(--ease-out),
	           background-color var(--dur-base) var(--ease-standard);
}

.fa-split__btn--dark{
	background-color:#191322;
	color:var(--c-white);
}

.fa-split__btn--dark:hover{
	background-color:#0f0b16;
	transform:translateY(-2px);
	box-shadow:0 14px 30px rgba(0,0,0,.34);
}

.fa-split__btn--accent{
	background-image:var(--grad-btn);
	color:var(--c-white);
}

.fa-split__btn--accent:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 32px rgba(110,79,216,.42);
}

@media (prefers-reduced-motion:reduce){
	.fa-split__btn{ transition:none; }
}
/* --- 5.13 Testimonials --------------------------------------------------- */

.fa-quote {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	height: auto;
	padding: var(--sp-6);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-lg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.fa-quote__mark {
	font-size: 3rem;
	line-height: 0.6;
	color: var(--c-blue);
	font-weight: var(--fw-bold);
}

.fa-quote__text {
	font-size: var(--fs-base);
	color: rgba(255, 255, 255, 0.9);
	font-style: italic;
}

.fa-quote__foot {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-block-start: auto;
	padding-block-start: var(--sp-4);
	border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.fa-quote__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--r-full);
	object-fit: cover;
}

.fa-quote__name {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-white);
}

.fa-quote__role {
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.6);
}

/* --- 5.14 Counters ------------------------------------------------------- */

.fa-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-6);
	text-align: center;
}

@media (min-width: 768px) {
	.fa-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fa-stat__value {
	font-size: var(--fs-4xl);
	font-weight: var(--fw-bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	background-image: var(--grad-btn);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}

.fa-stat__label {
	margin-block-start: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

/* The brand gradient is tuned for white grounds; at full saturation the purple
   end is too dark to read as a numeral on a black band. Lightened tints here,
   applied only where the ground is dark. */
.fa-section--dark .fa-stat__value,
.fa-section--brand-x .fa-stat__value,
.fa-section--blue-y .fa-stat__value,
.fa-section--purple-y .fa-stat__value,
.fa-page-hero .fa-stat__value {
	background-image: linear-gradient(88deg, #d47ce4 0%, #d47ce4 45%, #6ec3f0 95%);
}

.fa-section--dark .fa-stat__label,
.fa-section--brand-x .fa-stat__label,
.fa-section--blue-y .fa-stat__label,
.fa-section--purple-y .fa-stat__label,
.fa-page-hero .fa-stat__label {
	color: rgba(255, 255, 255, 0.88);
}

/* --- 5.15 FAQ accordion -------------------------------------------------- */

.fa-faq {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	max-width: 900px;
	margin-inline: auto;
}

.fa-faq__item {
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background-color: var(--c-white);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-standard);
}

.fa-faq__item.is-open {
	border-color: var(--c-blue);
}

.fa-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	width: 100%;
	padding: var(--sp-5);
	text-align: start;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
	transition: color var(--dur-fast) var(--ease-standard);
}

.fa-faq__trigger:hover {
	color: var(--c-blue);
}

.fa-faq__marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--c-white);
	background-image: var(--grad-btn);
	border-radius: var(--r-full);
	transition: transform var(--dur-base) var(--ease-out);
}

.fa-faq__item.is-open .fa-faq__marker {
	transform: rotate(45deg);
}

/* grid-template-rows 0fr→1fr animates to content height without measuring it
   in JS, which is what makes this smooth at any answer length. */
.fa-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.fa-faq__item.is-open .fa-faq__panel {
	grid-template-rows: 1fr;
}

.fa-faq__panel-inner {
	overflow: hidden;
}

.fa-faq__answer {
	padding: 0 var(--sp-5) var(--sp-5);
	font-size: var(--fs-sm);
	color: var(--c-muted);
	line-height: var(--lh-relaxed);
}

/* --- 5.16 Forms ---------------------------------------------------------- */

.fa-form {
	display: grid;
	gap: var(--sp-4);
}

@media (min-width: 640px) {
	.fa-form--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fa-form__field--full {
		grid-column: 1 / -1;
	}
}

.fa-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.fa-form__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
}

.fa-form__req {
	color: #c0392b;
}

.fa-form__input,
.fa-form__textarea,
.fa-form__select {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-ink);
	background-color: var(--c-white);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	transition: border-color var(--dur-fast) var(--ease-standard),
	            box-shadow var(--dur-fast) var(--ease-standard);
}

.fa-form__textarea {
	min-height: 132px;
	resize: vertical;
}

.fa-form__input:focus,
.fa-form__textarea:focus,
.fa-form__select:focus {
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(26, 130, 191, 0.15);
	outline: none;
}

.fa-form__input[aria-invalid="true"],
.fa-form__textarea[aria-invalid="true"],
.fa-form__select[aria-invalid="true"] {
	border-color: #c0392b;
}

.fa-form__error {
	font-size: var(--fs-xs);
	color: #c0392b;
	min-height: 1em;
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but happily fill positioned ones. */
.fa-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fa-form__status {
	font-size: var(--fs-sm);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md);
	display: none;
}

.fa-form__status.is-visible {
	display: block;
}

.fa-form__status.is-success {
	background-color: #e6f5ec;
	color: #0c6b47;
	border: 1px solid #b7e2ca;
}

.fa-form__status.is-error {
	background-color: #fdecea;
	color: #a81f1f;
	border: 1px solid #f5c2bd;
}

/* Form dropped onto a dark band (the service-page hero). */
.fa-form--on-dark .fa-form__label {
	color: var(--c-white);
}

.fa-form--on-dark .fa-form__input,
.fa-form--on-dark .fa-form__textarea,
.fa-form--on-dark .fa-form__select {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--c-white);
}

.fa-form--on-dark .fa-form__input::placeholder,
.fa-form--on-dark .fa-form__textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

/* --- 5.17 Blog ----------------------------------------------------------- */

.fa-posts {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.fa-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	.fa-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fa-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	transition: transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out);
}

.fa-post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
}

.fa-post-card__media {
	position: relative;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	background-color: var(--c-surface-soft);
}

.fa-post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.fa-post-card:hover .fa-post-card__img {
	transform: scale(1.05);
}

.fa-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1 1 auto;
	padding: var(--sp-5);
}

.fa-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fa-post-card__title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: 1.35;
}

.fa-post-card__title a:hover {
	color: var(--c-blue);
}

.fa-post-card__excerpt {
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.fa-post-card__more {
	margin-block-start: auto;
	padding-block-start: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-blue);
}

/* Long-form article body. Constrained measure; the type scale is the same one
   the rest of the site uses so an article never feels like a different site. */
.fa-prose {
	max-width: 72ch;
	margin-inline: auto;
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
	color: var(--c-body);
}

.fa-prose > * + * {
	margin-block-start: var(--sp-5);
}

.fa-prose :is(h2, h3, h4) {
	margin-block-start: var(--sp-10);
	margin-block-end: var(--sp-3);
}

.fa-prose h2 { font-size: var(--fs-3xl); }
.fa-prose h3 { font-size: var(--fs-2xl); }

.fa-prose a {
	color: var(--c-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fa-prose :is(ul, ol) {
	padding-inline-start: var(--sp-6);
}

.fa-prose ul { list-style: disc; }
.fa-prose ol { list-style: decimal; }

.fa-prose li + li {
	margin-block-start: var(--sp-2);
}

.fa-prose blockquote {
	padding-inline-start: var(--sp-5);
	border-inline-start: 3px solid var(--c-blue);
	font-style: italic;
	color: var(--c-ink);
}

.fa-prose img {
	border-radius: var(--r-lg);
}

.fa-prose :is(pre, code) {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.9em;
}

.fa-prose pre {
	padding: var(--sp-4);
	overflow-x: auto;
	background-color: var(--c-surface-soft);
	border-radius: var(--r-md);
}

.fa-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.fa-prose :is(th, td) {
	padding: var(--sp-3);
	border: 1px solid var(--c-line);
	text-align: start;
}

/* --- 5.18 Pagination ----------------------------------------------------- */

.fa-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-12);
}

.fa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	transition: background-color var(--dur-fast) var(--ease-standard),
	            color var(--dur-fast) var(--ease-standard),
	            border-color var(--dur-fast) var(--ease-standard);
}

.fa-pagination .page-numbers:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
}

.fa-pagination .page-numbers.current {
	color: var(--c-white);
	background-image: var(--grad-btn);
	border-color: transparent;
}

/* --- 5.19 Breadcrumbs ---------------------------------------------------- */

.fa-breadcrumbs {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin-block-end: var(--sp-4);
}

.fa-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
}

.fa-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline-start: var(--sp-2);
	opacity: 0.5;
}

.fa-breadcrumbs a:hover {
	color: var(--c-blue);
}

.fa-breadcrumbs--on-dark {
	color: rgba(255, 255, 255, 0.7);
}

/* --- 5.20 Page hero (interior pages) ------------------------------------- */

.fa-page-hero {
	position: relative;
	z-index: 0;
	padding-block: calc(var(--header-h) + var(--sp-12)) var(--sp-12);
	background-color: var(--c-black);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--c-white);
}

@media (min-width: 992px) {
	.fa-page-hero {
		/* The reference pins the hero photograph while the copy scrolls over
		   it. Only enabled on pointer-capable large screens: background-attachment
		   fixed is a known jank source on mobile Safari. */
		background-attachment: fixed;
		padding-block: calc(var(--header-h) + var(--sp-20)) var(--sp-20);
	}
}

/* Two-layer scrim. The brand tint alone rides too light over a pale photograph
   and drops caption text below 4.5:1; the flat black underneath guarantees a
   contrast floor regardless of what image an editor uploads. */
.fa-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(0, 0, 0, 0.62);
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(26, 130, 191, 0.45) 70%, rgba(134, 32, 155, 0.5) 100%);
}

.fa-page-hero__grid {
	display: grid;
	gap: var(--sp-8);
	align-items: center;
}

@media (min-width: 992px) {
	.fa-page-hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--sp-12);
	}
}

.fa-page-hero__title {
	font-size: var(--fs-3xl);
	color: var(--c-white);
	margin-block-end: var(--sp-4);
}

@media (min-width: 768px) {
	.fa-page-hero__title {
		font-size: var(--fs-4xl);
	}
}

@media (min-width: 1140px) {
	.fa-page-hero__title {
		font-size: var(--fs-5xl);
	}
}

.fa-page-hero__lead {
	font-size: var(--fs-lg);
	color: rgba(255, 255, 255, 0.85);
	max-width: 60ch;
	margin-block-end: var(--sp-6);
}

.fa-page-hero__panel {
	padding: var(--sp-6);
	background-color: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--r-lg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.fa-page-hero__panel-title {
	font-size: var(--fs-xl);
	color: var(--c-white);
	margin-block-end: var(--sp-4);
}

/* --- 5.21 Process steps -------------------------------------------------- */

/* Numbered because the content genuinely is a sequence — discover, design,
   build, launch. Numbers on a non-sequence would be decoration. */
.fa-steps {
	display: grid;
	gap: var(--sp-6);
	counter-reset: fa-step;
}

@media (min-width: 768px) {
	.fa-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fa-step {
	position: relative;
	counter-increment: fa-step;
	padding-block-start: var(--sp-8);
}

.fa-step::before {
	content: counter(fa-step, decimal-leading-zero);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	font-size: var(--fs-3xl);
	font-weight: var(--fw-extrabold);
	line-height: 1;
	background-image: var(--grad-btn);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	opacity: 0.9;
}

/* The connecting rule between steps, hidden on the last one. */
@media (min-width: 768px) {
	.fa-step::after {
		content: "";
		position: absolute;
		inset-block-start: 14px;
		inset-inline-start: 52px;
		width: calc(100% - 52px);
		height: 1px;
		background: linear-gradient(to right, var(--c-line-strong), transparent);
	}

	.fa-step:last-child::after {
		display: none;
	}
}

.fa-step__title {
	font-size: var(--fs-lg);
	margin-block-end: var(--sp-2);
}

.fa-step__text {
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

.fa-section--dark .fa-step__text,
.fa-section--brand-x .fa-step__text,
.fa-section--blue-y .fa-step__text,
.fa-section--purple-y .fa-step__text {
	color: rgba(255, 255, 255, 0.72);
}

/* --- 5.22 Footer --------------------------------------------------------- */

.fa-footer {
	padding-block-start: var(--sp-10);
	background-color: var(--c-black);
	color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
	.fa-footer {
		padding-block-start: var(--sp-20);
	}
}

.fa-footer__brand {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	text-align: center;
}

.fa-footer__tagline {
	margin-block-start: var(--sp-5);
	font-size: var(--fs-base);
	color: var(--c-white);
}

.fa-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin-block-start: var(--sp-5);
}

.fa-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--c-white);
	border-radius: var(--r-md);
	position: relative;
	z-index: 0;
	transition: transform var(--dur-base) var(--ease-out);
}

.fa-footer__social-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 2px solid transparent;
	border-radius: var(--r-md);
	background: var(--grad-btn) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
}

.fa-footer__social-link:hover {
	transform: translateY(-3px);
}

.fa-footer__social-link:hover::before {
	background: var(--grad-btn) padding-box;
	-webkit-mask: none;
	        mask: none;
}

.fa-footer__region {
	margin-block: var(--sp-10) var(--sp-5);
	text-align: center;
}

.fa-footer__region-title {
	display: inline-block;
	padding-block-end: var(--sp-2);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	text-transform: capitalize;
	color: var(--c-white);
	border-block-end: 2px solid var(--c-muted);
}

.fa-footer__country {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-5);
	margin-block-start: var(--sp-5);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	color: var(--c-white);
}

.fa-footer__contact {
	display: flex;
	flex-wrap: wrap;
	margin-block-end: var(--sp-5);
}

@media (min-width: 992px) {
	.fa-footer__contact {
		flex-wrap: nowrap;
	}
}

.fa-footer__contact-col {
	width: 100%;
	padding-inline: var(--sp-5);
}

@media (min-width: 992px) {
	/* The reference divides the middle column with hairlines on both sides. */
	.fa-footer__contact-col--rule {
		border-inline: 1px solid var(--c-muted);
	}
}

.fa-footer__contact-row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--sp-2);
	margin-block-end: var(--sp-3);
	text-align: center;
}

.fa-footer__contact-row:last-child {
	margin-block-end: 0;
}

.fa-footer__contact-row .fa-icon {
	flex: 0 0 auto;
	margin-block-start: 0.35em;
	color: var(--c-blue);
}

.fa-footer__contact-link {
	font-size: var(--fs-sm);
	color: var(--c-white);
	transition: opacity var(--dur-fast) var(--ease-standard);
}

@media (min-width: 1280px) {
	.fa-footer__contact-link {
		font-size: var(--fs-base);
	}
}

.fa-footer__contact-link:hover {
	opacity: 0.5;
}

.fa-footer__legal {
	padding-block: var(--sp-5);
	border-block-start: 1px solid var(--c-muted);
}

.fa-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-5);
}

.fa-footer__legal-list a {
	font-size: var(--fs-sm);
	line-height: 2;
	color: var(--c-white);
}

.fa-footer__legal-list a:hover {
	opacity: 0.5;
}

.fa-footer__disclaimer {
	padding-block: var(--sp-5);
	border-block-start: 1px solid var(--c-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-light);
	line-height: 1.83;
	color: rgba(255, 255, 255, 0.75);
}

.fa-footer__disclaimer strong {
	font-weight: var(--fw-semibold);
	color: var(--c-white);
}

.fa-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-5);
	padding-block: var(--sp-5);
	border-block-start: 1px solid var(--c-muted);
}

@media (min-width: 768px) {
	.fa-footer__bottom {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}

.fa-footer__copyright {
	font-size: var(--fs-sm);
	font-weight: var(--fw-light);
	color: var(--c-white);
	text-align: center;
}

/* --- 5.23 Floating actions ----------------------------------------------- */

/*
 * The contact rail sits on the leading edge, vertically centred, so it stays
 * clear of the consultation form's submit button and of any cookie or chat
 * widget that conventionally occupies the bottom-right corner.
 */
.fa-float {
	position: fixed;
	inset-block-end: var(--sp-5);
	inset-inline-start: var(--sp-5);
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.fa-float__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--c-white);
	border-radius: var(--r-full);
	box-shadow: var(--shadow-soft);
	transition: transform var(--dur-base) var(--ease-out),
	            opacity var(--dur-base) var(--ease-standard),
	            visibility var(--dur-base) var(--ease-standard);
}

.fa-float__btn:hover {
	transform: translateY(-3px);
}

.fa-float__btn--whatsapp {
	background-color: #25d366;
}

.fa-float__btn--phone {
	background-color: var(--c-brand, #6e4fd8);
}

/* Deep plum rather than a fourth bright colour: three saturated circles in a
   row starts to read as decoration instead of as controls. */
.fa-float__btn--email {
	background-color: #241738;
}

/* The pulsing halo, reproduced from the reference's animate-pulse keyframes. */
.fa-float__btn--whatsapp::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--r-full);
	animation: fa-pulse 3s linear infinite;
	pointer-events: none;
}

.fa-float__btn--top {
	background-image: var(--grad-btn);
	opacity: 0;
	visibility: hidden;
}

.fa-float__btn--top.is-visible {
	opacity: 1;
	visibility: visible;
}

/* --- 5.24 Swiper overrides ----------------------------------------------- */

.fa-swiper {
	position: relative;
	padding-block-end: var(--sp-10);
}

.fa-swiper .swiper-slide {
	height: auto;
}

.fa-swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background-color: var(--c-muted);
	opacity: 0.4;
	transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.fa-swiper .swiper-pagination-bullet-active {
	width: 26px;
	border-radius: var(--r-full);
	opacity: 1;
	background-image: var(--grad-btn);
}

.fa-swiper--on-dark .swiper-pagination-bullet {
	background-color: var(--c-white);
}

.fa-swiper__nav {
	display: none;
}

@media (min-width: 768px) {
	.fa-swiper__nav {
		position: absolute;
		inset-block-start: 50%;
		z-index: 5;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--c-ink);
		background-color: var(--c-white);
		border-radius: var(--r-full);
		box-shadow: var(--shadow-soft);
		transform: translateY(-50%);
		transition: background-color var(--dur-fast) var(--ease-standard),
		            color var(--dur-fast) var(--ease-standard);
	}

	.fa-swiper__nav:hover {
		color: var(--c-white);
		background-image: var(--grad-btn);
	}

	.fa-swiper__nav--prev { inset-inline-start: -6px; }
	.fa-swiper__nav--next { inset-inline-end: -6px; }
}

/* One caret glyph serves both directions; rotating it here keeps the icon set
   to a single path instead of shipping three near-identical chevrons. The
   rotation lives on the glyph, not the button, so the 44px hit area and the
   translateY(-50%) centring are untouched. */
.fa-swiper__nav .fa-icon {
	transition: transform var(--dur-base) var(--ease-standard);
}

.fa-swiper__nav--prev .fa-icon { transform: rotate(90deg); }
.fa-swiper__nav--next .fa-icon { transform: rotate(-90deg); }

.fa-swiper__nav.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- 5.25 404 ------------------------------------------------------------ */

.fa-404 {
	display: grid;
	place-items: center;
	min-height: 70vh;
	text-align: center;
}

.fa-404__code {
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: var(--fw-extrabold);
	line-height: 0.9;
	background-image: var(--grad-btn);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}

.fa-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-block-start: var(--sp-8);
}

/* --- 5.26 Search form ---------------------------------------------------- */

.fa-search {
	display: flex;
	gap: var(--sp-2);
	max-width: 520px;
}

.fa-search__input {
	flex: 1 1 auto;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
}

.fa-search__input:focus {
	border-color: var(--c-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 130, 191, 0.15);
}

/* ==========================================================================
   6. UTILITIES — deliberately minimal
   ========================================================================== */

.fa-center      { text-align: center; }
.fa-mt-6        { margin-block-start: var(--sp-6); }
.fa-mt-10       { margin-block-start: var(--sp-10); }
.fa-actions     { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.fa-actions--center { justify-content: center; }
.fa-measure     { max-width: 62ch; margin-inline: auto; }
.fa-scroll-x    { overflow-x: auto; }

/* ==========================================================================
   7. MOTION
   ========================================================================== */

@keyframes fa-bob {
	0%, 100% { transform: translateY(-8px); }
	50%      { transform: translateY(0); }
}

@keyframes fa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
	70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Scroll reveal. Elements start displaced and are released by an
   IntersectionObserver adding .is-revealed — no scroll listener, no layout
   thrash. If JS never runs, .fa-reveal is never initialised and content is
   visible by default (see the :not([data-fa-reveal-ready]) guard). */
[data-fa-reveal-ready] .fa-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
	transition-delay: var(--fa-reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-fa-reveal-ready] .fa-reveal--left  { transform: translateX(-28px); }
[data-fa-reveal-ready] .fa-reveal--right { transform: translateX(28px); }
[data-fa-reveal-ready] .fa-reveal--scale { transform: scale(0.94); }

[data-fa-reveal-ready] .fa-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* One switch turns off every non-essential animation on the site. Transitions
   are collapsed rather than removed so focus and state changes stay visible. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	[data-fa-reveal-ready] .fa-reveal {
		opacity: 1;
		transform: none;
	}

	.fa-hero__scroll-btn,
	.fa-float__btn--whatsapp::after {
		animation: none;
	}

	.fa-hero__video {
		display: none;
	}
}

/* ==========================================================================
   8. PRINT
   ========================================================================== */

@media print {
	.fa-header,
	.fa-drawer,
	.fa-float,
	.fa-hero__media,
	.fa-hero__scroll,
	.fa-footer__social {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}

	.fa-section {
		padding-block: var(--sp-6);
		break-inside: avoid;
	}
}

/* ==========================================================================
   Consultation popup
   ========================================================================== */

/*
 * Hidden by the [hidden] attribute until the script opens it. The explicit
 * rule is needed because .fa-popup sets display, and a class-based display
 * always outranks the user-agent [hidden] rule.
 */
.fa-popup[hidden] {
	display: none;
}

.fa-popup {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: var(--sp-4);
}

.fa-popup__veil {
	position: absolute;
	inset: 0;
	background: rgba(8, 5, 14, 0.72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/*
 * The gradient hairline from the reference. Painted with a masked border so
 * the card keeps a solid dark fill rather than the gradient bleeding through.
 */
.fa-popup__card {
	position: relative;
	width: min(460px, 100%);
	max-height: calc(100vh - var(--sp-6));
	overflow-y: auto;
	/* Every token here must exist: the spacing scale skips 7, and a single
	   undefined custom property invalidates the whole shorthand, which silently
	   drops the padding to zero. */
	padding: var(--sp-10) var(--sp-6) var(--sp-6);
	background: #0d0a16;
	border: 1px solid transparent;
	border-radius: 18px;
	background-image:
		linear-gradient(#0d0a16, #0d0a16),
		linear-gradient(140deg, #6e4fd8, #c86bd8 55%, #5b8def);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	animation: fa-popup-in 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes fa-popup-in {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.fa-popup__x {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: #fff;
	background: #e23b3b;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color var(--dur-base, 0.2s) ease;
}

.fa-popup__x:hover {
	background: #c92f2f;
}

.fa-popup__title {
	margin: 0 0 var(--sp-5);
	font-size: clamp(1.5rem, 4.4vw, 1.95rem);
	font-weight: 700;
	line-height: 1.18;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.fa-popup__title-a,
.fa-popup__title-b {
	display: block;
}

.fa-popup__title-a { color: #fff; }
.fa-popup__title-b { color: #5b5bef; }

.fa-popup__intro {
	margin: calc(var(--sp-5) * -1) 0 var(--sp-5);
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
	text-align: center;
}

/* The popup stacks: a two-column grid inside a 460px dialog is unreadable. */
.fa-popup__form .fa-form--split {
	display: block;
}

.fa-popup__form .fa-form__field {
	gap: 0;
	margin-block-end: var(--sp-3);
}

/* The error paragraphs are empty until validation fails. Left in flow they
   open a gap under every field and make the dialog a screen and a half tall. */
.fa-popup__form .fa-form__error:empty {
	display: none;
}

/*
 * Boxed inputs here rather than the underlines used elsewhere. Against a solid
 * dark card the underline style loses its edge and the fields stop reading as
 * fields at all.
 */
.fa-popup__form .fa-form__input,
.fa-popup__form .fa-form__textarea {
	width: 100%;
	padding: 14px 16px;
	color: #fff;
	background: #16121f;
	border: 1px solid #3a2f57;
	border-radius: 10px;
}

.fa-popup__form .fa-form__input::placeholder,
.fa-popup__form .fa-form__textarea::placeholder {
	color: rgba(255, 255, 255, 0.42);
}

.fa-popup__form .fa-form__input:focus,
.fa-popup__form .fa-form__textarea:focus {
	border-color: #6e4fd8;
	outline: 2px solid rgba(110, 79, 216, 0.45);
	outline-offset: 1px;
}

.fa-popup__form .fa-form__textarea {
	min-height: 104px;
	resize: vertical;
}

/* Placeholders carry the labels in this layout, but the labels stay in the
   accessibility tree for anyone using a screen reader. */
.fa-popup__form .fa-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The field is a flex column, so centring the button needs align-items, not
   text-align. */
.fa-popup__form .fa-form__field--full:last-child {
	align-items: center;
	margin-block: var(--sp-5) 0;
}

.fa-popup__form .fa-btn {
	min-width: 168px;
	justify-content: center;
}

.fa-popup__form .fa-form__status:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.fa-popup__card { animation: none; }
}

/* ==========================================================================
   Services showcase: portfolio deck
   ========================================================================== */

/*
 * A coverflow carousel of portfolio screens. The centre slide sits upright and
 * in full colour; the ones either side are rotated away and dimmed, so the eye
 * is told where to look without a caption saying so.
 */
.fa-deck {
	width: 100%;
	overflow: visible;   /* the angled neighbours must not be clipped away */
	padding-block: var(--sp-4);
}

.fa-deck .swiper-slide {
	width: 72%;
	transition: opacity var(--dur-base) var(--ease-standard);
	opacity: 0.45;
}

.fa-deck .swiper-slide-active {
	opacity: 1;
}

/* --- the monitor ---------------------------------------------------------- */

.fa-mon {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fa-mon__screen {
	width: 100%;
	padding: 8px 8px 22px;
	background: linear-gradient(180deg, #e9e9ef, #c9c9d4);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.fa-mon__screen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-radius: 3px;
	background: #0d0a16;
}

/* Neck and base are what make it read as a monitor rather than a card. */
.fa-mon__neck {
	width: 14%;
	height: 16px;
	background: linear-gradient(180deg, #d3d3dc, #b4b4c2);
}

.fa-mon__base {
	width: 34%;
	height: 8px;
	background: linear-gradient(180deg, #c6c6d2, #9d9dae);
	border-radius: 0 0 6px 6px;
}

@media (max-width: 767px) {
	.fa-deck .swiper-slide { width: 86%; }
	.fa-mon__screen { padding: 5px 5px 14px; border-radius: 7px; }
	.fa-mon__neck { height: 11px; }
	.fa-mon__base { height: 6px; }
}

/* The deck replaces the single still, so the fixed aspect box the old shot
   used would now crop the angled neighbours. */
.fa-svc__shot { aspect-ratio: auto; }

/* ==========================================================================
   Selected work — expanding rail
   ========================================================================== */

.fa-work__head { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-10); }

.fa-work__eyebrow {
	font-size: 0.74rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}

.fa-work__title { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--c-white); margin: 0; }
.fa-work__lead { max-width: 62ch; color: rgba(255, 255, 255, 0.72); margin: 0; }

/*
 * Panels share the row and animate flex-grow rather than width: width on a flex
 * item fights the basis and stutters, flex-grow interpolates cleanly.
 */
.fa-rail {
	display: flex;
	gap: 10px;
	height: clamp(340px, 54vh, 520px);
}

.fa-rail__panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: start;
	background: var(--c-plum, #2a1c3d);
	border: 0;
	border-radius: 16px;
	cursor: pointer;
	transition: flex-grow 0.65s var(--ease-out);
}

.fa-rail__panel[aria-expanded="true"] { flex-grow: 4.2; }

.fa-rail__panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.55) brightness(0.55);
	transform: scale(1.04);
	transition: filter 0.65s ease, transform 0.9s var(--ease-out);
}

.fa-rail__panel[aria-expanded="true"] img {
	filter: saturate(1) brightness(0.92);
	transform: none;
}

/*
 * The scrim has to hold white text over any artwork. Tuned for a dark
 * photograph it collapses on a light logo board, so the open panel gets a
 * deeper, taller gradient than the closed ones.
 */
.fa-rail__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(9, 6, 15, 0.92) 6%, rgba(9, 6, 15, 0.42) 44%, transparent 76%);
	transition: background 0.5s ease;
}

.fa-rail__panel[aria-expanded="true"] .fa-rail__veil {
	background: linear-gradient(to top,
		rgba(9, 6, 15, 0.97) 0%,
		rgba(9, 6, 15, 0.93) 26%,
		rgba(9, 6, 15, 0.66) 46%,
		rgba(9, 6, 15, 0.16) 70%,
		transparent 88%);
}

/* A closed panel is only a couple of centimetres wide; the service name set
   vertically keeps it meaningful instead of decorative. */
.fa-rail__spine {
	position: absolute;
	inset-block-end: 22px;
	inset-inline-start: 50%;
	transform: translateX(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-size: 0.7rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-white);
	white-space: nowrap;
	transition: opacity 0.35s ease;
}

.fa-rail__panel[aria-expanded="true"] .fa-rail__spine { opacity: 0; }

.fa-rail__body {
	position: absolute;
	inset-inline: 26px;
	inset-block-end: 24px;
	display: grid;
	gap: 9px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease 0.15s, transform 0.55s var(--ease-out) 0.15s;
}

.fa-rail__panel[aria-expanded="true"] .fa-rail__body { opacity: 1; transform: none; }

.fa-rail__kicker {
	font-size: 0.7rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-purple, #a57def);
}

.fa-rail__name {
	font-size: clamp(1.25rem, 2.4vw, 1.85rem);
	font-weight: var(--fw-semibold);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--c-white);
}

.fa-rail__text {
	font-size: 0.92rem;
	line-height: 1.65;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.78);
}

/* The one line that separates a case study from a caption, so it is given
   its own weight rather than being folded into the description. */
.fa-rail__outcome {
	font-size: 0.9rem;
	font-weight: var(--fw-semibold);
	color: #6ee7a8;
}

.fa-rail__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 3px; }

.fa-rail__chip {
	padding: 4px 10px;
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	color: var(--c-white);
	background: rgba(255, 255, 255, 0.13);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-full);
}

/* Phones: a horizontal rail of six is unusable, so it becomes a stack of
   headers that open downwards. */
@media (max-width: 900px) {
	.fa-rail { flex-direction: column; height: auto; }
	.fa-rail__panel { flex: none; height: 88px; }
	.fa-rail__panel[aria-expanded="true"] { height: 400px; }
	.fa-rail__spine {
		writing-mode: horizontal-tb;
		transform: none;
		inset-inline-start: 22px;
		inset-block-end: 32px;
	}
	.fa-rail__body { inset-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.fa-rail__panel,
	.fa-rail__panel img,
	.fa-rail__body,
	.fa-rail__veil { transition-duration: 0.01ms; }
}

/* ==========================================================================
   Hero — droplet field with a kinetic statement
   ========================================================================== */

.fa-hero--drops {
	background: radial-gradient(118% 88% at 18% 8%, #2A1C42 0%, #150E24 46%, #0B0812 100%);
}

.fa-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.fa-hero--drops .fa-hero__scrim {
	background: radial-gradient(78% 70% at 26% 50%, rgba(11, 8, 18, 0.24) 0%, rgba(11, 8, 18, 0.58) 66%, rgba(11, 8, 18, 0.88) 100%) !important;
}

.fa-hero--drops .fa-hero__box {
	max-width: min(900px, 100%);
	text-align: start;
}

.fa-hero--drops .fa-hero__title {
	font-size: clamp(2rem, 6.2vw, 4.7rem);
	font-weight: var(--fw-bold);
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--c-white);
}

/*
 * clip-path rather than overflow:hidden. overflow clips both axes, which
 * shaves the last letters off a long word; this hides only what sits below
 * the line, which is all the rise needs.
 */
.fa-hero__line {
	display: block;
	clip-path: inset(-0.4em -100vw 0 -0.08em);
}

.fa-hero__lift {
	display: inline-block;
	transform: translateY(112%);
	animation: fa-hero-rise 0.95s var(--ease-out) forwards;
}

.fa-hero__line:nth-child(1) .fa-hero__lift { animation-delay: 0.10s; }
.fa-hero__line:nth-child(2) .fa-hero__lift { animation-delay: 0.24s; }

@keyframes fa-hero-rise { to { transform: none; } }

/* --- the rotating word --------------------------------------------------- */

.fa-rot {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	height: 1.06em;
	overflow: hidden;
	transition: width 0.62s var(--ease-out);
	will-change: width;
}

/* Before the script runs the first word is real text, so the sentence reads
   even if JavaScript never arrives. */
.fa-rot__seed {
	background: linear-gradient(96deg, var(--c-purple, #a57def), #c9a7ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	white-space: nowrap;
}

.fa-rot.is-live { width: 0; }
.fa-rot.is-live .fa-rot__seed { display: none; }

.fa-rot__w {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	white-space: nowrap;
	background: linear-gradient(96deg, var(--c-purple, #a57def), #c9a7ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0;
	transform: translateY(84%);
	filter: blur(6px);
	transition: opacity 0.42s ease, transform 0.6s var(--ease-out), filter 0.42s ease;
}

.fa-rot__w.is-in  { opacity: 1; transform: none; filter: none; }
.fa-rot__w.is-out { opacity: 0; transform: translateY(-84%); filter: blur(6px); }

.fa-rot__rule {
	position: absolute;
	inset-block-end: 0.08em;
	inset-inline-start: 0;
	width: 100%;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--c-brand, #6e4fd8), #c9a7ff);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.6s var(--ease-out) 0.12s;
}

.fa-rot.is-ruled .fa-rot__rule { transform: scaleX(1); }

.fa-rot__dots { display: flex; gap: 6px; margin-block-start: var(--sp-6); }

.fa-rot__dot {
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.16);
	transition: background 0.4s ease;
}

.fa-rot__dot.is-on { background: linear-gradient(90deg, var(--c-brand, #6e4fd8), #c9a7ff); }

.fa-hero--drops .fa-hero__text {
	max-width: 46ch;
	margin-block-start: var(--sp-5);
	color: rgba(255, 255, 255, 0.74);
}

@media (prefers-reduced-motion: reduce) {
	.fa-hero__lift { transform: none; animation: none; }
	.fa-rot, .fa-rot__w, .fa-rot__rule { transition: none; }
}

/* ==========================================================================
   Services count — the number, over work on a tilted plane
   ========================================================================== */

.fa-svccount {
	position: relative;
	display: grid;
	align-content: center;
	min-height: 100vh;
	padding-block: clamp(70px, 10vh, 120px);
	overflow: hidden;
	background: radial-gradient(120% 100% at 6% 6%, #241A3E 0%, #150E24 44%, #0B0812 100%);
}

/*
 * The plane is rotated once; its columns only ever translate on Y. That is what
 * makes the drift read as diagonal while staying cheap — one composited
 * transform per column, and no layout work per frame.
 */
.fa-svccount__plane {
	position: absolute;
	inset: -40%;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 16px;
	transform: rotate(-30deg) scale(1.02);
	transform-origin: 55% 45%;
	pointer-events: none;
}

.fa-plane__col { display: grid; gap: 16px; align-content: start; will-change: transform; }

.fa-plane__col--a { animation: fa-drift-up 58s linear infinite; }
.fa-plane__col--b { animation: fa-drift-dn 72s linear infinite; }
.fa-plane__col--c { animation: fa-drift-up 64s linear infinite; }
.fa-plane__col--d { animation: fa-drift-dn 80s linear infinite; }
.fa-plane__col--e { animation: fa-drift-up 68s linear infinite; }

@keyframes fa-drift-up { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes fa-drift-dn { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.fa-svccount__plane img {
	width: 100%;
	display: block;
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	filter: saturate(0.9);
}

/* Heaviest where the type sits, lifting away so the work still reads. */
.fa-svccount__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(104deg, rgba(11, 8, 18, 0.98) 0%, rgba(11, 8, 18, 0.94) 30%, rgba(11, 8, 18, 0.56) 58%, rgba(11, 8, 18, 0.24) 100%),
		radial-gradient(48% 56% at 12% 44%, rgba(110, 79, 216, 0.32), transparent 72%);
}

.fa-svccount .fa-container { position: relative; z-index: 2; }
.fa-svccount__inner { max-width: 44ch; padding-block-start: 0.6em; }

/* The size lives on the wrapper so em means the same thing to both children —
   set on the child, the ghost resolves against the parent's 16px and renders
   a fraction of the size it should. */
.fa-svccount__count {
	position: relative;
	display: inline-block;
	line-height: 0.86;
	font-size: clamp(4rem, 12vw, 9.5rem);
}

.fa-svccount__ghost {
	position: absolute;
	inset-block-start: -0.2em;
	inset-inline-start: -0.13em;
	font-size: 1.5em;
	font-weight: var(--fw-bold);
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(165, 125, 239, 0.34);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

.fa-svccount__num {
	position: relative;
	font-size: 1em;
	font-weight: 800;
	letter-spacing: -0.05em;
	background: linear-gradient(96deg, var(--c-purple, #a57def), #c9a7ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

.fa-svccount__lead {
	margin-block-start: clamp(14px, 2vw, 26px);
	font-size: clamp(1.25rem, 2.9vw, 2.1rem);
	font-weight: var(--fw-medium);
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--c-white);
}

.fa-svccount__sub { margin-block-start: var(--sp-4); max-width: 40ch; color: rgba(255, 255, 255, 0.74); }
.fa-svccount__actions { margin-block-start: var(--sp-6); }

.fa-svccount__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: var(--sp-6); }

.fa-svccount__tag {
	padding: 6px 13px;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.76);
	background: rgba(237, 231, 245, 0.06);
	border: 1px solid rgba(237, 231, 245, 0.13);
	border-radius: var(--r-full);
}

@media (max-width: 900px) {
	.fa-svccount__plane { grid-template-columns: repeat(5, 1fr); transform: rotate(-26deg) scale(1.25); }
	.fa-svccount__scrim {
		background: linear-gradient(180deg, rgba(11, 8, 18, 0.92) 0%, rgba(11, 8, 18, 0.96) 52%, rgba(11, 8, 18, 0.88) 100%);
	}
	.fa-svccount__inner { max-width: none; }
	/* The offset ghost has nowhere to go at this width and only crowds the number. */
	.fa-svccount__ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fa-plane__col { animation: none !important; }
}