/* ============================================================
   About Page — scoped to .about-page
   Spacing token: 8px base grid
   ============================================================ */

/* ── Container ── */
.about-page .ab-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 48px;
	padding-right: 48px;
}

/* ── Eyebrow Pill — Ratiom Lime Component ── */
.about-page .ab-pill {
	display: inline-flex;
	align-items: center;
	font-size: var(--type-eyebrow-size);
	font-weight: var(--type-eyebrow-weight);
	text-transform: uppercase;
	letter-spacing: var(--type-eyebrow-ls);
	background: rgba(196, 238, 24, 0.08);
	border: 1px solid rgba(196, 238, 24, 0.18);
	padding: 0.45rem 0.8rem;
	border-radius: 999px;
	color: #c4ee18;
	margin-bottom: 1.25rem;
	font-family: 'Inter', sans-serif;
	line-height: 1;
}

/* ── Section 1: Hero ── */
.about-page .ab-hero {
	padding: 96px 0;
	background: #0a0a0a;
}

.about-page .ab-hero-inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	grid-template-areas:
		"pill  ."
		"ltop  ."
		"lbot  right";
	column-gap: 56px;
}

.about-page .ab-hero-eyebrow {
	grid-area: pill;
	justify-self: start; /* don't stretch across the grid column */
	align-self: start;   /* don't stretch in flex-direction:column on mobile */
}

.about-page .ab-hero-left-top {
	grid-area: ltop;
}

.about-page .ab-hero-left-bottom {
	grid-area: lbot;
}

.about-page .ab-hero-headline-group {
	max-width: 600px;
	margin: 0 0 36px;
}

.about-page .ab-hero-h1 {
	font-size: clamp(3rem, 5vw, 4.8rem);
	font-weight: var(--type-h1-weight);
	letter-spacing: var(--type-h1-ls);
	line-height: 0.92;
	color: #ffffff;
	margin: 0 0 20px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-hero-subhead {
	font-size: clamp(1.25rem, 1.8vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 36px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-story {
	max-width: 520px;
	margin-bottom: 32px;
}

.about-page .ab-story p {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
	margin: 0;
}

.about-page .ab-story p + p {
	margin-top: 10px;
}

/* Remove trailing space so image bottom aligns with last copy line */
.about-page .ab-hero-left-bottom .ab-story {
	margin-bottom: 0;
}

.about-page .ab-hero-cta {
	display: inline-flex;
	align-items: center;
	background: #c4ee18;
	color: #000000;
	padding: 0.95rem 1.4rem;
	border-radius: 9999px;
	font-size: var(--type-btn-size);
	font-weight: var(--type-btn-weight);
	letter-spacing: var(--type-btn-ls);
	text-decoration: none;
	transition: background 0.18s ease, box-shadow 0.18s ease;
	border: none;
	cursor: pointer;
}

.about-page .ab-hero-cta:hover {
	background: #d4ff44;
	box-shadow: 0 8px 28px rgba(200, 241, 53, 0.28);
	color: #000000;
}

.about-page .ab-hero-micro {
	font-size: var(--type-small-size);
	color: rgba(255, 255, 255, 0.32);
	margin: 12px 0 0;
	line-height: var(--type-small-lh);
}

.about-page .ab-hero-right {
	grid-area: right;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.about-page .ab-founder-img {
	height: 100%;
	width: auto;
	max-width: 100%;
	border-radius: 12px;
	display: block;
	box-shadow:
		0 24px 64px rgba(0, 0, 0, 0.55),
		0 0 80px rgba(200, 241, 53, 0.05);
}

/* ── Section 2: Stat Bar ── */
.about-page .ab-stats {
	background: #111111;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 48px 0;
}

.about-page .ab-stats-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 24px;
}

.about-page .ab-stat {
	text-align: left;
	flex: 1;
	min-width: 0;
}

.about-page .ab-stat-number {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	color: #c8f135;
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
	display: block;
	margin-bottom: 8px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-stat-number--text {
	font-size: var(--type-h3-size);
	letter-spacing: var(--type-h3-ls);
	line-height: var(--type-h3-lh);
}

.about-page .ab-stat-label {
	font-size: var(--type-small-size);
	color: rgba(255, 255, 255, 0.42);
	font-weight: 400;
	line-height: var(--type-small-lh);
	display: block;
	max-width: 160px;
}

.about-page .ab-stat-divider {
	width: 1px;
	height: 48px;
	background: rgba(255, 255, 255, 0.07);
	flex-shrink: 0;
	align-self: center;
}

/* ── Section 3: The Problem ── */
.about-page .ab-story-section {
	background: #0a0a0a;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 96px 0;
}

.about-page .ab-story-h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
	color: #ffffff;
	max-width: 720px;
	margin: 0 0 16px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-story-lead {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.58);
	max-width: 65ch;
	margin: 0 0 32px;
}

/* ── Bullet Cards — Single column ── */
.about-page .ab-bullet-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 680px;
}

/* ── Bullet Cards — 3-col variant ── */
.about-page .ab-bullet-cards--3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: none;
}

.about-page .ab-bullet-cards--3col .ab-bullet-card {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Icon for icon-style bullet cards */
.about-page .ab-bullet-icon {
	width: 22px;
	height: 22px;
	color: #c8f135;
	display: block;
	flex-shrink: 0;
	opacity: 0.9;
}

.about-page .ab-bullet-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #111111;
	border: 1px solid rgba(200, 241, 53, 0.12);
	border-left: 3px solid #c8f135;
	border-radius: 8px;
	padding: 16px 20px;
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	color: rgba(255, 255, 255, 0.72);
}

/* Approach section sits on #111111 bg — lift card contrast */
.about-page .ab-approach .ab-bullet-card {
	background: #1a1a1a;
}

.about-page .ab-bullet-dot {
	width: 7px;
	min-width: 7px;
	height: 7px;
	background: #c8f135;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 8px;
}

/* ── Section 4: Approach ── */
.about-page .ab-approach {
	background: #111111;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 96px 0;
}

.about-page .ab-approach-h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
	color: #ffffff;
	max-width: 720px;
	margin: 0 0 16px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-approach-lead {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.58);
	max-width: 65ch;
	margin: 0 0 32px;
}

