/* Services-only layer: approved homepage, Work and case-study rules are untouched. */
@layer components {
	.service-page { --service-rule: var(--fg-dark-border-strong); --service-muted: var(--fg-dark-text-secondary); --service-accent: color-mix(in srgb, var(--fg-brand-primary) 80%, white); }
	.service-light { --service-rule: var(--fg-light-border-strong); --service-muted: var(--fg-light-text-secondary); --service-accent: var(--fg-brand-primary); --fg-color-text: var(--fg-light-text-primary); --fg-color-text-muted: var(--fg-light-text-secondary); --fg-color-focus: var(--fg-brand-primary); background: var(--fg-light-background); color: var(--fg-light-text-primary); color-scheme: light; }
	.service-section { padding-block: var(--fg-section-space-standard); }
	.service-page h1 { max-inline-size: 18ch; letter-spacing: var(--fg-letter-spacing-display); overflow-wrap: break-word; }
	.service-page h2 { max-inline-size: 20ch; line-height: var(--fg-line-height-tight); }
	.service-page h3 { line-height: var(--fg-line-height-tight); }
	.service-page p { max-inline-size: 58ch; }
	.service-eyebrow { display: flex; align-items: center; gap: var(--fg-space-3); color: var(--service-muted); font-size: var(--fg-font-size-xs); font-weight: var(--fg-font-weight-medium); letter-spacing: var(--fg-letter-spacing-meta); text-transform: uppercase; }
	.service-eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 1px; flex: 0 0 auto; background: var(--fg-brand-primary); }
	.service-hero { padding-block: var(--fg-space-8) 0; }
	.service-hero__grid { display: grid; gap: var(--fg-space-7); padding-block: var(--fg-space-6) var(--fg-space-8); }
	.service-hero__details { display: grid; gap: var(--fg-space-6); align-content: end; }
	.service-hero__details > p { color: var(--service-muted); font-size: var(--fg-font-size-lg); }
	.service-actions { display: flex; align-items: center; gap: var(--fg-space-5) var(--fg-space-6); flex-wrap: wrap; }
	.service-flow { display: grid; grid-template-columns: 3fr 2fr 1fr; gap: var(--fg-space-3); padding-block-end: var(--fg-space-8); }
	.service-flow span { block-size: 1px; background: var(--fg-dark-border); }
	.service-flow span:first-child { position: relative; background: var(--fg-brand-primary); }
	.service-flow span:first-child::after { position: absolute; inset-inline-end: 0; inset-block-start: -2px; inline-size: 5px; block-size: 5px; background: var(--fg-brand-primary); content: ""; }
	.service-split { display: grid; gap: var(--fg-space-7); align-items: start; }
	.service-prose { display: grid; gap: var(--fg-space-5); color: var(--service-muted); }
	.service-prose .fg-text-action { justify-self: start; color: var(--fg-color-text); }
	.service-light .service-prose .fg-text-action { color: var(--fg-light-text-primary); }
	.service-number { color: var(--service-accent); font-family: var(--fg-font-mono); font-size: var(--fg-font-size-xs); }
	.service-index h2 { margin-block-end: var(--fg-space-8); }
	.service-index__row { display: grid; gap: var(--fg-space-5); padding-block: var(--fg-space-7); border-block-start: 1px solid var(--service-rule); }
	.service-index__row h3 { font-size: var(--fg-font-size-section); max-inline-size: 16ch; }
	.service-index__row h3 a { text-decoration: none; }
	.service-index__row h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
	.service-index__copy { display: grid; gap: var(--fg-space-5); align-content: start; }
	.service-index__copy p { color: var(--service-muted); }
	.service-index__copy .fg-text-action { justify-self: start; }
	.service-index__hints { list-style: none; margin: 0; padding: 0; color: var(--service-muted); font-size: var(--fg-font-size-sm); display: flex; flex-wrap: wrap; gap: var(--fg-space-2) var(--fg-space-5); }
	.service-index__hints li { margin: 0; }
	.service-philosophy .service-prose { font-size: var(--fg-font-size-lg); }
	.service-secondary { padding-block: var(--fg-section-space-compact); }
	.service-secondary--starter { background: var(--fg-light-surface-secondary); }
	.service-secondary__inner { display: grid; gap: var(--fg-space-6); }
	.service-secondary .service-eyebrow { margin-block-end: var(--fg-space-5); }
	.service-secondary h2 { font-size: var(--fg-font-size-xl); max-inline-size: 24ch; }
	.service-process-preview { padding-block: var(--fg-space-7) var(--fg-space-8); }
	.service-process-preview__heading { display: flex; align-items: start; justify-content: space-between; gap: var(--fg-space-5); flex-direction: column; }
	.service-process-preview h2 { font-size: var(--fg-font-size-lg); font-weight: var(--fg-font-weight-medium); }
	.service-process-preview__steps { list-style: none; padding: 0; margin: var(--fg-space-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fg-space-5); counter-reset: service-step; }
	.service-process-preview__steps li { display: flex; gap: var(--fg-space-3); align-items: baseline; border-block-start: 1px solid var(--service-rule); padding-block-start: var(--fg-space-3); }
	.service-process-preview__steps li::before { counter-increment: service-step; content: "0" counter(service-step); font-family: var(--fg-font-mono); font-size: var(--fg-font-size-xs); color: var(--service-accent); }
	.service-responses { display: grid; gap: var(--fg-space-6); }
	.service-response { border-block-start: 1px solid var(--service-rule); padding-block-start: var(--fg-space-5); }
	.service-response h3 { font-size: var(--fg-font-size-lg); margin-block-end: var(--fg-space-3); }
	.service-response p { color: var(--service-muted); }
	.service-build__list, .service-decision-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--fg-space-6); }
	.service-build__list li, .service-decision-factors li { border-block-start: 1px solid var(--service-rule); padding-block: var(--fg-space-4); }
	.service-decision-factors li { color: var(--service-muted); }
	.service-platform-decision .service-prose, .service-configurator .service-prose { margin-block-start: var(--fg-space-6); }
	.service-section-heading { display: grid; gap: var(--fg-space-5); margin-block-end: var(--fg-space-8); }
	.service-proof { border-block-start: 1px solid var(--fg-dark-border); }
	.service-proof__projects { display: grid; gap: var(--fg-space-8); }
	.service-proof__project { display: grid; gap: var(--fg-space-6); align-items: start; min-inline-size: 0; }
	.service-proof__visual { display: block; min-inline-size: 0; text-decoration: none; }
	.service-proof__visual img { inline-size: 100%; border-radius: var(--fg-radius-xs); }
	.service-proof__project--dark-frame .service-proof__visual { padding: var(--fg-space-4); background: var(--fg-dark-surface-secondary); border: 1px solid var(--fg-dark-border-strong); }
	.service-proof__copy { display: grid; gap: var(--fg-space-4); }
	.service-proof__copy h3 { font-size: var(--fg-font-size-xl); }
	.service-proof__copy > p:not(.service-eyebrow) { color: var(--service-muted); }
	.service-proof__copy .fg-text-action { justify-self: start; }
	.service-proof__copy .service-eyebrow { font-size: var(--fg-font-size-xs); letter-spacing: 0.05em; }
	.service-proof__copy .service-eyebrow::before { display: none; }
	.service-proof--applications .service-proof__visual { max-inline-size: 34rem; }
	.service-steps { margin: var(--fg-space-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--fg-space-5); counter-reset: steps; }
	.service-steps li { border-block-start: 1px solid var(--service-rule); padding-block-start: var(--fg-space-4); }
	.service-steps li::before { display: block; counter-increment: steps; content: "0" counter(steps); font-family: var(--fg-font-mono); font-size: var(--fg-font-size-xs); color: var(--service-accent); margin-block-end: var(--fg-space-3); }
	.service-technology { display: grid; gap: var(--fg-space-4); padding-block-start: var(--fg-space-7); margin-block-start: var(--fg-space-7); border-block-start: 1px solid var(--service-rule); }
	.service-technology h3 { font-size: var(--fg-font-size-lg); }
	.service-technology p { color: var(--service-muted); }
	.service-platforms h2 { margin-block-end: var(--fg-space-8); }
	.service-platforms__row { display: grid; gap: var(--fg-space-4); padding-block: var(--fg-space-6); border-block-start: 1px solid var(--service-rule); }
	.service-platforms__row h3 { font-size: var(--fg-font-size-xl); }
	.service-platforms__row p { color: var(--service-muted); }
	.service-configurator__steps { list-style: none; padding: 0; margin: 0; counter-reset: config; }
	.service-configurator__steps li { position: relative; border-inline-start: 1px solid var(--service-rule); margin-inline-start: 1rem; padding: 0 0 var(--fg-space-7) var(--fg-space-7); }
	.service-configurator__steps li:last-child { padding-block-end: 0; }
	.service-configurator__steps li::before { counter-increment: config; content: "0" counter(config); position: absolute; inset-inline-start: -1rem; background: var(--fg-light-background); color: var(--fg-brand-primary); font-family: var(--fg-font-mono); font-size: var(--fg-font-size-xs); padding-block: 0.25rem; }
	.service-configurator .fg-text-action { margin-block-start: var(--fg-space-6); }
	.service-fit h2 { margin-block-end: var(--fg-space-8); }
	.service-fit__list { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: fit; }
	.service-fit__list li { padding-block: var(--fg-space-5); border-block-start: 1px solid var(--service-rule); display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--fg-space-3); font-size: var(--fg-font-size-lg); }
	.service-fit__list li::before { counter-increment: fit; content: "0" counter(fit); font-family: var(--fg-font-mono); font-size: var(--fg-font-size-xs); color: var(--fg-brand-primary); padding-block-start: 0.25rem; }
	.service-faq { border-block-start: 1px solid var(--fg-dark-border); }
	.service-faq__inner { display: grid; gap: var(--fg-space-7); }
	.service-faq .service-eyebrow { margin-block-end: var(--fg-space-5); }
	.service-faq__list { border-block-start: 1px solid var(--service-rule); }
	.service-faq__item { border-block-end: 1px solid var(--service-rule); }
	.service-faq__item h3 { font: inherit; }
	.service-faq__trigger { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 1.125rem; align-items: center; gap: var(--fg-space-3); inline-size: 100%; min-block-size: 5rem; padding: var(--fg-space-5) 0; border: 0; color: var(--fg-dark-text-primary); background: transparent; text-align: start; font-size: var(--fg-font-size-lg); font-weight: var(--fg-font-weight-medium); line-height: 1.25; }
	.service-faq__number { color: var(--service-accent); font-family: var(--fg-font-mono); font-size: var(--fg-font-size-xs); }
	.service-faq__control { position: relative; inline-size: 1.125rem; block-size: 1.125rem; }
	.service-faq__control::before, .service-faq__control::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 100%; block-size: 1px; background: currentColor; transition: transform var(--fg-duration-fast) var(--fg-easing-standard); }
	.service-faq__control::after { transform: rotate(90deg); }
	.service-faq__trigger[aria-expanded="true"] .service-faq__control::after { transform: rotate(0); }
	.service-faq__trigger:hover .service-faq__control { color: var(--service-accent); }
	.service-faq__panel { padding: 0 2rem var(--fg-space-6) 2.5rem; color: var(--service-muted); font-size: var(--fg-font-size-sm); }
	.service-faq__panel p + p { margin-block-start: var(--fg-space-4); }
	.service-final { border-block-start: 1px solid var(--fg-dark-border); }
	.service-final__inner { display: grid; gap: var(--fg-space-7); align-items: center; }
	.service-final h2 { max-inline-size: 22ch; }
	.service-final p { margin-block-start: var(--fg-space-5); color: var(--service-muted); }
	.service-final .fg-button { justify-self: start; }
	@media (min-width: 48rem) {
		.service-hero { padding-block-start: var(--fg-section-space-compact); }
		.service-hero__grid { padding-block-end: var(--fg-space-9); }
		.service-hero__details { max-inline-size: 48rem; }
		.service-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fg-space-7); }
		.service-index__row { grid-template-columns: 2rem repeat(2, minmax(0, 1fr)); gap: var(--fg-space-5); padding-block: var(--fg-space-7); }
		.service-index__hints { grid-column: 3; }
		.service-index__row h3 { grid-column: 2; grid-row: span 2; font-size: var(--fg-font-size-xl); }
		.service-index__copy { grid-column: 3; }
		.service-secondary__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fg-space-7); }
		.service-process-preview__heading { flex-direction: row; align-items: center; }
		.service-process-preview__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fg-space-4); }
		.service-process-preview__steps li { flex-direction: column; gap: var(--fg-space-2); }
		.service-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fg-space-6); }
		.service-technology { grid-template-columns: 1fr 2fr; }
		.service-platforms__row { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--fg-space-6); align-items: baseline; }
		.service-fit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--fg-space-7); }
		.service-proof--web .service-proof__projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fg-space-7); }
		.service-proof--web .service-proof__project--secondary { padding-block-start: var(--fg-space-9); }
		.service-proof--commerce .service-proof__project--secondary { grid-template-columns: 1fr 1fr; gap: var(--fg-space-7); align-items: center; max-inline-size: 68rem; margin-inline-start: auto; }
		.service-proof--applications .service-proof__project { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fg-space-7); align-items: center; }
		.service-final__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--fg-space-8); }
	}
	@media (min-width: 64rem) {
		.service-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--fg-space-9); }
		.service-page--overview .service-hero h1 { max-inline-size: 13ch; }
		.service-page--commerce .service-hero__grid { grid-template-columns: 1fr; }
		.service-page--commerce .service-hero h1 { max-inline-size: 20ch; }
		.service-page--commerce .service-hero__details { display: flex; max-inline-size: none; align-items: center; justify-content: space-between; gap: var(--fg-space-9); }
		.service-page--commerce .service-hero__details > p { max-inline-size: 53ch; }
		.service-page--commerce .service-actions { flex: 0 0 auto; }
		.service-page--applications .service-hero__grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
		.service-page--applications .service-hero h1 { max-inline-size: 17ch; }
		.service-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--fg-space-10); }
		.service-index__row { grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.6fr); gap: var(--fg-space-6); padding-block: var(--fg-space-8); }
		.service-index__row h3 { grid-row: auto; font-size: var(--fg-font-size-section); }
		.service-index__hints { display: grid; grid-column: 4; gap: var(--fg-space-2); align-content: start; }
		.service-index__row--commerce h3 { max-inline-size: 12ch; }
		.service-index__row--applications h3 { max-inline-size: 13ch; }
		.service-secondary__inner { gap: var(--fg-space-10); }
		.service-build__list, .service-decision-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.service-proof--commerce .service-proof__project:not(.service-proof__project--secondary) { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: var(--fg-space-7); align-items: end; }
		.service-proof--applications .service-proof__project { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fg-space-10); padding-inline: var(--fg-space-8); }
		.service-proof--applications .service-proof__copy h3 { font-size: var(--fg-font-size-section); }
		.service-approach:not(.service-approach--applications) .service-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
		.service-faq__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--fg-space-9); }
	}
}