/* =========================================================
   SR WEBX — design system
   Navy foundation · electric blue for action · gold as a rare accent
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
	/* Colour */
	--ink:        #00102E;
	--navy:       #001A4B;
	--navy-lift:  #06265E;
	--navy-line:  rgba(255, 255, 255, .14);
	--blue:       #2F6BFF;
	--blue-dark:  #1D4FD8;
	--blue-soft:  #7EA6FF;
	--blue-wash:  #EDF3FF;
	--gold:       #FFBB16;
	--paper:      #FFFFFF;
	--mist:       #F5F8FD;
	--line:       #E1E8F5;
	--body:       #3D4C68;
	--body-mute:  #6A7997;
	--on-navy:    #C9D6EE;

	/* Type */
	--font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-eyebrow: .75rem;
	--fs-small:   .875rem;
	--fs-body:    1.0625rem;
	--fs-lead:    clamp(1.0625rem, .98rem + .38vw, 1.25rem);
	--fs-h3:      clamp(1.125rem, 1.04rem + .38vw, 1.3125rem);
	--fs-h2:      clamp(1.75rem, 1.42rem + 1.45vw, 2.6rem);
	--fs-h1:      clamp(2.15rem, 1.6rem + 2.4vw, 3.9rem);

	/* Space */
	--sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
	--sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
	--sp-9: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);

	/* Shape */
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--wrap: 1180px;
	--wrap-narrow: 820px;
	--gutter: clamp(1.25rem, .8rem + 1.8vw, 2.5rem);

	/* Elevation — restrained, never puffy */
	--sh-1: 0 1px 2px rgba(0, 16, 46, .06);
	--sh-2: 0 6px 20px -8px rgba(0, 16, 46, .16);
	--sh-3: 0 20px 48px -20px rgba(0, 16, 46, .28);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue); }
button { font: inherit; }
ul, ol { padding-left: 1.15rem; }

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	border-radius: 3px;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Type ---------- */
h1, h2, h3, h4, .h1, .h2, .h3 {
	font-family: var(--font-display);
	color: var(--ink);
	line-height: 1.12;
	letter-spacing: -.022em;
	margin: 0 0 var(--sp-4);
	font-weight: 800;
	text-wrap: balance;
}
.h1, h1 { font-size: var(--fs-h1); }
.h2, h2 { font-size: var(--fs-h2); }
.h3, h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.012em; }
h4 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-lead); color: var(--body); line-height: 1.6; }

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blue-dark);
	margin: 0 0 var(--sp-3);
	display: flex;
	align-items: center;
	gap: .6rem;
}
.eyebrow::before {
	content: "";
	width: 18px; height: 2px;
	background: var(--gold);
	flex: none;
}