.about-page .ab-approach-close {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.58);
	max-width: 65ch;
	margin: 32px 0 0;
}

/* ── Section 5: Built For Local ── */
.about-page .ab-personal {
	background: #0a0a0a;
	padding: 96px 0;
}

.about-page .ab-personal-inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 80px;
	align-items: center;
}

.about-page .ab-personal-right {
	border-left: 3px solid rgba(200, 241, 53, 0.25);
	padding-left: 40px;
}

.about-page .ab-personal-h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
	color: #ffffff;
	margin: 0;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-personal-lead {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 16px;
}

.about-page .ab-personal-sub {
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	color: rgba(255, 255, 255, 0.4);
	margin: 0;
}

/* ── Section 6: Why Choose Ratiom ── */
.about-page .ab-why {
	background: #111111;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 96px 0;
}

.about-page .ab-why-h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
	color: #ffffff;
	max-width: 720px;
	margin: 0 0 16px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-why-intro {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.52);
	max-width: 65ch;
	margin: 0 0 48px;
}

.about-page .ab-value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.about-page .ab-value-card {
	display: flex;
	flex-direction: column;
	background: #161616;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	padding: 28px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-page .ab-value-card:hover {
	border-color: rgba(200, 241, 53, 0.2);
	box-shadow: 0 0 0 1px rgba(200, 241, 53, 0.05), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.about-page .ab-card-icon {
	width: 22px;
	height: 22px;
	color: #c8f135;
	margin-bottom: 16px;
	display: block;
	flex-shrink: 0;
	opacity: 0.9;
}

.about-page .ab-card-title {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	line-height: var(--type-h3-lh);
	letter-spacing: var(--type-h3-ls);
	color: #ffffff;
	margin: 0 0 8px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-card-body {
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	color: rgba(255, 255, 255, 0.48);
	margin: 0;
}

/* ── Section 7: CTA Banner ── */
.about-page .ab-cta-banner {
	background: #c8f135;
	padding: 96px 0;
	text-align: center;
}

.about-page .ab-cta-h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
	color: #111111;
	max-width: 720px;
	margin: 0 auto 16px;
	font-family: 'Darker Grotesque', sans-serif;
}

.about-page .ab-cta-sub {
	font-size: var(--type-body-size);
	color: rgba(0, 0, 0, 0.58);
	margin: 0 auto 32px;
	max-width: 65ch;
	line-height: var(--type-body-lh);
}

.about-page .ab-cta-btn {
	display: inline-flex;
	align-items: center;
	background: #111111;
	color: #c4ee18;
	padding: 0.95rem 1.4rem;
	border-radius: 9999px;
	font-size: var(--type-btn-size);
	font-weight: var(--type-btn-weight);
	letter-spacing: var(--type-btn-ls);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.18s ease;
}

.about-page .ab-cta-btn:hover {
	background: #000000;
	color: #c8f135;
}

.about-page .ab-cta-micro {
	font-size: var(--type-small-size);
	color: rgba(0, 0, 0, 0.42);
	margin: 20px auto 0;
	max-width: 360px;
	line-height: var(--type-small-lh);
}

/* ── Responsive: 1024px ── */
@media (max-width: 1024px) {
	.about-page .ab-value-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-page .ab-stats-inner {
		flex-wrap: wrap;
		gap: 32px;
	}

	.about-page .ab-stat {
		flex: 0 0 auto;
	}

	.about-page .ab-stat-label {
		max-width: none;
	}
}

/* ── Responsive: 900px ── */
@media (max-width: 900px) {
	.about-page .ab-container {
		padding-left: 24px;
		padding-right: 24px;
	}

	.about-page .ab-hero {
		padding: 72px 0 80px;
	}

	/* Switch hero inner to flex — reliably overrides named grid-area placements (ltop/lbot)
	   that persist from desktop grid and cause stacking issues on mobile. */
	.about-page .ab-hero-inner {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* Reset grid-area on all hero children so they participate in flex flow */
	.about-page .ab-hero-eyebrow,
	.about-page .ab-hero-left-top,
	.about-page .ab-hero-left-bottom {
		grid-area: auto;
	}

	/* Dissolve wrapper — subhead and story become independent flex items of ab-hero-inner */
	.about-page .ab-hero-left-bottom {
		display: contents;
	}

	/* Mobile layout order: eyebrow → headline → subhead → image → body copy */
	.about-page .ab-hero-eyebrow  { order: 1; margin-bottom: 12px; align-self: center; }
	.about-page .ab-hero-left-top { order: 2; margin-bottom: 0; }
	.about-page .ab-hero-subhead  { order: 3; margin: 16px 0 24px; text-align: center; }
	.about-page .ab-hero-right    { order: 4; grid-area: auto; justify-content: center; margin-bottom: 24px; }
	.about-page .ab-story         { order: 5; }

	/* Hero primary heading: centred on mobile; body copy sections stay left */
	.about-page .ab-hero-h1 {
		text-align: center;
	}

	/* Neutralise h1 bottom margin — spacing handled by flex item margins above */
	.about-page .ab-hero-h1 {
		line-height: 1.1;
		margin-bottom: 0;
	}

	/* Allow eyebrow pill to wrap cleanly at narrow widths; center text within pill */
	.about-page .ab-pill {
		line-height: 1.4;
		white-space: normal;
		text-align: center;
		justify-content: center;
	}

	/* Founder image — reduced size, cleaner radius, centered */
	.about-page .ab-founder-img {
		height: auto;
		width: 90%;
		max-width: 300px;
		border-radius: 18px;
		margin: 0 auto;
		display: block;
	}

	.about-page .ab-stats-inner {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		text-align: center;
	}

	.about-page .ab-stat {
		text-align: center;
		width: 100%;
	}

	.about-page .ab-stat-label {
		max-width: none;
	}

	.about-page .ab-stat-divider {
		display: none;
	}

	.about-page .ab-value-grid {
		grid-template-columns: 1fr;
	}

	.about-page .ab-bullet-cards--3col {
		grid-template-columns: 1fr;
	}

	.about-page .ab-personal-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-page .ab-personal-right {
		border-left: none;
		border-top: 1px solid rgba(200, 241, 53, 0.2);
		padding-left: 0;
		padding-top: 28px;
	}

	.about-page .ab-story-section,
	.about-page .ab-approach,
	.about-page .ab-personal,
	.about-page .ab-why {
		padding: 72px 0;
	}

	.about-page .ab-cta-banner {
		padding: 72px 0;
	}
}

/* ── Responsive: 640px ── */
@media (max-width: 640px) {
	.about-page .ab-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Symmetric padding; removes the asymmetric 56px/64px split */
	.about-page .ab-hero {
		padding: 52px 0;
	}

	/* Hero inner — spacing handled by flex item margins; keep gap:0 from 900px rule */

	/* Scale hero h1 fluidly on small screens to prevent overflow */
	.about-page .ab-hero-h1 {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
		line-height: 1.1;
		overflow-wrap: break-word;
	}

	/* Overflow-wrap safety net on all section headings */
	.about-page .ab-story-h2,
	.about-page .ab-approach-h2,
	.about-page .ab-personal-h2,
	.about-page .ab-why-h2,
	.about-page .ab-cta-h2 {
		overflow-wrap: break-word;
	}

	/* Stats: switch from stacked column to 2×2 grid — saves ~120px of vertical scroll */
	.about-page .ab-stats {
		padding: 32px 0;
	}

	.about-page .ab-stats-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 20px;
	}

	.about-page .ab-stat {
		text-align: left;
		width: auto;
	}

	/* ab-stat-number scales via --type-h2-size clamp automatically */

	.about-page .ab-story-section,
	.about-page .ab-approach,
	.about-page .ab-personal,
	.about-page .ab-why {
		padding: 56px 0;
	}

	/* Section H2s scale via global mobile clamp */

	.about-page .ab-why-intro {
		margin-bottom: 32px;
	}

	.about-page .ab-bullet-card {
		padding: 14px 16px;
	}

	.about-page .ab-value-card {
		padding: 22px;
	}

	/* Slightly tighter CTA banner on small phones */
	.about-page .ab-cta-banner {
		padding: 48px 0;
	}

	/* ab-cta-h2 scales via global mobile clamp */

	.about-page .ab-hero-cta {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	.about-page .ab-cta-btn {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* ── Responsive: 374px (smallest common viewport) ── */
@media (max-width: 374px) {
	.about-page .ab-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Normalise asymmetric padding and trim further on tiny screens */
	.about-page .ab-hero {
		padding: 36px 0;
	}

	/* Scale h1 down more aggressively at the very smallest viewports */
	.about-page .ab-hero-h1 {
		font-size: clamp(1.75rem, 7.5vw, 1.875rem);
	}

	/* 2×2 stats grid: tighten the gap at very narrow viewports */
	.about-page .ab-stats-inner {
		gap: 16px;
	}

	.about-page .ab-value-card,
	.about-page .ab-bullet-card {
		padding: 12px 14px;
	}

	.about-page .ab-story-section,
	.about-page .ab-approach,
	.about-page .ab-personal,
	.about-page .ab-why {
		padding: 40px 0;
	}

	/* Trim CTA banner slightly tighter than content sections */
	.about-page .ab-cta-banner {
		padding: 36px 0;
	}
}

/* ============================================================
   Entity Quick Nav — below hero
   ============================================================ */
.about-page .ab-entity-nav {
	border-top: 1px solid rgba(255,255,255,0.06);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	background: rgba(255,255,255,0.02);
}

.about-page .ab-entity-nav-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	padding: 14px 0;
	font-size: 13px;
	color: rgba(255,255,255,0.55);
}

.about-page .ab-entity-nav-inner a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	transition: color 0.15s;
}

.about-page .ab-entity-nav-inner a:hover {
	color: #c4ee18;
}

/* ============================================================
   Services Link Block — above CTA
   ============================================================ */
.about-page .ab-services-link-section {
	padding: 72px 0;
	background: #0d0d0d;
}

.about-page .ab-service-links-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px 32px;
}

.about-page .ab-service-links-list li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.about-page .ab-service-links-list a {
	color: rgba(255,255,255,0.8);
	text-decoration: none;
	font-size: 15px;
	transition: color 0.15s;
}

.about-page .ab-service-links-list a:hover {
	color: #c4ee18;
}

@media (max-width: 767px) {
	.about-page .ab-entity-nav-inner {
		gap: 6px 14px;
		font-size: 12px;
	}

	.about-page .ab-service-links-list {
		grid-template-columns: 1fr;
	}
}