/*!
 * Rankrix Theme — Template-specific styles
 *
 * Styles the components introduced in Pass 3C: home hero, page hero,
 * category cards, service cards, case-study cards, team cards,
 * testimonials, stats row, process steps, final CTA, contact form.
 *
 * Conventions:
 *   - Every class is prefixed `.rx-` to live in the body-content namespace.
 *   - Every color, size, font, and motion value comes from the design
 *     tokens declared in tokens.css. No literals.
 *   - The chrome's own --rkx-* tokens are *not* used here — body content
 *     is a separate concern from the chrome per project rule.
 */

/* ============================================================================
 * BUTTONS
 * Two variants: primary (solid accent) and ghost (bordered transparent).
 * Plus a -lg modifier for the final-CTA section.
 * ============================================================================ */

.rx-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--rx-space-2);
	padding: var(--rx-space-3) var(--rx-space-5);
	border-radius: var(--rx-radius-pill);
	font-family: var(--rx-font-display);
	font-size: var(--rx-text-sm);
	font-weight: var(--rx-weight-semi);
	letter-spacing: var(--rx-tracking-snug);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform var(--rx-dur-fast) var(--rx-ease-out),
		background-color var(--rx-dur-fast) var(--rx-ease-out),
		color var(--rx-dur-fast) var(--rx-ease-out),
		border-color var(--rx-dur-fast) var(--rx-ease-out);
	white-space: nowrap;
	min-height: 44px;
}
.rx-btn:hover { transform: translateY(-1px); }
.rx-btn:active { transform: translateY(0); }

.rx-btn-primary {
	background: var(--rx-accent);
	color: var(--rx-white);
}
.rx-btn-primary:hover {
	background: var(--rx-accent-hover);
	color: var(--rx-white);
}

.rx-btn-ghost {
	background: transparent;
	color: var(--rx-text);
	border-color: var(--rx-border-strong);
}
.rx-btn-ghost:hover {
	background: var(--rx-surface-hover);
	border-color: var(--rx-accent-soft);
	color: var(--rx-text);
}

.rx-btn-lg {
	padding: var(--rx-space-4) var(--rx-space-6);
	font-size: var(--rx-text-base);
}

/* ============================================================================
 * SECTION HEAD — the eyebrow / h2 / lead block at the top of most sections
 * ============================================================================ */

.rx-section-head {
	max-width: 56rem;
	margin: 0 auto var(--rx-space-10);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-3);
}
.rx-section-head .rx-eyebrow { align-self: center; }
.rx-section-head .rx-lead    { color: var(--rx-text-muted); }

.rx-section-foot {
	margin-top: var(--rx-space-8);
	text-align: center;
}

/* ============================================================================
 * HOME HERO
 * ============================================================================ */

.rx-home-hero {
	padding-block: clamp(6rem, 5rem + 6vw, 12rem) var(--rx-space-16);
}
.rx-home-hero-inner {
	max-width: 56rem;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-5);
}
.rx-home-hero-inner .rx-eyebrow { align-self: center; }
.rx-home-hero-lead {
	font-size: var(--rx-text-xl);
	line-height: var(--rx-leading-snug);
	color: var(--rx-text-muted);
	max-width: 44rem;
	margin: 0 auto;
}
.rx-home-hero-ctas {
	margin-top: var(--rx-space-4);
	display: flex;
	gap: var(--rx-space-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* ============================================================================
 * PAGE HERO
 * ============================================================================ */

.rx-page-hero {
	padding-block: clamp(5rem, 4rem + 4vw, 9rem) var(--rx-space-10);
}
.rx-page-hero-inner {
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-4);
}
.rx-page-hero-inner .rx-eyebrow { align-self: center; }
.rx-page-hero-title {
	font-family: var(--rx-font-display);
	font-size: var(--rx-text-4xl);
	font-weight: var(--rx-weight-bold);
	line-height: var(--rx-leading-tight);
	letter-spacing: var(--rx-tracking-tight);
}
.rx-page-hero-lead {
	font-size: var(--rx-text-lg);
	line-height: var(--rx-leading-normal);
	color: var(--rx-text-muted);
	max-width: 40rem;
	margin: 0 auto;
}

/* ============================================================================
 * WHAT WE DO — three category cards
 * ============================================================================ */

.rx-cat-grid {
	display: grid;
	gap: var(--rx-space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.rx-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

.rx-cat-card {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-4);
	padding: var(--rx-space-6);
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-lg);
	text-decoration: none;
	color: var(--rx-text);
	transition: transform var(--rx-dur-base) var(--rx-ease-spring),
		border-color var(--rx-dur-base) var(--rx-ease-out),
		background-color var(--rx-dur-base) var(--rx-ease-out);
}
.rx-cat-card:hover {
	transform: translateY(-4px);
	border-color: var(--rx-accent-border);
	background: var(--rx-surface-raised);
	color: var(--rx-text);
}
.rx-cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--rx-radius-md);
	background: var(--rx-accent-glow);
	color: var(--rx-accent-soft);
}
.rx-cat-icon svg { width: 1.5rem; height: 1.5rem; }
.rx-cat-title {
	font-size: var(--rx-text-lg);
	font-weight: var(--rx-weight-semi);
	line-height: var(--rx-leading-snug);
}
.rx-cat-desc {
	color: var(--rx-text-muted);
	font-size: var(--rx-text-sm);
	line-height: var(--rx-leading-normal);
}
.rx-cat-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rx-space-1) var(--rx-space-3);
	font-size: var(--rx-text-xs);
	color: var(--rx-text-dim);
	font-family: var(--rx-font-mono);
}
.rx-cat-items li::before { content: "·"; margin-right: 0.5em; color: var(--rx-text-faint); }
.rx-cat-items li:first-child::before { content: none; }