.on-dark, .on-dark p, .on-dark li { color: var(--on-navy); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .h1, .on-dark .h2, .on-dark .h3 { color: #fff; }
.on-dark .eyebrow { color: var(--blue-soft); }
.on-dark a { color: #fff; }

/* ---------- 4. Layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section--tint { background: var(--mist); }
.section--dark { background: var(--navy); color: var(--on-navy); }
.section--ink { background: var(--ink); color: var(--on-navy); }

.section__head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- 5. Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9375rem;
	letter-spacing: -.005em;
	padding: .85rem 1.5rem;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--blue-dark); color: #fff; box-shadow: var(--sh-3); }

.btn--line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--line:hover { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-wash); }

.btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--navy-line); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .34); }

.btn--wide { width: 100%; padding-block: 1rem; }

.card__more {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--font-display); font-weight: 700; font-size: .875rem;
	color: var(--blue-dark);
	margin-top: auto;
	padding-top: var(--sp-3);
}
.card__more::after {
	content: "→";
	transition: transform .2s var(--ease);
}

/* ---------- 6. Header ---------- */
.masthead {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--line);
}
.masthead__inner {
	display: flex; align-items: center; gap: var(--sp-5);
	min-height: 68px;
}
.brand {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -.02em;
	color: var(--ink);
	text-decoration: none;
	display: inline-flex; align-items: baseline; gap: .34rem;
	margin-right: auto;
}
.brand span { color: var(--blue); }
.brand img { max-height: 36px; width: auto; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
	display: block; padding: .5rem .7rem;
	font-size: .9375rem; font-weight: 500;
	color: var(--body); text-decoration: none; border-radius: var(--r-sm);
}
.nav__link:hover { color: var(--ink); background: var(--mist); }
.nav__item.is-current > .nav__link { color: var(--blue-dark); font-weight: 600; }
.nav__toggle {
	display: none; background: none; border: 0; padding: 0;
}
.subnav {
	position: absolute; top: calc(100% + .35rem); left: 0;
	min-width: 15rem; list-style: none; margin: 0; padding: .4rem;
	background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
	box-shadow: var(--sh-3);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav__item--parent:hover > .subnav,
.nav__item--parent:focus-within > .subnav { opacity: 1; visibility: visible; transform: none; }
.subnav .nav__link { padding: .5rem .65rem; font-size: .9rem; }

.masthead__cta { display: none; }

.burger {
	margin-left: auto;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
	cursor: pointer;
}
.burger span, .burger span::before, .burger span::after {
	content: ""; display: block;
	width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
	transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

.drawer {
	display: none;
	border-top: 1px solid var(--line);
	background: #fff;
	padding: var(--sp-4) 0 var(--sp-6);
	max-height: calc(100dvh - 68px);
	overflow-y: auto;
}
.drawer.is-open { display: block; }
.drawer .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.drawer .nav__item { border-bottom: 1px solid var(--line); }
.drawer .nav__link { padding: .9rem .25rem; font-size: 1.0625rem; }
.drawer .nav__item--parent { display: grid; grid-template-columns: 1fr auto; }
.drawer .nav__toggle {
	display: grid; place-items: center; width: 44px;
	border: 0; background: none; cursor: pointer;
}
.drawer .nav__toggle span {
	width: 10px; height: 10px; border-right: 2px solid var(--body-mute); border-bottom: 2px solid var(--body-mute);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s var(--ease);
}
.drawer .nav__toggle[aria-expanded="true"] span { transform: rotate(225deg) translate(-2px, -2px); }
.drawer .subnav {
	position: static; grid-column: 1 / -1;
	display: none; opacity: 1; visibility: visible; transform: none;
	box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .6rem .75rem;
	border-left: 2px solid var(--line); margin: 0 0 .6rem;
}
.drawer .subnav.is-open { display: block; }
.drawer .subnav .nav__link { padding: .55rem .5rem; font-size: .9375rem; }
.drawer .btn { margin-top: var(--sp-5); }

@media (min-width: 62rem) {
	.nav { display: block; }
	.masthead__cta { display: inline-flex; }
	.burger { display: none; }
	.drawer { display: none !important; }
}

/* ---------- 7. Hero ---------- */
.hero {
	position: relative;
	background:
		radial-gradient(90rem 40rem at 78% -12%, rgba(47, 107, 255, .30), transparent 60%),
		var(--navy);
	color: var(--on-navy);
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3.5rem, 2rem + 5vw, 6rem);
	overflow: hidden;
}
.hero::after {
	content: "";
	position: absolute; inset: auto 0 0; height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold) 22%, transparent 55%);
	opacity: .55;
}
.hero__grid {
	display: grid; gap: var(--sp-7);
	align-items: center;
}
.hero__title { color: #fff; margin-bottom: var(--sp-5); }
.hero__title em {
	font-style: normal;
	background: linear-gradient(180deg, transparent 62%, rgba(255, 187, 22, .38) 62%);
}
.hero__text { font-size: var(--fs-lead); color: var(--on-navy); max-width: 34rem; margin-bottom: var(--sp-6); }
.hero__meta {
	display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
	margin-top: var(--sp-6); padding-top: var(--sp-5);
	border-top: 1px solid var(--navy-line);
	font-size: var(--fs-small); color: var(--on-navy);
	list-style: none; padding-left: 0;
}
.hero__meta li { display: flex; align-items: center; gap: .45rem; }
.hero__meta li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

@media (min-width: 62rem) {
	.hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); }
}

/* ---------- 8. The systems rail — signature element ---------- */
.rail {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 0;
	position: relative;
}
.rail__node {
	position: relative;
	display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: var(--sp-4);
	padding: .85rem 0;
}
.rail__node::before {
	content: "";
	position: absolute; left: 13px; top: 50%; bottom: -50%;
	width: 2px; background: var(--navy-line);
}
.rail__node:last-child::before { display: none; }
.rail__dot {
	width: 28px; height: 28px; border-radius: 50%;
	border: 2px solid var(--blue-soft);
	background: var(--navy);
	display: grid; place-items: center;
	position: relative; z-index: 1;
}
.rail__dot::after {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: var(--blue-soft);
	transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.rail__label {
	font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
	letter-spacing: -.01em;
}
.rail__node.is-live .rail__dot { border-color: var(--gold); }
.rail__node.is-live .rail__dot::after {
	background: var(--gold);
	box-shadow: 0 0 0 6px rgba(255, 187, 22, .18);
}

.railcard {
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
	border: 1px solid var(--navy-line);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	box-shadow: var(--sh-3);
}
.railcard__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
	padding-bottom: var(--sp-4); margin-bottom: var(--sp-2);
	border-bottom: 1px solid var(--navy-line);
}
.railcard__title { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1rem; margin: 0; }
.railcard__tag {
	font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--blue-soft); font-weight: 600;
}
.railcard__foot {
	margin-top: var(--sp-4); padding-top: var(--sp-4);
	border-top: 1px solid var(--navy-line);
	font-size: var(--fs-small); color: var(--on-navy);
}

/* Horizontal variant used inside the automation section */
@media (min-width: 48rem) {
	.rail--flow { grid-auto-flow: column; grid-auto-columns: 1fr; }
	.rail--flow .rail__node {
		grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--sp-3);
		padding: 0;
	}
	.rail--flow .rail__node::before {
		left: 50%; top: 13px; bottom: auto; right: -50%;
		width: auto; height: 2px;
	}
	.rail--flow .rail__label { font-size: .9375rem; }
}

/* ---------- 9. Stats ---------- */
.stats {
	display: grid; gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--paper); padding: var(--sp-5) var(--sp-4); text-align: center; }
