/* ==========================================================================
   About Page Styles
   ========================================================================== */

/* === SHARED HEADINGS === */
.about-head{
	text-align:center;
	max-width:640px;
	margin:0 auto 56px;
}
.about-eyebrow{
	display:inline-block;
	font-size:12px;
	font-weight:700;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--primary);
	background:var(--primary-100);
	padding:6px 14px;
	border-radius:999px;
	margin-bottom:16px;
}
.about-section-title{
	font-size:32px;
	font-weight:800;
	letter-spacing:-0.01em;
	color:var(--ink);
	line-height:1.2;
	margin-bottom:12px;
}
.about-section-sub{
	font-size:15px;
	color:var(--gray-500);
	line-height:1.6;
}

/* === HERO === */
.about-hero{
	background:linear-gradient(180deg, #F7F7FC 0%, #ffffff 100%);
	padding:60px 0 64px;
}
.about-hero-grid{
	display:grid;
	grid-template-columns:1.05fr 0.95fr;
	gap:56px;
	align-items:center;
}
.about-hero-copy h1{
	font-size:42px;
	font-weight:800;
	line-height:1.16;
	letter-spacing:-0.02em;
	color:var(--ink);
	margin-bottom:20px;
}
.about-lead{
	font-size:16.5px;
	color:var(--gray-600);
	line-height:1.65;
	max-width:500px;
	margin-bottom:30px;
}

/* hero visual */
.about-hero-visual{
	position:relative;
	padding:10px 0;
}
.about-dots{
	position:absolute;
	top:-10px;
	right:6px;
	width:74px;
	height:74px;
	background-image:radial-gradient(circle, #d4d4de 1.6px, transparent 1.6px);
	background-size:11px 11px;
	opacity:.55;
	z-index:1;
}
.about-manifesto-card{
	background:#fff;
	border:1px solid var(--border);
	border-radius:20px;
	box-shadow:var(--shadow-lg);
	padding:26px 24px 28px;
	position:relative;
	z-index:2;
}
.about-manifesto-top{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:20px;
}
.about-manifesto-top .brand-mark{
	width:42px;
	height:42px;
	border-radius:11px;
	background:var(--gradient);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 10px rgba(91,79,232,0.32);
	flex-shrink:0;
}
.about-manifesto-top .brand-mark svg{
	fill:currentColor;
}
.about-manifesto-name{
	font-size:15px;
	font-weight:800;
	color:var(--ink);
	line-height:1.2;
}
.about-manifesto-tag{
	font-size:11.5px;
	color:var(--gray-500);
	font-weight:500;
}
.about-manifesto-quote{
	font-size:17px;
	font-weight:700;
	line-height:1.45;
	color:var(--ink);
	letter-spacing:-0.01em;
	margin-bottom:22px;
	padding-bottom:22px;
	border-bottom:1px solid var(--border-soft);
}
.about-manifesto-list{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.about-manifesto-list li{
	display:flex;
	gap:13px;
	align-items:center;
}
.about-manifesto-ic{
	width:36px;
	height:36px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
.about-manifesto-ic svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.about-manifesto-ic.green{background:var(--fixed-bg); color:#16A34A;}
.about-manifesto-ic.blue{background:var(--open-bg); color:#2563EB;}
.about-manifesto-ic.purple{background:var(--investigating-bg); color:#6D28D9;}
.about-manifesto-list strong{
	display:block;
	font-size:13.5px;
	font-weight:700;
	color:var(--ink);
	line-height:1.3;
}
.about-manifesto-list small{
	display:block;
	font-size:12px;
	color:var(--gray-500);
	margin-top:2px;
}
.about-float{
	position:absolute;
	background:#fff;
	border:1px solid var(--border);
	border-radius:14px;
	box-shadow:var(--shadow-md);
	padding:12px 16px;
	z-index:3;
}
.about-float .value{
	font-size:19px;
	font-weight:800;
	color:var(--ink);
	line-height:1.1;
}
.about-float .label{
	font-size:11px;
	color:var(--gray-500);
	font-weight:500;
	margin-top:2px;
}
.about-float-free{top:-6px; left:-14px;}
.about-float-open{bottom:18px; right:-14px;}

/* === STORY === */
.about-story{
	padding:84px 0;
}
.about-story-grid{
	display:grid;
	grid-template-columns:1.25fr 0.75fr;
	gap:56px;
	align-items:center;
}
.about-story-text .about-eyebrow{margin-bottom:14px;}
.about-story-text .about-section-title{
	font-size:30px;
	text-align:left;
	margin-bottom:18px;
}
.about-story-text p{
	font-size:15px;
	color:var(--gray-600);
	line-height:1.7;
	margin-bottom:16px;
}
.about-story-signs{
	display:flex;
	gap:14px;
	flex-wrap:wrap;
	margin-top:26px;
}
.about-sign{
	flex:1 1 0;
	min-width:130px;
	background:#fff;
	border:1px solid var(--border-soft);
	border-radius:14px;
	padding:18px 18px;
	box-shadow:var(--shadow-sm);
}
.about-sign-num{
	font-size:22px;
	font-weight:800;
	color:var(--primary);
	line-height:1;
	margin-bottom:8px;
}
.about-sign-label{
	font-size:12.5px;
	color:var(--gray-600);
	line-height:1.45;
	font-weight:500;
}
.about-story-aside{position:relative;}
.about-aside-card{
	background:linear-gradient(160deg, var(--primary-50) 0%, #fff 100%);
	border:1px solid var(--border-soft);
	border-radius:20px;
	padding:30px 28px;
	box-shadow:var(--shadow-md);
}
.about-aside-quote svg{
	width:34px;
	height:34px;
	color:var(--primary);
	opacity:.85;
	margin-bottom:14px;
}
.about-aside-quote p{
	font-size:16px;
	font-weight:600;
	line-height:1.55;
	color:var(--ink);
	letter-spacing:-0.01em;
}
.about-aside-foot{
	display:flex;
	align-items:center;
	gap:9px;
	margin-top:22px;
	padding-top:20px;
	border-top:1px solid var(--border-soft);
	font-size:13px;
	font-weight:600;
	color:var(--gray-600);
}
.about-aside-mark{
	width:28px;
	height:28px;
	border-radius:8px;
	background:var(--gradient);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
.about-aside-mark svg{
	fill:currentColor;
}

/* === VALUES === */
.about-values{
	background:var(--bg-soft);
	padding:84px 0;
}
.about-values-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:24px;
}
.about-value-card{
	background:#fff;
	border:1px solid var(--border-soft);
	border-radius:16px;
	padding:28px 24px;
	box-shadow:var(--shadow-sm);
	transition:transform .2s ease, box-shadow .2s ease;
}
.about-value-card:hover{
	transform:translateY(-3px);
	box-shadow:var(--shadow-md);
}
.about-value-icon{
	width:52px;
	height:52px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:20px;
}
.about-value-icon svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.about-value-icon.purple{background:var(--primary-100); color:var(--primary);}
.about-value-icon.green{background:var(--fixed-bg); color:#16A34A;}
.about-value-icon.orange{background:var(--pipeline-bg); color:var(--pipeline-text);}
.about-value-icon.blue{background:var(--open-bg); color:#2563EB;}
.about-value-card h4{
	font-size:16px;
	font-weight:700;
	color:var(--ink);
	margin-bottom:10px;
}
.about-value-card p{
	font-size:13.5px;
	color:var(--gray-600);
	line-height:1.6;
}

/* === STATS === */
.about-stats{
	padding:84px 0;
}
.about-stats .stats-grid{
	gap:20px;
}

/* === APPROACH === */
.about-approach{
	background:linear-gradient(180deg, var(--primary-50) 0%, #ffffff 100%);
	padding:84px 0;
}
.about-approach-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:24px;
}
.about-approach-card{
	position:relative;
	background:#fff;
	border:1px solid var(--border-soft);
	border-radius:16px;
	padding:30px 26px;
	box-shadow:var(--shadow-sm);
}
.about-approach-num{
	position:absolute;
	top:22px;
	right:26px;
	font-size:30px;
	font-weight:800;
	color:var(--primary-50);
	line-height:1;
}
.about-approach-icon{
	width:54px;
	height:54px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:20px;
}
.about-approach-icon svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.about-approach-icon.teal{background:var(--fixed-bg); color:#0891B2;}
.about-approach-icon.indigo{background:#eae9ff; color:#6366f1;}
.about-approach-icon.amber{background:var(--waiting-bg); color:var(--waiting-text);}
.about-approach-card h4{
	font-size:16px;
	font-weight:700;
	color:var(--ink);
	margin-bottom:10px;
}
.about-approach-card p{
	font-size:13.5px;
	color:var(--gray-600);
	line-height:1.6;
}

/* === CTA === */
.about-cta{
	padding:0 0 84px;
	background:linear-gradient(180deg, #ffffff 0%, var(--primary-50) 100%);
}
.about-cta-box{
	background:var(--cta-bg);
	border-radius:20px;
	padding:40px 46px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	flex-wrap:wrap;
}
.about-cta-left{
	display:flex;
	align-items:center;
	gap:22px;
}
.about-cta-icon{
	width:60px;
	height:60px;
	border-radius:50%;
	background:var(--gradient);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	box-shadow:0 8px 20px rgba(91,79,232,0.32);
}
.about-cta-icon svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.about-cta-left h3{
	font-size:20px;
	font-weight:800;
	color:var(--ink);
	margin-bottom:6px;
}
.about-cta-left p{
	font-size:14px;
	color:var(--gray-600);
}
.about-cta-right{text-align:right;}
.about-cta-right .note{
	margin-top:10px;
	font-size:12.5px;
	color:var(--primary);
	font-weight:500;
}

/* === SUSTAINABILITY NOTE === */
.about-sustainability{
	display:flex;
	gap:18px;
	align-items:flex-start;
	max-width:760px;
	margin:48px auto 0;
	padding:24px 26px;
	background:var(--primary-50);
	border:1px solid rgba(91,79,232,0.16);
	border-radius:var(--radius-lg);
}
.about-sustainability-icon{
	width:42px;
	height:42px;
	border-radius:50%;
	background:var(--gradient);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	box-shadow:0 8px 20px rgba(91,79,232,0.28);
}
.about-sustainability-icon svg{width:22px; height:22px;}
.about-sustainability-body h4{
	font-size:17px;
	font-weight:800;
	color:var(--ink);
	margin-bottom:6px;
	letter-spacing:-0.01em;
}
.about-sustainability-body p{
	font-size:14px;
	color:var(--gray-600);
	line-height:1.65;
	margin:0;
}

@media (max-width: 640px){
	.about-sustainability{flex-direction:column; padding:22px 20px;}
}

/* === RESPONSIVE === */
@media (max-width: 980px){
	.about-hero-grid{grid-template-columns:1fr; gap:48px;}
	.about-hero-visual{max-width:520px; margin:0 auto; order:-1;}
	.about-hero-copy h1{font-size:36px;}
	.about-story-grid{grid-template-columns:1fr; gap:36px;}
	.about-values-grid{grid-template-columns:repeat(2,1fr);}
	.about-approach-grid{grid-template-columns:1fr;}
	.about-section-title{font-size:28px;}
}
@media (max-width: 640px){
	.about-hero{padding:40px 0 52px;}
	.about-hero-copy h1{font-size:30px;}
	.about-story,
	.about-values,
	.about-stats,
	.about-approach{padding:56px 0;}
	.about-section-title{font-size:24px;}
	.about-head{margin-bottom:40px;}
	.about-values-grid{grid-template-columns:1fr;}
	.about-story-signs{flex-direction:column;}
	.about-sign{min-width:0;}
	.about-cta-box{flex-direction:column; align-items:flex-start; padding:28px 24px;}
	.about-cta-right{align-self:stretch; text-align:left;}
	.about-cta-right .btn{width:100%;}
	.about-float-free{left:-4px;}
	.about-float-open{right:-4px;}
	.about-manifesto-quote{font-size:16px;}
}