.rx-cat-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--rx-space-2);
	font-size: var(--rx-text-sm);
	font-weight: var(--rx-weight-semi);
	color: var(--rx-accent-soft);
}

/* ============================================================================
 * STATS ROW
 * ============================================================================ */

.rx-stats-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rx-space-6) var(--rx-space-5);
	margin: 0;
	padding: var(--rx-space-6) var(--rx-space-5);
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-lg);
}
@media (min-width: 768px) {
	.rx-stats-list { grid-template-columns: repeat(4, 1fr); }
}
.rx-stat {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-1);
	text-align: center;
}
.rx-stat-value {
	font-family: var(--rx-font-display);
	font-size: var(--rx-text-3xl);
	font-weight: var(--rx-weight-bold);
	letter-spacing: var(--rx-tracking-tight);
	line-height: 1;
}
.rx-stat-value-accent { color: var(--rx-accent-soft); }
.rx-stat-label {
	margin: 0;
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-xs);
	letter-spacing: var(--rx-tracking-mono);
	text-transform: uppercase;
	color: var(--rx-text-dim);
}

/* ============================================================================
 * SERVICE GRID
 * ============================================================================ */

.rx-service-list {
	display: grid;
	gap: var(--rx-space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .rx-service-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rx-service-list { grid-template-columns: repeat(3, 1fr); } }

.rx-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-2);
	padding: var(--rx-space-5);
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-md);
	text-decoration: none;
	color: var(--rx-text);
	transition: transform var(--rx-dur-base) var(--rx-ease-out),
		border-color var(--rx-dur-base) var(--rx-ease-out),
		background-color var(--rx-dur-base) var(--rx-ease-out);
	overflow: hidden;
}
.rx-service-card:hover {
	transform: translateY(-2px);
	border-color: var(--rx-accent-border);
	background: var(--rx-surface-raised);
	color: var(--rx-text);
}
.rx-service-card-head {
	display: flex;
	align-items: center;
	gap: var(--rx-space-2);
	flex-wrap: wrap;
}
.rx-service-card-title {
	font-size: var(--rx-text-base);
	font-weight: var(--rx-weight-semi);
	line-height: var(--rx-leading-snug);
}
.rx-service-card-desc {
	font-size: var(--rx-text-sm);
	color: var(--rx-text-muted);
	line-height: var(--rx-leading-normal);
	margin: 0;
}
.rx-service-card-arrow {
	margin-top: var(--rx-space-2);
	font-size: var(--rx-text-base);
	color: var(--rx-accent-soft);
	transition: transform var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-service-card:hover .rx-service-card-arrow {
	transform: translateX(4px);
}

.rx-badge {
	display: inline-block;
	padding: 0 0.5em;
	background: var(--rx-accent-glow);
	color: var(--rx-accent-soft);
	font-size: var(--rx-text-xs);
	font-family: var(--rx-font-mono);
	font-weight: var(--rx-weight-semi);
	letter-spacing: var(--rx-tracking-mono);
	text-transform: uppercase;
	border-radius: var(--rx-radius-px);
	line-height: 1.6;
}

/* ============================================================================
 * CASE STUDY GRID
 * ============================================================================ */

.rx-case-list {
	display: grid;
	gap: var(--rx-space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .rx-case-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rx-case-list { grid-template-columns: repeat(3, 1fr); } }

.rx-case-card {
	display: flex;
	flex-direction: column;
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-md);
	overflow: hidden;
	text-decoration: none;
	color: var(--rx-text);
	transition: transform var(--rx-dur-base) var(--rx-ease-out),
		border-color var(--rx-dur-base) var(--rx-ease-out);
}
.rx-case-card:hover {
	transform: translateY(-2px);
	border-color: var(--rx-accent-border);
	color: var(--rx-text);
}
.rx-case-card-image {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--rx-surface-raised);
	overflow: hidden;
}
.rx-case-card-image-placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 30%, var(--rx-accent-glow), transparent 60%),
		linear-gradient(135deg, var(--rx-accent-900), var(--rx-black));
}
.rx-case-card-industry {
	position: absolute;
	left: var(--rx-space-3);
	bottom: var(--rx-space-3);
	padding: var(--rx-space-1) var(--rx-space-3);
	background: var(--rx-glass);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--rx-radius-pill);
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-xs);
	letter-spacing: var(--rx-tracking-mono);
	text-transform: uppercase;
	color: var(--rx-text);
	border: 1px solid var(--rx-border-strong);
}
.rx-case-card-body {
	padding: var(--rx-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-2);
}
.rx-case-card-client {
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-xs);
	letter-spacing: var(--rx-tracking-mono);
	text-transform: uppercase;
	color: var(--rx-text-dim);
}
.rx-case-card-headline {
	font-size: var(--rx-text-lg);
	font-weight: var(--rx-weight-semi);
	line-height: var(--rx-leading-snug);
}
.rx-case-card-result {
	margin: var(--rx-space-2) 0 0;
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-sm);
	color: var(--rx-accent-soft);
}