.stat__num {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
	color: var(--ink); letter-spacing: -.03em; line-height: 1.1;
	font-variant-numeric: tabular-nums;
	display: block;
}
.stat__label {
	font-size: var(--fs-small); color: var(--body-mute); margin: .35rem 0 0;
	display: block;
}
.stat:nth-child(odd) .stat__num::after {
	content: ""; display: block; width: 20px; height: 2px; background: var(--gold);
	margin: .55rem auto 0;
}

/* ---------- 10. Cards ---------- */
.card {
	display: flex; flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.card__text { color: var(--body); font-size: .9688rem; margin-bottom: 0; }
.card--link { text-decoration: none; color: inherit; }
.card--link:hover {
	border-color: rgba(47, 107, 255, .45);
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
	color: inherit;
}
.card--link:hover .card__more::after { transform: translateX(3px); }
.card--dark {
	background: rgba(255, 255, 255, .05);
	border-color: var(--navy-line);
}
.card--dark .card__title { color: #fff; }
.card--dark .card__text { color: var(--on-navy); }

.card__index {
	font-family: var(--font-display); font-weight: 800;
	font-size: .75rem; letter-spacing: .1em;
	color: var(--blue); margin-bottom: var(--sp-4);
	display: block;
}

.linklist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem var(--sp-5); }
.linklist a { font-weight: 500; }

/* ---------- 11. Problem / automation section ---------- */
.problems { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.problems li {
	display: flex; gap: .75rem; align-items: flex-start;
	padding: .85rem 1rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--navy-line);
	border-radius: var(--r-sm);
	font-size: .9688rem;
}
.problems li::before {
	content: "";
	flex: none; width: 16px; height: 16px; margin-top: .25rem;
	border-radius: 3px;
	background: linear-gradient(135deg, transparent 44%, rgba(255, 255, 255, .45) 44%, rgba(255, 255, 255, .45) 56%, transparent 56%),
	            linear-gradient(45deg, transparent 44%, rgba(255, 255, 255, .45) 44%, rgba(255, 255, 255, .45) 56%, transparent 56%);
	border: 1px solid var(--navy-line);
}
@media (min-width: 48rem) { .problems { grid-template-columns: 1fr 1fr; } }

.flowpanel {
	margin-top: var(--sp-8);
	padding: var(--sp-7) var(--sp-6);
	border: 1px solid var(--navy-line);
	border-radius: var(--r-lg);
	background: linear-gradient(180deg, rgba(47, 107, 255, .14), rgba(47, 107, 255, .02));
}
.flowpanel__title { text-align: center; margin-bottom: var(--sp-6); color: #fff; }

/* ---------- 12. Ecosystem grid ---------- */
.ecosystem {
	display: grid; gap: 1px; background: var(--navy-line);
	border: 1px solid var(--navy-line); border-radius: var(--r-lg); overflow: hidden;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .ecosystem { grid-template-columns: repeat(4, 1fr); } }
.ecosystem__item {
	background: var(--navy); padding: var(--sp-5) var(--sp-4);
	text-align: center; text-decoration: none;
	transition: background-color .2s var(--ease);
	display: block;
}
.ecosystem__item:hover { background: var(--navy-lift); }
.ecosystem__name {
	display: block; font-family: var(--font-display); font-weight: 700;
	color: #fff; font-size: .9688rem; margin-bottom: .2rem;
}
.ecosystem__role { display: block; font-size: .8125rem; color: var(--on-navy); }

/* ---------- 13. Portfolio ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-6); padding: 0; list-style: none; }
.filter {
	border: 1px solid var(--line); background: var(--paper);
	padding: .5rem 1rem; border-radius: 100px;
	font-size: .875rem; font-weight: 500; color: var(--body); cursor: pointer;
	transition: all .18s var(--ease);
}
.filter:hover { border-color: var(--blue); color: var(--blue-dark); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.project {
	display: flex; flex-direction: column;
	border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
	background: var(--paper);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.project:hover { border-color: rgba(47, 107, 255, .45); box-shadow: var(--sh-2); transform: translateY(-2px); }
.project:hover .card__more::after { transform: translateX(3px); }
.project__media { display: block; aspect-ratio: 16 / 10; background: var(--blue-wash); overflow: hidden; }
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__placeholder {
	display: grid; place-items: center; height: 100%; padding: var(--sp-4);
	font-family: var(--font-display); font-weight: 700; color: var(--blue-dark);
	text-align: center; font-size: .9375rem;
}
.project__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.project__meta {
	font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--body-mute); font-weight: 600; margin-bottom: var(--sp-2);
}
.project__title { font-size: 1.125rem; margin-bottom: var(--sp-2); }
.project__title a { color: var(--ink); text-decoration: none; }
.project__title a:hover { color: var(--blue-dark); }
.project__text { font-size: .9375rem; margin-bottom: 0; }
.project.is-hidden { display: none; }

/* ---------- 14. Process ---------- */
.process { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: step; }
@media (min-width: 56rem) { .process { grid-template-columns: repeat(5, 1fr); } }
.process__step { position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--line); }
.process__step::before {
	counter-increment: step;
	content: "0" counter(step);
	position: absolute; top: -.85rem; left: 0;
	background: var(--paper); padding-right: .6rem;
	font-family: var(--font-display); font-weight: 800; font-size: .8125rem;
	color: var(--blue); letter-spacing: .06em;
}
.process__step:first-child { border-top-color: var(--gold); }
.process__title { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.process__text { font-size: .9375rem; margin: 0; }

/* ---------- 15. Testimonials ---------- */
.review {
	margin: 0; padding: var(--sp-6);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background: var(--paper);
	display: flex; flex-direction: column; gap: var(--sp-4);
}
.review__stars { color: var(--gold); letter-spacing: .12em; font-size: .9375rem; }
.review__quote { margin: 0; font-size: 1.0625rem; color: var(--ink); line-height: 1.6; }
.review__quote p:first-child::before { content: "“"; }
.review__quote p:last-child::after { content: "”"; }
.review__by { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); display: grid; gap: .15rem; }
.review__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.review__org, .review__service { font-size: var(--fs-small); color: var(--body-mute); }
.review__service { color: var(--blue-dark); font-weight: 500; }

/* ---------- 16. FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	padding: 1.15rem 0; cursor: pointer; list-style: none;
	font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 14px; height: 14px; position: relative; }
.faq__icon::before, .faq__icon::after {
	content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: var(--blue);
	transition: transform .2s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding-bottom: 1.25rem; max-width: 60ch; }
.faq__a p { margin: 0; }

/* ---------- 17. CTA ---------- */
.cta { background: var(--ink); color: var(--on-navy); }
.cta__inner { text-align: center; }
.cta__title { color: #fff; }
.cta__text { color: var(--on-navy); font-size: var(--fs-lead); max-width: 46ch; margin: 0 auto var(--sp-6); }
.cta .btnrow { justify-content: center; }
.cta .btn--line { color: #fff; border-color: var(--navy-line); }
.cta .btn--line:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); color: #fff; }

/* ---------- 18. Forms ---------- */
.lead { display: grid; gap: var(--sp-4); }
.lead__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .lead__grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; margin: 0; }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.req { color: var(--blue); }
.field input, .field select, .field textarea {
	width: 100%;
	font: inherit; font-size: .9688rem;
	color: var(--ink);
	padding: .75rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper);
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(47, 107, 255, .16);
	outline: none;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C2334D; }
