/*
 * sections.css — homepage/page section blocks: hero, trust strip,
 * services grid wrapper, value props, process, tech marquee,
 * case studies, testimonials, industries, pricing/engagement,
 * faq, blog teaser, cta band, stats.
 */
/* ---------------------------------------------------------------
 * Hero
 * A dark band carrying three layers: the canvas gradient field, a
 * masked grid, and a vignette that buys back text contrast wherever
 * the field happens to drift bright.
 * ------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--navy);
	padding-top: calc(var(--header-h) + var(--space-s));
	padding-bottom: var(--space-l);
	/* Deliberately under a full screen: the trust strip should be
	   visible at the bottom of the viewport, so the page reads as
	   having more below rather than ending at the fold. */
	min-height: min(84vh, 800px);
	display: flex;
	align-items: center;
	isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 38%, transparent 88%);
	mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 38%, transparent 88%);
}
.hero__vignette {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(6,13,24,.55) 0%, transparent 22%, transparent 62%, rgba(6,13,24,.75) 100%),
		linear-gradient(90deg, rgba(6,13,24,.6) 0%, transparent 42%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.06fr 0.94fr;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
}

.hero .eyebrow { color: var(--brand-on-dark); }
.hero__title {
	color: #fff;
	margin-bottom: var(--space-m);
	/* Inherits --text-3xl (max 3.5rem) from the h1 rule rather than
	   carrying its own clamp. The bespoke clamp here was capped below
	   --text-2xl, so every h2 on the page outranked the headline; the
	   scale itself was retuned instead so H1 > H2 > H3 holds. */
	line-height: 1.06;
	letter-spacing: -0.035em;
	/* 26ch lets the content column be the real constraint. At 800 weight
	   the average glyph runs nearer 0.62em than the 0.5em a ch implies,
	   so a narrower cap silently forced a fourth line. */
	max-width: 26ch;
}
.hero__subhead {
	font-size: var(--text-m);
	color: rgba(255,255,255,.72);
	max-width: 62ch;
	margin-bottom: var(--space-m);
	line-height: 1.6;
}
.hero__actions {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	flex-wrap: wrap;
	margin-bottom: var(--space-m);
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-m);
	padding-top: var(--space-s);
	border-top: 1px solid rgba(255,255,255,.1);
}
.hero__proof-item {
	display: flex;
	align-items: center;
	gap: .55em;
	color: rgba(255,255,255,.74);
	font-size: var(--text-s);
}
.hero__proof-item .icon { width: 17px; height: 17px; color: var(--brand-on-dark); flex-shrink: 0; }

/* ---------------------------------------------------------------
 * Hero perspective stack
 * .scene__stage / .scene__layer come from animations.css; everything
 * below is just the panels that sit on those layers.
 * ------------------------------------------------------------- */
.hero__visual { position: relative; height: 460px; }
.hero__visual .scene__layer {
	left: 50%;
	top: 50%;
}

.hero-panel-wrap--blob  { transform: translate(-50%,-50%) translateZ(-280px); }
.hero-panel-wrap--back  { transform: translate(-50%,-50%) translate3d(-118px,-152px,-90px); }
.hero-panel-wrap--main  { transform: translate(-50%,-50%) translate3d(6px,14px,40px); }
.hero-panel-wrap--front { transform: translate(-50%,-50%) translate3d(142px,146px,150px); }

.hero-blob {
	width: 460px;
	height: 460px;
	background: linear-gradient(140deg, rgba(var(--brand-rgb),.42), rgba(126,196,240,.1));
	filter: blur(6px);
}

.hero-panel {
	width: 320px;
	padding: var(--space-s);
	border-radius: var(--radius-l);
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 34px 70px -28px rgba(0,0,0,.85);
	color: #fff;
}
.hero-panel--sm   { width: 246px; }
.hero-panel--stat { width: 210px; }