/* Filter pills (placeholder UI for case studies) */
.rx-case-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rx-space-2);
	justify-content: center;
}
.rx-filter-pill {
	background: var(--rx-surface);
	color: var(--rx-text-muted);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-pill);
	padding: var(--rx-space-2) var(--rx-space-4);
	font-size: var(--rx-text-sm);
	cursor: pointer;
	transition: all var(--rx-dur-fast) var(--rx-ease-out);
	min-height: 44px;
}
.rx-filter-pill:hover {
	color: var(--rx-text);
	border-color: var(--rx-border-strong);
}
.rx-filter-pill.is-active {
	background: var(--rx-accent);
	color: var(--rx-white);
	border-color: var(--rx-accent);
}
.rx-case-filter-note {
	margin-top: var(--rx-space-3);
	color: var(--rx-text-faint);
	text-align: center;
}

/* ============================================================================
 * TEAM GRID
 * ============================================================================ */

.rx-team-list {
	display: grid;
	gap: var(--rx-space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .rx-team-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rx-team-list { grid-template-columns: repeat(4, 1fr); } }

.rx-team-card {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-4);
	padding: var(--rx-space-5);
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-md);
}
.rx-team-card-avatar {
	aspect-ratio: 1 / 1;
	background:
		radial-gradient(circle at 50% 40%, var(--rx-accent-glow), transparent 60%),
		linear-gradient(135deg, var(--rx-accent-900), var(--rx-black));
	border-radius: var(--rx-radius-md);
}
.rx-team-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-1);
}
.rx-team-card-name {
	font-size: var(--rx-text-base);
	font-weight: var(--rx-weight-semi);
}
.rx-team-card-role {
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-xs);
	letter-spacing: var(--rx-tracking-mono);
	text-transform: uppercase;
	color: var(--rx-accent-soft);
}
.rx-team-card-bio {
	margin: var(--rx-space-2) 0 0;
	font-size: var(--rx-text-sm);
	color: var(--rx-text-muted);
	line-height: var(--rx-leading-normal);
}

/* ============================================================================
 * TESTIMONIALS
 * ============================================================================ */

.rx-testimonial-list {
	display: grid;
	gap: var(--rx-space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .rx-testimonial-list { grid-template-columns: repeat(3, 1fr); } }

.rx-testimonial-card {
	margin: 0;
	padding: var(--rx-space-6);
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-4);
}
.rx-testimonial-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--rx-text-lg);
	line-height: var(--rx-leading-snug);
	color: var(--rx-text);
	font-style: normal;
}
.rx-testimonial-quote::before {
	content: "\201C";
	display: block;
	font-size: 2em;
	line-height: 0.5;
	margin-bottom: var(--rx-space-3);
	color: var(--rx-accent-soft);
}
.rx-testimonial-attr {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--rx-space-3);
	border-top: 1px solid var(--rx-border);
}
.rx-testimonial-name {
	font-weight: var(--rx-weight-semi);
	font-size: var(--rx-text-sm);
}
.rx-testimonial-company {
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-xs);
	letter-spacing: var(--rx-tracking-mono);
	text-transform: uppercase;
	color: var(--rx-text-dim);
}