.field__error { font-size: var(--fs-small); color: #C2334D; margin: 0; }
.lead__trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.lead__note { font-size: var(--fs-small); color: var(--body-mute); margin: 0; }
.lead__status { display: none; padding: .9rem 1rem; border-radius: var(--r-sm); font-size: .9375rem; }
.lead__status.is-visible { display: block; }
.lead__status.is-ok { background: #E8F6EE; color: #14603A; border: 1px solid #B7E2CB; }
.lead__status.is-bad { background: #FDEDEF; color: #8E1B30; border: 1px solid #F3C6CE; }
.lead.is-sent .lead__grid, .lead.is-sent .field, .lead.is-sent button, .lead.is-sent .lead__note { display: none; }

.contact__aside { display: grid; gap: var(--sp-5); align-content: start; }
.contact__block { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--mist); }
.contact__block h3 { font-size: 1rem; margin-bottom: var(--sp-2); }
.contact__block p { font-size: .9375rem; margin: 0; }
@media (min-width: 56rem) {
	.contact__grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--sp-8); align-items: start; }
}

/* ---------- 19. Breadcrumbs & pagination ---------- */
.crumbs { border-bottom: 1px solid var(--line); background: var(--mist); }
.crumbs__list {
	display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .7rem 0;
	font-size: .8125rem; color: var(--body-mute);
}
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: .4rem; color: var(--line); }
.crumbs a { color: var(--body-mute); text-decoration: none; }
.crumbs a:hover { color: var(--blue-dark); text-decoration: underline; }

.pagination { margin-top: var(--sp-7); display: flex; justify-content: center; }
.pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .6rem;
	border: 1px solid var(--line); border-radius: var(--r-sm); margin: 0 .15rem;
	text-decoration: none; color: var(--body); font-size: .9375rem;
}
.pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue-dark); }
.pagination .current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- 20. Editorial content ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .4rem; }
.prose img { border-radius: var(--r-md); margin-block: var(--sp-5); }
.prose blockquote {
	margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5);
	border-left: 3px solid var(--gold); background: var(--mist);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	font-size: var(--fs-lead); color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.prose th { background: var(--mist); font-family: var(--font-display); }
.prose code { background: var(--mist); padding: .12em .4em; border-radius: 4px; font-size: .9em; }

.checklist { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist li::before {
	content: ""; flex: none; margin-top: .45rem;
	width: 9px; height: 9px; border-radius: 2px;
	background: var(--blue);
}

.toc {
	background: var(--mist); border: 1px solid var(--line);
	border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-6);
}
.toc h2 { font-size: .8125rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--body-mute); margin: 0 0 var(--sp-3) !important; }
.toc ol { margin: 0; padding-left: 1.2rem; font-size: .9375rem; }
.toc li + li { margin-top: .35rem; }

/* ---------- 21. Blog ---------- */
.entry { display: flex; flex-direction: column; }
.entry__media { display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: var(--sp-4); background: var(--mist); }
.entry__media img { width: 100%; height: 100%; object-fit: cover; }
.entry__meta { font-size: .8125rem; color: var(--body-mute); margin-bottom: var(--sp-2); display: flex; gap: .4rem; flex-wrap: wrap; }
.entry__meta a { color: var(--blue-dark); text-decoration: none; font-weight: 500; }
.entry__title { font-size: 1.125rem; margin-bottom: var(--sp-2); }
.entry__title a { color: var(--ink); text-decoration: none; }
.entry__title a:hover { color: var(--blue-dark); }
.entry__text { font-size: .9375rem; margin: 0; }