.hero-panel__row { display: flex; align-items: center; gap: .6em; margin-bottom: .55em; }
.hero-panel__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #3FCF8E;
	box-shadow: 0 0 0 3px rgba(63,207,142,.18);
	flex-shrink: 0;
}
.hero-panel__title { font-family: var(--font-display); font-size: var(--text-s); font-weight: 700; letter-spacing: -.01em; }
.hero-panel__meta {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .04em;
	color: rgba(255,255,255,.52);
}
.hero-panel__meta--sp { margin-bottom: var(--space-s); }
.hero-panel__badge {
	font-family: var(--font-mono);
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .1em;
	padding: .25em .55em;
	border-radius: 4px;
}
.hero-panel__badge--pass { background: rgba(63,207,142,.16); color: #6FE3AD; }

.hero-panel__bars { display: grid; gap: 7px; margin-bottom: var(--space-s); }
.hero-panel__bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,.1); overflow: hidden; }
.hero-panel__bar i {
	display: block;
	height: 100%;
	width: var(--w, 50%);
	border-radius: 100px;
	background: linear-gradient(90deg, var(--brand), #8FD0F5);
	animation: barFill 1.5s var(--ease-out) backwards;
}
@keyframes barFill { from { width: 0; } }

.hero-panel__foot { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-panel__chip {
	font-family: var(--font-mono);
	font-size: .625rem;
	letter-spacing: .04em;
	padding: .3em .6em;
	border-radius: 100px;
	background: rgba(255,255,255,.08);
	color: rgba(255,255,255,.7);
}

/* ---------------------------------------------------------------
 * Editor panel — the focal card in the hero stack.
 * Decorative only: the markup is inside an aria-hidden container, so
 * the syntax spans carry no meaning for assistive tech.
 * ------------------------------------------------------------- */
.hero-panel--code { width: 340px; }

.hero-panel__chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-bottom: var(--space-xs);
	margin-bottom: var(--space-xs);
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.hero-panel__tl {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	flex-shrink: 0;
}
.hero-panel__tl:first-child { background: rgba(255,107,95,.65); }
.hero-panel__tl:nth-child(2) { background: rgba(255,190,86,.65); }
.hero-panel__tl:nth-child(3) { background: rgba(90,206,130,.6); }
.hero-panel__file {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: .625rem;
	letter-spacing: .04em;
	color: rgba(255,255,255,.5);
}

/* This is a <pre>, so the element rule in base.css was painting it
   --surface-alt (#F6F9FC) with a light border and 20/31px of padding —
   white syntax tokens on a near-white box inside the dark glass panel,
   measuring as low as 1.03:1. The panel supplies its own chrome, so the
   base treatment is reset here rather than overridden piecemeal. */
.hero-panel__code {
	margin: 0 0 var(--space-s);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: .6875rem;
	line-height: 1.85;
	white-space: pre;
	overflow: hidden;
	color: rgba(255,255,255,.85);
}
.hero-panel__code .ln { display: block; min-height: 1.85em; }
/* Comments and punctuation were at .34 and .45 alpha — 3.08:1 and
   4.43:1 on the hero navy. Lifted clear of AA; the code panel still
   reads as dimmed against the .85 body of the snippet. */
.hero-panel__code .c { color: rgba(255,255,255,.55); }
.hero-panel__code .k { color: #C79BF0; }
.hero-panel__code .f { color: #7FB8FF; }
.hero-panel__code .t { color: #6FE3AD; }
.hero-panel__code .a { color: #F2B872; }
.hero-panel__code .p { color: rgba(255,255,255,.58); }

.hero-panel__stat {
	font-family: var(--font-display);
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	margin: .12em 0 .3em;
	font-variant-numeric: tabular-nums;
}
.hero-panel__stat small { font-size: .42em; font-weight: 600; color: rgba(255,255,255,.5); }
.hero-panel__spark { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.hero-panel__spark i {
	flex: 1;
	height: var(--h, 50%);
	border-radius: 2px 2px 0 0;
	background: linear-gradient(180deg, rgba(var(--brand-rgb),.9), rgba(var(--brand-rgb),.2));
	transform-origin: bottom;
	animation: sparkGrow 1.1s var(--ease-out) backwards;
}
.hero-panel__spark i:nth-child(2) { animation-delay: .07s; }
.hero-panel__spark i:nth-child(3) { animation-delay: .14s; }
.hero-panel__spark i:nth-child(4) { animation-delay: .21s; }
.hero-panel__spark i:nth-child(5) { animation-delay: .28s; }
.hero-panel__spark i:nth-child(6) { animation-delay: .35s; }
@keyframes sparkGrow { from { transform: scaleY(.04); opacity: 0; } }

/* Below the two-column breakpoint the stack becomes decoration behind
   nothing useful, so it is dropped entirely rather than squashed. */
@media (max-width: 1080px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { display: none; }
	.hero__title { max-width: 18ch; }
}

/* ---------------------------------------------------------------
 * Stats strip (only renders when the owner has filled real values)
 * ------------------------------------------------------------- */
.stats-strip { padding-block: var(--space-l); }
.stats-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-m); text-align: center; }
@media (max-width: 720px) { .stats-strip__grid { grid-template-columns: repeat(2, 1fr); } }
.stat-item__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--brand-text); line-height: 1; }
.stat-item__label { font-size: var(--text-s); color: var(--muted); margin-top: .5em; }

/* ---------------------------------------------------------------
 * Value-prop card — icon tile, heading, body.
 *
 * Still used by About, Process, Industries, Technologies, Careers and
 * the service pages. The homepage moved to the .spec-row treatment,
 * and these rules were dropped along with it by mistake — which left
 * the SVGs unconstrained and rendering over 100px tall inside cards
 * with no padding. The icon sizing here matches .spec-row__icon and
 * .matrix__icon so the three read as one family.
 * ------------------------------------------------------------- */
.value-prop { padding: var(--space-m); }
.value-prop__index {
	font-family: var(--font-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	color: var(--muted-soft);
	margin-bottom: var(--space-s);
}
.value-prop__icon {
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	border-radius: var(--radius-m);
	background: var(--brand-light);
	color: var(--brand-text);
	margin-bottom: var(--space-s);
	flex-shrink: 0;
}
/* Without an explicit size the sprite scales to its viewBox and takes
   over the card, so this is load-bearing rather than cosmetic. */
.value-prop__icon .icon { width: 20px; height: 20px; }
.value-prop__title {
	font-size: var(--text-m);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
	margin-bottom: .4em;
}
.value-prop p { font-size: var(--text-s); color: var(--muted); line-height: 1.6; }

/* ---------------------------------------------------------------
 * Process timeline
 * ------------------------------------------------------------- */
.process-timeline { position: relative; max-width: 880px; margin-inline: auto; }
.process-timeline__line {
	position: absolute;
	left: 27px; top: 8px; bottom: 8px;
	width: 2px;
	background: var(--border);
}
.process-timeline__line-fill {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 0%;
	background: var(--brand);
	transition: height 900ms var(--ease-out);
}
.process-step { position: relative; display: flex; gap: var(--space-m); padding-bottom: var(--space-xl); }
.process-step:last-child { padding-bottom: 0; }
.process-step__marker {
	position: relative; z-index: 1;
	flex-shrink: 0;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--surface);
	border: 2px solid var(--border);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 800; color: var(--muted-soft);
	transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.process-step.is-active .process-step__marker { border-color: var(--brand); color: var(--brand-text); background: var(--brand-light); }
.process-step__body { padding-top: .5em; }
.process-step__title { font-size: var(--text-l); margin-bottom: .4em; }
.process-step__meta { font-size: var(--text-xs); color: var(--brand-text); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5em; }

/* ---------------------------------------------------------------
 * Case studies (Work)
 * ------------------------------------------------------------- */
.work-filter { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin-bottom: var(--space-l); }
.work-filter__btn { padding: .6em 1.3em; border-radius: var(--radius-full); border: 1.5px solid var(--border); font-size: var(--text-s); font-weight: 600; color: var(--muted); transition: all var(--dur-fast) var(--ease); }
.work-filter__btn:hover { border-color: var(--brand); color: var(--brand-text); }
.work-filter__btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.work-grid[data-filtering] > * { transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.work-grid > .is-hidden { display: none; }

/* ---------------------------------------------------------------
 * Testimonials slider
 * ------------------------------------------------------------- */
.testimonial-slider { position: relative; }
.testimonial-slider__track {
	display: flex;
	gap: var(--space-m);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-s);
	scrollbar-width: none;
}
.testimonial-slider__track::-webkit-scrollbar { display: none; }
.testimonial-slider__track .testimonial-card { min-width: min(420px, 86vw); scroll-snap-align: start; }
.testimonial-slider__nav { display: flex; justify-content: center; gap: var(--space-2xs); margin-top: var(--space-m); }
.testimonial-slider__nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); }
.testimonial-slider__nav-btn:hover { border-color: var(--brand); color: var(--brand-text); }
.testimonial-slider__nav-btn .icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------
 * Engagement models / pricing cards
 * ------------------------------------------------------------- */
.pricing-card {
	padding: var(--space-l);
	display: flex;
	flex-direction: column;
	position: relative;
}
.pricing-card--featured { border-color: var(--brand); box-shadow: var(--shadow-m); transform: scale(1.02); }
.pricing-card__badge { position: absolute; top: -14px; left: var(--space-l); }
.pricing-card__title { font-size: var(--text-l); }
.pricing-card__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; margin-block: .3em; }
.pricing-card__price small { font-size: var(--text-s); font-weight: 500; color: var(--muted); }
.pricing-card__desc { font-size: var(--text-s); margin-bottom: var(--space-m); }
.pricing-card__features { display: flex; flex-direction: column; gap: .7em; margin-bottom: var(--space-m); flex-grow: 1; }
.pricing-card__features li { display: flex; align-items: flex-start; gap: .6em; font-size: var(--text-s); }
.pricing-card__features .icon { width: 18px; height: 18px; color: var(--brand-text); flex-shrink: 0; margin-top: .1em; }

/* ---------------------------------------------------------------
 * FAQ section
 * ------------------------------------------------------------- */
.faq-list { max-width: var(--container-narrow); margin-inline: auto; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin-bottom: var(--space-l); }

/* ---------------------------------------------------------------
 * Blog teaser
 * ------------------------------------------------------------- */
.blog-teaser__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-l); flex-wrap: wrap; gap: var(--space-s); }

