/* /services archive - alternating full-width rows layout. Translated
   from a Tailwind reference into the theme's existing design tokens
   (--hcw-green, --hcw-bg-2, Cabinet Grotesk etc.) rather than loading
   Tailwind itself. */

.services-archive-hero { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 2rem; }
.services-archive-title {
	font-family: "Cabinet Grotesk", sans-serif; font-weight: 800;
	font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.95; letter-spacing: -0.02em;
	margin: 1.5rem 0 0;
}
.services-archive-title .last-line { color: var(--hcw-green); display: block; }

/* Alternating rows */
.service-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
	border-top: 1px solid var(--hcw-line);
	padding-top: 2.5rem;
	margin-top: 2.5rem;
}
.service-row:first-child { border-top: none; margin-top: 0; }
@media (min-width: 1024px) {
	.service-row { grid-template-columns: repeat(12, 1fr); gap: 2.5rem; }
	.service-row__text { grid-column: span 4; }
	.service-row__img { grid-column: span 8; }
	.service-row--reverse .service-row__text { order: 2; }
	.service-row--reverse .service-row__img { order: 1; }
}

.service-row__num { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.28em; color: var(--hcw-green); }
.service-row__title {
	font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; color: #fff;
	font-size: clamp(1.8rem, 4vw, 3rem); line-height: 0.95; letter-spacing: -0.02em;
	margin: 1rem 0 0;
}
.service-row__desc { margin-top: 1rem; color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; max-width: 42ch; }
.service-row__highlights { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; color: rgba(255,255,255,0.7); font-size: 14px; }
.service-row__highlights li { display: flex; gap: 0.6rem; align-items: baseline; }
.service-row__highlights li::before { content: "\25c6"; color: var(--hcw-green); font-size: 10px; }
.service-row__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.service-row__img { position: relative; overflow: hidden; border: 1px solid var(--hcw-line); aspect-ratio: 16 / 9; }
.service-row__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); }

/* Pricing note section */
.pricing-note-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .pricing-note-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pricing-note-card { border: 1px solid var(--hcw-line); background: var(--hcw-panel); padding: 1.5rem; }
.pricing-note-card .num { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.24em; color: rgba(255,255,255,0.4); }
.pricing-note-card h3 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; color: #fff; font-size: 1.15rem; margin: 0.75rem 0 0.5rem; }
.pricing-note-card p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; margin: 0; }

/* CTA panel */
.services-cta-panel {
	position: relative; border: 1px solid var(--hcw-line); background: var(--hcw-panel);
	padding: 2.5rem; display: grid; gap: 1.5rem;
}
@media (min-width: 768px) { .services-cta-panel { grid-template-columns: 2fr 1fr; align-items: center; padding: 3.5rem; } }
.services-cta-panel h2 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; margin: 0.5rem 0 0.75rem; }
.services-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 768px) { .services-cta-actions { flex-direction: column; align-items: flex-end; } }