.article__head { padding-block: var(--sp-7) var(--sp-5); }
.article__meta { font-size: var(--fs-small); color: var(--body-mute); display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.article__hero { border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-6); }

.blog__layout { display: grid; gap: var(--sp-8); }
@media (min-width: 62rem) { .blog__layout { grid-template-columns: minmax(0, 1fr) 17rem; } }
.widget { margin-bottom: var(--sp-6); font-size: .9375rem; }
.widget__title { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--body-mute); margin-bottom: var(--sp-3); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li + li { margin-top: .45rem; }

/* ---------- 22. Footer ---------- */
.footer { background: var(--ink); color: var(--on-navy); padding-block: var(--sp-8) var(--sp-6); }
.footer a { color: var(--on-navy); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 40rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: var(--sp-7); } }
.footer__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: #fff; display: inline-flex; gap: .34rem; text-decoration: none; }
.footer__brand span { color: var(--blue-soft); }
.footer__about { font-size: .9375rem; margin-top: var(--sp-4); max-width: 30ch; }
.footer__title {
	font-family: var(--font-display); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
	color: #fff; margin: 0 0 var(--sp-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.footer li + li { margin-top: .55rem; }
.footer__bottom {
	margin-top: var(--sp-7); padding-top: var(--sp-5);
	border-top: 1px solid var(--navy-line);
	display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
	font-size: var(--fs-small);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; }
.footer__legal li + li { margin-top: 0; }

/* ---------- 23. Utilities & motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }

.notice { padding: var(--sp-6); border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--mist); color: var(--body-mute); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.reveal { opacity: 1; transform: none; }
}

@media print {
	.masthead, .footer, .cta, .crumbs, .filters { display: none !important; }
	body { color: #000; }
}

/* =========================================================
   24. VISUAL LAYER — icons, depth, motion, hover
   Loaded after the base so it upgrades rather than duplicates.
   ========================================================= */

:root {
	--glow-blue: 0 0 0 1px rgba(47,107,255,.18), 0 18px 40px -18px rgba(47,107,255,.55);
	--glow-gold: 0 0 0 1px rgba(255,187,22,.22), 0 18px 40px -20px rgba(255,187,22,.45);
	--grad-blue: linear-gradient(135deg, #2F6BFF 0%, #6B4DFF 100%);
	--grad-gold: linear-gradient(135deg, #FFBB16 0%, #FF8A3D 100%);
	--grad-ink:  linear-gradient(160deg, #001A4B 0%, #00102E 60%, #041634 100%);
	--ring: 0 0 0 1px var(--line);
}

/* ---------- 24.1 Icons ---------- */
.ico { display: block; flex: none; }

.iconbox {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: 14px;
	background: var(--blue-wash);
	color: var(--blue-dark);
	position: relative;
	flex: none;
	transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease);
}
.iconbox::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: var(--grad-blue); opacity: 0;
	transition: opacity .3s var(--ease);
}
.iconbox .ico { position: relative; z-index: 1; }
.iconbox--sm { width: 40px; height: 40px; border-radius: 11px; }
.iconbox--lg { width: 64px; height: 64px; border-radius: 18px; }
.iconbox--gold { background: rgba(255,187,22,.14); color: #9A6B00; }
.iconbox--dark {
	background: rgba(255,255,255,.07);
	color: var(--blue-soft);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Icon reacts when its card is hovered */
.card:hover .iconbox,
.feature:hover .iconbox,
.project:hover .iconbox,
.stepcard:hover .iconbox {
	transform: translateY(-3px) rotate(-4deg) scale(1.06);
	color: #fff;
	box-shadow: var(--glow-blue);
}
.card:hover .iconbox::after,
.feature:hover .iconbox::after,
.stepcard:hover .iconbox::after { opacity: 1; }

.card--dark:hover .iconbox--dark,
.feature--dark:hover .iconbox--dark { color: #fff; }

/* Inline icon beside text */
.iconline { display: inline-flex; align-items: center; gap: .55rem; }
.iconline .ico { color: var(--blue); }

/* ---------- 24.2 Ambient background graphics ---------- */
.bg-mesh { position: relative; isolation: isolate; overflow: hidden; }
.bg-mesh::before {
	content: ""; position: absolute; z-index: -1; inset: -20% -10% auto -10%; height: 120%;
	background:
		radial-gradient(38rem 22rem at 12% 0%, rgba(47,107,255,.20), transparent 62%),
		radial-gradient(30rem 20rem at 88% 12%, rgba(107,77,255,.16), transparent 60%),
		radial-gradient(26rem 18rem at 60% 100%, rgba(255,187,22,.09), transparent 60%);
	pointer-events: none;
}

.bg-grid { position: relative; isolation: isolate; }
.bg-grid::before {
	content: ""; position: absolute; z-index: -1; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 78%);
	pointer-events: none;
}

.bg-dots::before {
	content: ""; position: absolute; z-index: -1; inset: 0;
	background-image: radial-gradient(rgba(47,107,255,.16) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(180deg, #000, transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
}

/* Big ghost watermark icon behind a hero */
.hero__ghost {
	position: absolute; right: -3rem; bottom: -5rem; z-index: 0;
	color: rgba(255,255,255,.045);
	pointer-events: none;
}
.hero__ghost .ico { width: 22rem; height: 22rem; stroke-width: .7; }
.hero > .wrap { position: relative; z-index: 1; }

/* Floating orbs */
.orb {
	position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; z-index: 0;
	animation: drift 18s var(--ease) infinite alternate;
}
.orb--1 { width: 22rem; height: 22rem; background: rgba(47,107,255,.30); top: -6rem; right: -4rem; }
.orb--2 { width: 16rem; height: 16rem; background: rgba(255,187,22,.14); bottom: -5rem; left: 12%; animation-delay: -7s; }
@keyframes drift {
	from { transform: translate3d(0,0,0) scale(1); }
	to   { transform: translate3d(-2.5rem, 2rem, 0) scale(1.12); }
}

/* ---------- 24.3 Hero upgrades ---------- */
.hero { background: var(--grad-ink); }
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(60rem 30rem at 80% -10%, rgba(47,107,255,.34), transparent 62%),
		radial-gradient(40rem 26rem at 8% 108%, rgba(107,77,255,.20), transparent 60%);
	pointer-events: none;
}
.hero::after { height: 2px; opacity: .8; }

.hero__title { position: relative; }
.hero__title em::after { display: none; }

/* Word-by-word entrance */
.hero__title .word {
	display: inline-block;
	opacity: 0; transform: translateY(28px) rotate(2deg);
	animation: wordUp .8s var(--ease) forwards;
}
.hero__title .word:nth-child(1) { animation-delay: .05s; }
.hero__title .word:nth-child(2) { animation-delay: .17s; }
.hero__title .word:nth-child(3) { animation-delay: .29s; }
@keyframes wordUp { to { opacity: 1; transform: none; } }

.hero .eyebrow, .hero__text, .hero .btnrow, .hero__meta {
	opacity: 0; animation: fadeUp .7s var(--ease) forwards;
}
.hero .eyebrow { animation-delay: .02s; }
.hero__text    { animation-delay: .40s; }
.hero .btnrow  { animation-delay: .50s; }
.hero__meta    { animation-delay: .60s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Chips under the hero */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-5); padding: 0; list-style: none; }
.chip {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .4rem .85rem; border-radius: 100px;
	font-size: .8125rem; font-weight: 600;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14);
	color: #fff;
	transition: background-color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.chip .ico { width: 15px; height: 15px; color: var(--gold); }
.chip:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.chip--light {
	background: var(--blue-wash); border-color: rgba(47,107,255,.18); color: var(--blue-dark);
}
.chip--light .ico { color: var(--blue); }

/* ---------- 24.4 Buttons: shine + magnetic feel ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 45%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }
.btn--primary { background: var(--grad-blue); }
.btn--primary:hover { background: var(--grad-blue); filter: saturate(1.15) brightness(1.06); box-shadow: 0 16px 34px -14px rgba(47,107,255,.75); }
.btn .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--gold { background: var(--grad-gold); color: #2A1B00; }
.btn--gold:hover { color: #2A1B00; box-shadow: 0 16px 34px -14px rgba(255,187,22,.7); }

/* ---------- 24.5 Cards ---------- */
.card, .project, .feature, .stepcard, .review {
	position: relative; overflow: hidden;
}
.card::before, .feature::before, .stepcard::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%), rgba(47,107,255,.10), transparent 60%);
	opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.card:hover::before, .feature:hover::before, .stepcard:hover::before { opacity: 1; }

.card--link:hover, .feature:hover, .stepcard:hover {
	transform: translateY(-4px);
	border-color: rgba(47,107,255,.4);
	box-shadow: 0 22px 44px -26px rgba(0,16,46,.42);
}

/* Gradient top edge that draws in on hover */
.card--link::after, .feature::after {
	content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%;
	background: var(--grad-blue);
	transform: scaleX(0); transform-origin: left;
	transition: transform .45s var(--ease);
}
.card--link:hover::after, .feature:hover::after { transform: scaleX(1); }

/* Feature card — the icon grid used across service pages */
.feature {
	display: flex; flex-direction: column; gap: var(--sp-4);
	padding: var(--sp-6);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.feature__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); margin: 0; letter-spacing: -.012em; }
.feature__text { font-size: .9375rem; margin: 0; color: var(--body); }
.feature--dark {
	background: rgba(255,255,255,.045);
	border-color: var(--navy-line);
}
.feature--dark .feature__title { color: #fff; }
.feature--dark .feature__text { color: var(--on-navy); }
.feature--dark:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.28); }