/* ---------------------------------------------------------------
 * CTA band
 * ------------------------------------------------------------- */
.cta-band {
	position: relative;
	overflow: hidden;
	background: var(--navy);
	border-radius: var(--radius-l);
	padding: var(--space-2xl) var(--space-l);
	text-align: center;
	margin-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.cta-band__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(50% 70% at 50% 0%, rgba(var(--brand-rgb), .4), transparent 70%);
	pointer-events: none;
}
.cta-band__content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta-band h2 { color: #fff; margin-bottom: var(--space-xs); }
.cta-band p { color: rgba(255,255,255,.72); margin-bottom: var(--space-m); font-size: var(--text-l); }
.cta-band__actions { display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------
 * Trust strip — the hairline band directly under the hero.
 * Set in mono and divided by rules so it reads as a specification
 * rather than a fifth row of marketing copy.
 * ------------------------------------------------------------- */
.trust-strip {
	border-bottom: 1px solid var(--border);
	padding-block: var(--space-m);
}
.trust-strip__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.trust-strip__item {
	display: flex;
	align-items: center;
	gap: .65em;
	padding-inline: var(--space-m);
	border-left: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .07em;
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--muted);
}
.trust-strip__item:first-child { border-left: 0; padding-left: 0; }
.trust-strip__item .icon { width: 16px; height: 16px; color: var(--brand-text); flex-shrink: 0; }
@media (max-width: 940px) {
	.trust-strip__row { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
	.trust-strip__item { border-left: 0; padding-inline: 0; }
}
@media (max-width: 520px) {
	.trust-strip__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
 * Spec list — the "why us" rows.
 * Two columns of hairline-divided rows rather than another card grid;
 * the change of texture is what keeps the page from reading as one
 * component repeated down the whole scroll.
 * ------------------------------------------------------------- */
.spec-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-xl);
	border-top: 1px solid var(--border);
}
.spec-row {
	display: flex;
	gap: var(--space-s);
	padding-block: var(--space-m);
	border-bottom: 1px solid var(--border);
}
.spec-row__icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-m);
	background: var(--brand-light);
	color: var(--brand-text);
}
.spec-row__icon .icon { width: 20px; height: 20px; }
.spec-row__title {
	font-size: var(--text-m);
	font-weight: 700;
	letter-spacing: -.015em;
	margin-bottom: .35em;
	line-height: 1.3;
}
.spec-row__desc { font-size: var(--text-s); color: var(--muted); line-height: 1.6; }
@media (max-width: 860px) {
	.spec-list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
 * Stack — the tools section, laid out as application layers.
 * A dark schematic band: numbered layers, hairline divided, each
 * lighting an accent rail on hover. The numbering is meaningful
 * here, because a stack genuinely is read top to bottom.
 * ------------------------------------------------------------- */
/* background-color is set separately from the gradient: the shorthand
   would reset it to transparent, leaving nothing behind the gradient
   if the image ever fails to paint. */
.stack-band {
	background-color: var(--navy);
	background-image: linear-gradient(180deg, var(--navy) 0%, #071322 100%);
}

/*
 * --brand is tuned for white grounds. On navy it measures 4.07:1,
 * under the 4.5:1 AA floor for the 11-12px mono labels it gets used
 * on. Dark bands take the lighter tint the hero already used, which
 * measures 9.5:1.
 */
.section--dark .eyebrow,
.page-header .eyebrow,
.cta-band .eyebrow { color: var(--brand-on-dark); }

.stack { border-top: 1px solid rgba(255,255,255,.13); }
.stack__layer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(230px, 310px) 1fr;
	gap: var(--space-s) var(--space-xl);
	align-items: start;
	padding: var(--space-m) var(--space-s);
	border-bottom: 1px solid rgba(255,255,255,.13);
	transition: background-color var(--dur-base) var(--ease);
}
.stack__layer:hover { background: rgba(255,255,255,.035); }

/* Accent rail — grows from the top edge on hover, which reads as the
   layer being selected rather than merely highlighted. */
.stack__layer::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	bottom: -1px;
	width: 2px;
	background: var(--brand);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--dur-base) var(--ease-out);
}
.stack__layer:hover::before { transform: scaleY(1); }