/* ============================================================================
 * PROCESS STEPS
 * ============================================================================ */

.rx-process-list {
	display: grid;
	gap: var(--rx-space-5);
	grid-template-columns: 1fr;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 768px) { .rx-process-list { grid-template-columns: repeat(3, 1fr); } }

.rx-process-step {
	padding: var(--rx-space-6);
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-3);
}
.rx-process-num {
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-xs);
	letter-spacing: var(--rx-tracking-mono);
	color: var(--rx-accent-soft);
}
.rx-process-title {
	font-size: var(--rx-text-xl);
	font-weight: var(--rx-weight-semi);
}
.rx-process-desc {
	margin: 0;
	color: var(--rx-text-muted);
	font-size: var(--rx-text-base);
	line-height: var(--rx-leading-normal);
}

/* ============================================================================
 * FINAL CTA
 * ============================================================================ */

.rx-final-cta-inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
	padding: var(--rx-space-12) var(--rx-space-6);
	background:
		radial-gradient(ellipse at 50% 100%, var(--rx-accent-glow), transparent 70%),
		var(--rx-surface);
	border: 1px solid var(--rx-border-strong);
	border-radius: var(--rx-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-4);
}
.rx-final-cta-inner .rx-eyebrow { align-self: center; }
.rx-final-cta-inner .rx-lead { color: var(--rx-text-muted); }
.rx-final-cta-inner .rx-btn { align-self: center; margin-top: var(--rx-space-3); }

/* ============================================================================
 * CONTACT FORM + ASIDE
 * ============================================================================ */

.rx-contact-grid {
	display: grid;
	gap: var(--rx-space-8);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.rx-contact-grid { grid-template-columns: 1.4fr 1fr; }
}

.rx-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-4);
	padding: var(--rx-space-6);
	background: var(--rx-surface);
	border: 1px solid var(--rx-border);
	border-radius: var(--rx-radius-md);
}
.rx-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rx-space-4);
}
@media (min-width: 640px) { .rx-form-row { grid-template-columns: 1fr 1fr; } }

.rx-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-1);
}
.rx-form-label {
	font-family: var(--rx-font-mono);
	font-size: var(--rx-text-xs);
	letter-spacing: var(--rx-tracking-mono);
	text-transform: uppercase;
	color: var(--rx-text-dim);
}
.rx-form-input {
	font: inherit;
	color: var(--rx-text);
	background: var(--rx-black);
	border: 1px solid var(--rx-border-strong);
	border-radius: var(--rx-radius-sm);
	padding: var(--rx-space-3);
	width: 100%;
	min-height: 44px;
	transition: border-color var(--rx-dur-fast) var(--rx-ease-out),
		background-color var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-form-input:focus {
	outline: none;
	border-color: var(--rx-accent);
	box-shadow: 0 0 0 3px var(--rx-accent-glow);
}
textarea.rx-form-input {
	resize: vertical;
}

.rx-form-actions {
	display: flex;
	align-items: center;
	gap: var(--rx-space-4);
	flex-wrap: wrap;
	margin-top: var(--rx-space-2);
}
.rx-form-note {
	margin: 0;
	font-size: var(--rx-text-sm);
	color: var(--rx-text-dim);
}

.rx-contact-aside {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-6);
}
.rx-contact-block {
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-2);
}
.rx-contact-email {
	font-size: var(--rx-text-xl);
	color: var(--rx-text);
	text-decoration: none;
	font-weight: var(--rx-weight-semi);
	border-bottom: 1px solid var(--rx-accent-border);
	padding-bottom: 0.1em;
	align-self: flex-start;
}
.rx-contact-email:hover { color: var(--rx-accent-soft); }

.rx-contact-next {
	list-style: decimal;
	padding-inline-start: var(--rx-space-5);
	color: var(--rx-text-muted);
	font-size: var(--rx-text-sm);
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-2);
}
.rx-contact-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rx-space-2);
}
.rx-contact-links a {
	color: var(--rx-text);
	text-decoration: none;
	font-size: var(--rx-text-sm);
}
.rx-contact-links a:hover { color: var(--rx-accent-soft); }

/* Submit-success flash */
.rx-flash {
	padding: var(--rx-space-4) var(--rx-space-5);
	border-radius: var(--rx-radius-md);
	font-size: var(--rx-text-base);
}
.rx-flash-success {
	background: hsla(160 70% 45% / 0.12);
	border: 1px solid hsla(160 70% 45% / 0.4);
	color: var(--rx-success);
}