/* Compact feature row (checklist replacement) */
.featurelist { display: grid; gap: var(--sp-4); padding: 0; list-style: none; }
@media (min-width: 40rem) { .featurelist { grid-template-columns: 1fr 1fr; } }
.featurelist li {
	display: flex; gap: .85rem; align-items: flex-start;
	padding: .9rem 1rem;
	border: 1px solid var(--line); border-radius: var(--r-md);
	background: var(--paper);
	font-size: .9375rem;
	transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.featurelist li:hover { border-color: rgba(47,107,255,.4); transform: translateX(3px); background: var(--blue-wash); }
.featurelist .ico { color: var(--blue); margin-top: .1rem; width: 20px; height: 20px; }
.on-dark .featurelist li {
	background: rgba(255,255,255,.04); border-color: var(--navy-line); color: var(--on-navy);
}
.on-dark .featurelist li:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); }
.on-dark .featurelist .ico { color: var(--blue-soft); }

/* Checklist gets a real tick */
.checklist li::before {
	width: 20px; height: 20px; border-radius: 6px; margin-top: .1rem;
	background: var(--blue-wash);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6BFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.on-dark .checklist li::before {
	background-color: rgba(126,166,255,.16);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237EA6FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ---------- 24.6 Stats: counters + shimmer ---------- */
.stat { position: relative; overflow: hidden; transition: background-color .3s var(--ease); }
.stat:hover { background: var(--blue-wash); }
.stat__num { background: linear-gradient(135deg, var(--ink) 30%, var(--blue-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__ico { color: var(--blue); margin: 0 auto .6rem; opacity: .55; }
.stat:hover .stat__ico { opacity: 1; }

/* ---------- 24.7 Process: connected timeline ---------- */
.process { position: relative; }
.process__step { border-top: 0; padding-top: 0; }
.stepcard {
	display: flex; flex-direction: column; gap: var(--sp-3);
	height: 100%;
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.stepcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stepcard__num {
	font-family: var(--font-display); font-weight: 800; font-size: .75rem; letter-spacing: .12em;
	color: var(--blue); padding: .25rem .5rem; border-radius: 6px; background: var(--blue-wash);
}
.process__step::before { display: none; }
.process__step:first-child .stepcard { border-color: rgba(255,187,22,.5); }
.process__step:first-child .stepcard__num { color: #8A6200; background: rgba(255,187,22,.16); }

@media (min-width: 56rem) {
	.process::before {
		content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
		background: linear-gradient(90deg, var(--gold), var(--blue) 22%, var(--line));
		z-index: 0; opacity: .35;
	}
	.process__step { position: relative; z-index: 1; }
}

/* ---------- 24.8 Ecosystem tiles ---------- */
.ecosystem__item { position: relative; overflow: hidden; padding-block: var(--sp-6); }
.ecosystem__item::before {
	content: ""; position: absolute; inset: 0;
	background: var(--grad-blue); opacity: 0;
	transition: opacity .3s var(--ease);
}
.ecosystem__item:hover::before { opacity: .16; }
.ecosystem__item > * { position: relative; z-index: 1; }
.ecosystem__ico {
	color: var(--blue-soft); margin: 0 auto var(--sp-3);
	transition: transform .35s var(--ease), color .3s var(--ease);
}
.ecosystem__item:hover .ecosystem__ico { transform: translateY(-4px) scale(1.12); color: var(--gold); }

/* ---------- 24.9 Portfolio ---------- */
.project__media { position: relative; }
.project__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,16,46,0) 40%, rgba(0,16,46,.55));
	opacity: 0; transition: opacity .35s var(--ease);
}
.project:hover .project__media::after { opacity: 1; }
.project__media img { transition: transform .6s var(--ease); }
.project:hover .project__media img { transform: scale(1.06); }
.project__placeholder {
	background:
		radial-gradient(20rem 12rem at 30% 0%, rgba(47,107,255,.18), transparent 65%),
		linear-gradient(150deg, #EDF3FF, #DCE8FF);
	gap: .75rem; flex-direction: column;
}
.project__placeholder .ico { width: 34px; height: 34px; color: var(--blue); opacity: .7; }
.project__tag {
	position: absolute; top: .8rem; left: .8rem; z-index: 2;
	padding: .3rem .7rem; border-radius: 100px;
	background: rgba(0,16,46,.72); backdrop-filter: blur(6px);
	color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* Filters */
.filter { position: relative; overflow: hidden; }
.filter::before {
	content: ""; position: absolute; inset: 0; background: var(--grad-blue);
	transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); z-index: -1;
}
.filter { z-index: 0; }
.filter:hover::before { transform: scaleX(1); }
.filter:hover { color: #fff; border-color: transparent; }

/* ---------- 24.10 Blog cards ---------- */
.entry__media { position: relative; }
.entry__media img { transition: transform .6s var(--ease); }
.entry:hover .entry__media img { transform: scale(1.05); }
.entry__title a { background-image: linear-gradient(var(--blue), var(--blue)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); }
.entry:hover .entry__title a { background-size: 100% 2px; }
.entry__placeholder {
	display: grid; place-items: center; height: 100%;
	background: linear-gradient(150deg, #EDF3FF, #E1EAFF);
	color: var(--blue); 
}
.entry__placeholder .ico { width: 40px; height: 40px; opacity: .55; }

.pill {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .25rem .65rem; border-radius: 100px;
	background: var(--blue-wash); color: var(--blue-dark);
	font-size: .75rem; font-weight: 600; text-decoration: none;
}
.pill:hover { background: var(--blue); color: #fff; }

/* Reading progress bar */
.progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 100%;
	transform: scaleX(0); transform-origin: left; z-index: 90;
	background: var(--grad-gold);
}

/* ---------- 24.11 FAQ ---------- */
.faq__item { border-radius: var(--r-md); transition: background-color .25s var(--ease), padding .25s var(--ease); }
.faq__item:hover { background: var(--mist); }
.faq__q { padding-inline: .9rem; }
.faq__a { padding-inline: .9rem; }
.faq__item[open] { background: var(--mist); }
.faq__item[open] .faq__q { color: var(--blue-dark); }

/* ---------- 24.12 Testimonials ---------- */
.review::before {
	content: ""; position: absolute; top: -1.2rem; right: .6rem;
	width: 6rem; height: 6rem; opacity: .06;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23001A4B'%3E%3Cpath d='M9 6C6 7.5 4.5 10 4.5 13H8v5H3v-5c0-4.5 2-7.6 6-9.4L9 6ZM20 6c-3 1.5-4.5 4-4.5 7H19v5h-5v-5c0-4.5 2-7.6 6-9.4L20 6Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.review { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.review:hover { transform: translateY(-4px); border-color: rgba(255,187,22,.45); box-shadow: 0 22px 44px -26px rgba(0,16,46,.35); }

/* ---------- 24.13 Section headings ---------- */
.section__head .h2 { position: relative; display: inline-block; }
.eyebrow::before { transition: width .4s var(--ease); }
.section:hover .eyebrow::before { width: 30px; }

/* Split band: dark panel with content */
.band {
	border-radius: var(--r-lg);
	padding: var(--sp-7) var(--sp-6);
	background: var(--grad-ink);
	color: var(--on-navy);
	position: relative; overflow: hidden;
}
.band h2, .band h3 { color: #fff; }

/* Marquee of capability words */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: .9rem; background: var(--mist); }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
	color: var(--body-mute); white-space: nowrap;
}
.marquee__item .ico { width: 18px; height: 18px; color: var(--blue); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 24.14 Scroll reveal, staggered ---------- */
.reveal { transform: translateY(22px); }
.reveal.is-in { transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-stagger] > * { opacity: 0; transform: translateY(22px); }
[data-stagger].is-in > * { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .35s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .42s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .49s; }

/* ---------- 24.15 Nav polish ---------- */
.nav__link { position: relative; }
.nav__link::after {
	content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .28rem; height: 2px;
	background: var(--grad-blue); transform: scaleX(0); transform-origin: right;
	transition: transform .3s var(--ease); border-radius: 2px;
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.subnav .nav__link::after { display: none; }
.subnav .nav__link { display: flex; align-items: center; gap: .6rem; }
.subnav .ico { width: 17px; height: 17px; color: var(--blue); opacity: .8; }
.masthead.is-stuck { box-shadow: 0 10px 30px -18px rgba(0,16,46,.35); }

/* ---------- 24.16 Footer polish ---------- */
.footer { position: relative; overflow: hidden; }
.footer::before {
	content: ""; position: absolute; top: -10rem; right: -6rem; width: 26rem; height: 26rem;
	background: radial-gradient(circle, rgba(47,107,255,.20), transparent 68%);
	pointer-events: none;
}
.footer a { position: relative; display: inline-block; transition: transform .2s var(--ease), color .2s var(--ease); }
.footer li a:hover { transform: translateX(4px); text-decoration: none; color: #fff; }

/* ---------- 24.17 CTA ---------- */
.cta { position: relative; overflow: hidden; }
.cta::before {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(38rem 20rem at 50% -20%, rgba(47,107,255,.28), transparent 65%),
		radial-gradient(24rem 14rem at 85% 120%, rgba(255,187,22,.14), transparent 65%);
	pointer-events: none;
}
.cta > .wrap { position: relative; z-index: 1; }

/* ---------- 24.18 Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
	.hero__title .word, .hero .eyebrow, .hero__text, .hero .btnrow, .hero__meta { opacity: 1; animation: none; transform: none; }
	.marquee__track, .orb { animation: none; }
	[data-stagger] > * { opacity: 1; transform: none; }
	.progress { display: none; }
}

/* ---------- 25. Render fixes ---------- */

/* The problem list now carries a real icon — drop the old pseudo marker */
.problems li::before { content: none; display: none; }
.problems li { align-items: center; }
.problems .ico { color: var(--gold); flex: none; opacity: .85; }

/* Feature grids top out at three columns so titles stop breaking mid-phrase */
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.feature__title { text-wrap: pretty; }

/* Placeholder text sits inside a link — stop it inheriting link styling */
.project__placeholder,
.project__media:hover .project__placeholder { text-decoration: none; color: var(--blue-dark); }
.project__placeholder { opacity: .85; font-size: .875rem; line-height: 1.4; max-width: 16rem; }

/* Long non-numeric stat values need a smaller size than a big figure does */
.stat__num { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); text-wrap: balance; }
.stat__num--text { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); letter-spacing: -.01em; }

/* Cleaner highlight on the hero accent word */
.hero__title em {
	position: relative;
	background: none;
}
.hero__title em::after {
	content: ""; display: block; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em;
	background: var(--grad-gold); border-radius: 2px; opacity: .9;
	transform: scaleX(0); transform-origin: left;
	animation: underline .7s var(--ease) .75s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero__title em::after { transform: none; animation: none; } }

/* Marquee spacing */
.marquee__item { letter-spacing: -.01em; }