.stack__head { display: flex; gap: var(--space-s); align-items: baseline; }
.stack__no {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--brand-on-dark);
	font-variant-numeric: tabular-nums;
}
.stack__name {
	font-size: var(--text-l);
	color: #fff;
	letter-spacing: -.02em;
	margin-bottom: .3em;
	line-height: 1.2;
}
.stack .stack__note {
	font-size: var(--text-s);
	color: rgba(255,255,255,.52);
	line-height: 1.5;
}

.stack__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.stack__tool {
	font-family: var(--font-mono);
	font-size: .8125rem;
	padding: .45em .9em;
	border-radius: var(--radius-full);
	border: 1px solid rgba(255,255,255,.17);
	background: rgba(255,255,255,.05);
	color: rgba(255,255,255,.86);
	white-space: nowrap;
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.stack__tool:hover {
	border-color: var(--brand);
	background: rgba(var(--brand-rgb), .18);
	color: #fff;
}

@media (max-width: 880px) {
	.stack__layer { grid-template-columns: 1fr; gap: var(--space-s); }
}
/* ---------------------------------------------------------------
 * Matrix — industries.
 * A single bordered block subdivided by 1px gaps showing the
 * container colour through, so the cells read as one table instead
 * of six floating cards.
 * ------------------------------------------------------------- */
.matrix {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	overflow: hidden;
}
.matrix__cell {
	display: flex;
	gap: var(--space-s);
	padding: var(--space-m);
	background: var(--surface);
	transition: background var(--dur-base) var(--ease);
}
.matrix__cell:hover { background: var(--surface-alt); }
.matrix__icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-m);
	background: var(--brand-light);
	color: var(--brand-text);
}
.matrix__icon .icon { width: 19px; height: 19px; }
.matrix__title {
	font-family: var(--font-display);
	font-size: var(--text-m);
	font-weight: 700;
	letter-spacing: -.015em;
	margin-bottom: .3em;
}
.matrix__desc { font-size: var(--text-s); color: var(--muted); line-height: 1.55; }
@media (max-width: 940px) { .matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .matrix { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
 * Process timeline on a dark band.
 * The base styles reach for --surface and --border, which are page
 * tokens; inside a dark band on an otherwise light page those resolve
 * to the wrong end of the scale, so they are restated here.
 * ------------------------------------------------------------- */
.section--dark .process-timeline__line { background: rgba(255,255,255,.14); }
.section--dark .process-step__marker {
	background: var(--navy);
	border-color: rgba(255,255,255,.22);
	color: rgba(255,255,255,.55);
}
.section--dark .process-step.is-active .process-step__marker {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.section--dark .process-step__title { color: #fff; }
.section--dark .process-step__meta { color: var(--brand-on-dark); }