/**
 * Hakkımızda sayfası (AKBULAK-08) — kaynak: markaliste-twin-kit-1.0 `components/about.css`
 * (üst yüzey, hikâye, vizyon/misyon imza paneli, kimlik triptiği). Geometri korunur: kakao üst yüzey +
 * sağda asimetrik adaçayı yüzey, köşe çizgili panel, tek yeşil hatla bağlı üçlü kart.
 *
 * Akbulak uyarlamaları:
 *  - Altın hat/baklava/köşe → yeşil rolü (`--color-accent-on-dark` koyu yüzeyde, `--color-accent-on-light` çizgi/dolgu,
 *    `--color-green-ink` açık yüzeyde küçük metin); petrol/lacivert → kakao ailesi.
 *  - Yıl rayı, "rakamlarla biz" ve yönetim kurulu yok (doğrulanmış içerik yok); hikâyede ray yerine kısa yeşil çizgi.
 *  - Kaynakta bilinçli kaldırılmış giriş animasyonları geri eklenmez; sayfada yalnız hover rengi vardır.
 *  - AKBULAK-07 başlık rol sistemi: kategori etiketi (yeşil, küçük, ağır) → display başlık → hafif gövde.
 *  - Yükseklik sabitlenmez; metin uzadıkça bölümler büyür, metin kesilmez, font küçültülmez.
 */

/* =========================================================
   1. Üst yüzey (AKBULAK-08-R1 güçlendirildi)
   Sol: kategori rozeti → büyük başlık → yeşil imza çizgisi → italik destek cümlesi, asimetrik köşe çerçevesi içinde.
   Alt: ticaret ağı hattı sol çerçeveden başlar, çapraz kesimi aşar ve sağdaki logonun altındaki düğümde biter (sol ↔ sağ ilişkisi).
   Hat metnin ARKASINDAN geçmez: metin bloğunun altında koşar. Kullanılmayan kakao alana desen basılmaz.
   ========================================================= */

.brandbase-about-hero {
	--about-pad: max(var(--gutter-page), calc((100% - 1280px) / 2));
	--about-logo-w: min(26vw, 380px);

	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column-reverse;
	background: var(--gradient-brand-dark);
}

.brandbase-about-hero.has-image {
	flex-direction: column;
}

.brandbase-about-hero__field {
	position: relative;
}

.brandbase-about-hero__art {
	position: relative;
	height: clamp(110px, 30vw, 170px);
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-ice-100) 0%, var(--color-porcelain) 100%);
	clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
}

.brandbase-about-hero__mark {
	position: absolute;
	right: 6%;
	bottom: 12%;
	width: clamp(120px, 38vw, 200px);
	height: auto;
	pointer-events: none;
	user-select: none;
}

.brandbase-about-hero__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.brandbase-about-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 62%, var(--color-blue-800) 100%);
	pointer-events: none;
}

.brandbase-about-hero__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* ---- Ticaret ağı hattı: mobilde metin bloğunun altında yatay hat ---- */

.brandbase-about-hero__network {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 14px;
	margin: 0 var(--gutter-page) 1.375rem;
}

.brandbase-about-hero.has-image .brandbase-about-hero__network {
	display: none;
}

.brandbase-about-hero__seg {
	flex: 1 1 auto;
	height: 2px;
	background: var(--color-accent-on-dark);
	opacity: 0.7;
	-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 14px);
	mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 14px);
}

.brandbase-about-hero__node {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent-on-dark);
}

.brandbase-about-hero__node--start {
	width: 14px;
	height: 14px;
	background: transparent;
	border: 1.5px solid var(--color-accent-on-dark);
	box-shadow: inset 0 0 0 3px var(--color-blue-800), inset 0 0 0 10px var(--color-accent-on-dark);
}

.brandbase-about-hero__node--end {
	width: 14px;
	height: 14px;
	background: var(--color-accent-on-dark);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-on-dark) 35%, transparent);
}

.brandbase-about-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(1.75rem, 6vw, 2.25rem) 1.125rem;
}

/* Sol metin alanı: iki köşe L'si (sol üst + sağ alt) — kaynak ailenin "çerçeve değil hat" tekniği. */
.brandbase-about-hero__content {
	position: relative;
	width: fit-content;
	max-width: min(600px, 100%);
	padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem) clamp(1.125rem, 3.4vw, 1.5rem);
}

.brandbase-about-hero__content::before,
.brandbase-about-hero__content::after {
	content: "";
	position: absolute;
	width: clamp(30px, 6vw, 52px);
	height: clamp(30px, 6vw, 52px);
	pointer-events: none;
}

.brandbase-about-hero__content::before {
	top: 0;
	left: 0;
	border-top: 1.5px solid var(--color-accent-on-dark);
	border-left: 1.5px solid var(--color-accent-on-dark);
}

.brandbase-about-hero__content::after {
	right: 0;
	bottom: 0;
	border-right: 1.5px solid color-mix(in srgb, var(--color-accent-on-dark) 70%, transparent);
	border-bottom: 1.5px solid color-mix(in srgb, var(--color-accent-on-dark) 70%, transparent);
}

/* Kategori rozeti: ayrı tasarım rolü — adaçayı yüzeyli, kesik köşeli etiket (başlıktan açıkça ayrışır). */
.brandbase-about-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--space-4);
	padding: 0.4rem 0.95rem 0.4rem 0.75rem;
	background-color: var(--color-ice-100);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	line-height: 1.3;
	color: var(--color-green-ink);
}

.brandbase-about-hero__eyebrow-mark {
	flex: none;
	width: 7px;
	height: 7px;
	background-color: var(--color-accent-on-light);
	transform: rotate(45deg);
}

.brandbase-about-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(3rem, 13vw, 4rem);
	line-height: 1;
	letter-spacing: -0.012em;
	color: var(--color-white);
	text-wrap: balance;
}

.brandbase-about-hero__line {
	position: relative;
	display: block;
	width: clamp(120px, 22vw, 220px);
	height: 4px;
	margin: var(--space-4) 0 var(--space-4);
}

.brandbase-about-hero__line::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.5px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, var(--color-accent-on-dark) 0%, var(--color-accent-on-dark) 30%, color-mix(in srgb, var(--color-accent-on-dark) 30%, transparent) 100%);
}

.brandbase-about-hero__line-node {
	position: absolute;
	right: -2px;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	transform: translateY(-50%);
	background-color: var(--color-accent-on-dark);
}

/* Destek cümlesi: başlıktan çok daha küçük, italik ve hafif — ölçek/ağırlık/boşluk farkı belirgin. */
.brandbase-about-hero__statement {
	margin: 0;
	max-width: 34ch;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.125rem, 3.6vw, 1.3125rem);
	line-height: 1.42;
	color: color-mix(in srgb, var(--color-white) 92%, var(--color-ice-100));
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.brandbase-about-hero,
	.brandbase-about-hero.has-image {
		flex-direction: row;
		align-items: center;
		min-height: clamp(420px, 28vw, 500px);
	}

	.brandbase-about-hero__field {
		position: absolute;
		inset: 0;
	}

	.brandbase-about-hero__art {
		position: absolute;
		inset: 0 0 0 58%;
		height: auto;
		clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
	}

	.brandbase-about-hero__mark {
		right: 9%;
		top: 50%;
		bottom: auto;
		transform: translateY(-58%);
		width: var(--about-logo-w);
	}

	.brandbase-about-hero__media {
		position: absolute;
		aspect-ratio: auto;
		inset: 0 0 0 50%;
		clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
	}

	.brandbase-about-hero__media::after {
		background: linear-gradient(100deg, var(--color-blue-800) 0%, color-mix(in srgb, var(--color-blue-800) 70%, transparent) 18%, transparent 46%);
	}

	/* Hat: sol çerçeve hizasından (konteyner sol kenarı) başlar, çapraz kesimde (%58) halka düğümle geçer, logonun altındaki dolu düğümde biter. */
	.brandbase-about-hero__network {
		position: absolute;
		inset-inline: 0;
		bottom: clamp(30px, 3.4vw, 46px);
		display: block;
		margin: 0;
	}

	.brandbase-about-hero__network > * {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.brandbase-about-hero__node--start {
		left: var(--about-pad);
	}

	.brandbase-about-hero__seg--dark {
		left: calc(var(--about-pad) + 22px);
		right: 42%;
	}

	.brandbase-about-hero__node--mid {
		left: 58%;
		width: 12px;
		height: 12px;
		margin-left: -6px;
		background: var(--color-porcelain);
		border: 1.5px solid var(--color-accent-on-light);
	}

	.brandbase-about-hero__seg--light {
		left: calc(58% + 14px);
		right: calc(9% + var(--about-logo-w) / 2 + 12px);
		background: var(--color-accent-on-light);
		opacity: 0.85;
	}

	.brandbase-about-hero__node--end {
		right: calc(9% + var(--about-logo-w) / 2 - 7px);
		background: var(--color-accent-on-light);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-on-light) 28%, transparent);
	}

	.brandbase-about-hero__inner {
		padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(4.25rem, 6.4vw, 5.5rem);
	}

	.brandbase-about-hero__content {
		max-width: min(580px, 100%);
		padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.75rem, 2.8vw, 2.75rem) clamp(1.5rem, 2.2vw, 2.25rem);
	}

	.brandbase-about-hero__title {
		font-size: clamp(3.75rem, 5.4vw, 5.25rem);
	}

	.brandbase-about-hero__statement {
		font-size: clamp(1.25rem, 1.6vw, 1.4375rem);
	}
}

/* =========================================================
   2. Kurumsal anlatım — solda sabit başlık, sağda paragraflar
   ========================================================= */

.brandbase-about-story {
	background-color: var(--color-white);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.brandbase-about-story__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.brandbase-about-story__heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 3.4vw, 2.375rem);
	line-height: 1.14;
	color: var(--color-blue-800);
	max-width: 14ch;
}

/* Yeşil rol: başlığın altında kısa çizgi + küçük baklava (yıl rayının yerine). */
.brandbase-about-story__rail-line {
	position: relative;
	display: block;
	width: 56px;
	height: 2px;
	margin-top: var(--space-4);
	background: linear-gradient(90deg, var(--color-accent-on-light), color-mix(in srgb, var(--color-accent-on-light) 25%, transparent));
}

.brandbase-about-story__rail-line::after {
	content: "";
	position: absolute;
	left: -1px;
	top: 50%;
	width: 7px;
	height: 7px;
	background-color: var(--color-accent-on-light);
	transform: translateY(-50%) rotate(45deg);
}

.brandbase-about-story__text {
	display: flex;
	flex-direction: column;
	gap: clamp(1.125rem, 2vw, 1.625rem);
	min-width: 0;
}

/* Giriş paragrafı: display italik olmayan büyük satır + yeşil kenar çizgisi; devamı gövde rolünde. */
.brandbase-about-story__lead {
	max-width: 60ch;
	margin: 0;
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-accent-on-light);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.25rem, 1.9vw, 1.5rem);
	line-height: 1.42;
	color: var(--color-ink);
	text-wrap: pretty;
}

.brandbase-about-story__paragraph {
	max-width: 62ch;
	margin: 0;
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-line-blue);
	font-family: var(--font-sans);
	font-size: clamp(1rem, 1.1vw, 1.0625rem);
	line-height: 1.72;
	color: var(--color-slate);
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.brandbase-about-story__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(3rem, 6vw, 5rem);
	}

	.brandbase-about-story__rail {
		flex: 0 0 clamp(230px, 22vw, 290px);
		position: sticky;
		top: clamp(6rem, 9vw, 8rem);
	}

	.brandbase-about-story__text {
		flex: 1 1 auto;
	}
}

/* =========================================================
   3. Misyon / vizyon bölümleri (AKBULAK-09)
   Her biri aynı ailenin iki parçası: renkli başlık yüzeyi (Misyon = kakao, Vizyon = yeşil; sağ altı kesik) + açık gövde yüzeyi.
   Başlık yüzeyi ile gövde ilişkisi: gövdenin sol çizgisi, madde işaretleri ve giriş cümlesi başlık yüzeyinin rengini taşır.
   Yükseklik sabitlenmez; metin uzadıkça yüzey ve bölüm büyür. Mobilde de renkli başlık yüzeyi korunur.
   ========================================================= */

.brandbase-about-panel {
	--panel-tone: var(--color-blue-800);
	--panel-tone-ink: var(--color-blue-800);
	--panel-head: var(--gradient-brand-dark);

	background: color-mix(in srgb, var(--color-ice-100) 62%, var(--color-white));
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.brandbase-about-panel--vision {
	--panel-tone: var(--color-accent-on-light);
	--panel-tone-ink: var(--color-green-ink);
	--panel-head: linear-gradient(135deg, var(--color-green-ink) 0%, var(--color-accent-on-light) 100%);
}

.brandbase-about-panel + .brandbase-about-panel {
	padding-top: 0;
}

.brandbase-about-panel__frame {
	position: relative;
	background: var(--color-white);
	border: 1px solid var(--color-line-blue);
	box-shadow: var(--shadow-soft);
}

/* Başlık yüzeyi: tam genişlikte renkli bant, sağ alt köşesi kesik; sol kenarda ince açık işaret çizgisi. */
.brandbase-about-panel__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: clamp(3.5rem, 6vw, 4.5rem);
	margin: -1px -1px 0;
	padding: 0.75rem clamp(2.5rem, 7vw, 6rem) 0.75rem clamp(1.125rem, 2.8vw, 2rem);
	background: var(--panel-head);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 28px) 100%, 0 100%);
}

.brandbase-about-panel__head-mark {
	flex: none;
	width: 9px;
	height: 9px;
	background: var(--color-accent-on-dark);
	transform: rotate(45deg);
}

.brandbase-about-panel__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 2.125rem);
	line-height: 1.12;
	letter-spacing: -0.005em;
	color: var(--color-white);
}

/* Başlıktan sağa uzanan ince hat (hero ağ hattıyla aynı dil): metne değmez, yalnız başlığın sağındaki boşlukta durur. */
.brandbase-about-panel__head-line {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 6px;
}

.brandbase-about-panel__head-line::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 1.5px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-on-dark) 80%, transparent) 0%, transparent 100%);
}

.brandbase-about-panel__head-node {
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: var(--color-accent-on-dark);
}

.brandbase-about-panel__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 1.75rem);
	padding: clamp(1.25rem, 3vw, 2rem) clamp(1.125rem, 2.8vw, 2rem) clamp(1.5rem, 3.2vw, 2.25rem);
}

.brandbase-about-panel__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--panel-tone);
}

.brandbase-about-panel__body {
	margin: 0;
	max-width: 58ch;
	font-family: var(--font-sans);
	font-size: clamp(1rem, 1.35vw, 1.0625rem);
	line-height: 1.7;
	color: var(--color-ink);
	text-wrap: pretty;
}

.brandbase-about-panel__side {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.6vw, 1rem);
	min-width: 0;
}

.brandbase-about-panel__intro {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.3;
	color: var(--panel-tone-ink);
}

.brandbase-about-panel__closing {
	margin: var(--space-1) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid color-mix(in srgb, var(--panel-tone) 40%, transparent);
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.3;
	color: var(--panel-tone-ink);
}

/* Maddeler: eşit aralıklı, her biri başlık yüzeyinin renginde elmas işaretle ve ince alt ayırıcıyla hizalı. */
.brandbase-about-panel__points {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.brandbase-about-panel__points li {
	position: relative;
	padding: clamp(0.5rem, 1.2vw, 0.75rem) 0 clamp(0.5rem, 1.2vw, 0.75rem) var(--space-5);
	border-bottom: 1px solid color-mix(in srgb, var(--color-line-blue) 80%, transparent);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(0.9375rem, 1.2vw, 1rem);
	line-height: 1.58;
	color: var(--color-slate);
}

.brandbase-about-panel__points li:last-child {
	border-bottom: 0;
}

.brandbase-about-panel__points li::before {
	content: "";
	position: absolute;
	top: calc(clamp(0.5rem, 1.2vw, 0.75rem) + 0.6em);
	left: 0.125rem;
	width: 7px;
	height: 7px;
	background: var(--panel-tone);
	transform: rotate(45deg);
}

@media (min-width: 900px) {
	.brandbase-about-panel__content.has-points {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		column-gap: clamp(2rem, 4vw, 3.5rem);
	}
}

/* =========================================================
   4. Çalışma biçimi — tek yeşil hatla üstten bağlı üçlü kart
   ========================================================= */

.brandbase-about-approach {
	background-color: var(--color-porcelain);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.brandbase-about-approach__heading {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	line-height: 1.16;
	color: var(--color-blue-800);
}

.brandbase-about-approach__heading::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: var(--space-2);
	background: var(--color-accent-on-light);
}

.brandbase-about-approach__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	background-color: var(--color-line-blue);
	padding-top: 3px;
	box-shadow: var(--shadow-soft);
}

.brandbase-about-approach__grid::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-accent-on-light) 0%, color-mix(in srgb, var(--color-accent-on-light) 55%, transparent) 60%, color-mix(in srgb, var(--color-accent-on-light) 25%, transparent) 100%);
}

.brandbase-about-approach__item {
	position: relative;
	padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.5rem, 3.4vw, 2rem);
	transition: background-color 280ms var(--ease-out);
}

.brandbase-about-approach__item--1 {
	background: var(--gradient-brand-dark);
}

.brandbase-about-approach__item--2 {
	background-color: var(--color-ice-100);
}

.brandbase-about-approach__item--3 {
	background-color: var(--color-stone-100);
}

.brandbase-about-approach__index {
	display: block;
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.5rem, 4.4vw, 3.25rem);
	line-height: 1;
}

.brandbase-about-approach__item--1 .brandbase-about-approach__index {
	color: color-mix(in srgb, var(--color-white) 28%, transparent);
}

.brandbase-about-approach__item--2 .brandbase-about-approach__index,
.brandbase-about-approach__item--3 .brandbase-about-approach__index {
	color: color-mix(in srgb, var(--color-accent-on-light) 45%, transparent);
}

.brandbase-about-approach__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: clamp(1.125rem, 1.7vw, 1.25rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.brandbase-about-approach__item--1 .brandbase-about-approach__title {
	color: var(--color-white);
}

.brandbase-about-approach__item--2 .brandbase-about-approach__title,
.brandbase-about-approach__item--3 .brandbase-about-approach__title {
	color: var(--color-green-ink);
}

.brandbase-about-approach__body {
	margin: 0;
	max-width: 42ch;
	font-family: var(--font-sans);
	font-size: clamp(0.9375rem, 1.1vw, 1rem);
	line-height: 1.66;
}

.brandbase-about-approach__item--1 .brandbase-about-approach__body {
	color: color-mix(in srgb, var(--color-white) 90%, var(--color-ice-100));
}

.brandbase-about-approach__item--2 .brandbase-about-approach__body,
.brandbase-about-approach__item--3 .brandbase-about-approach__body {
	color: var(--color-slate);
}

@media (min-width: 900px) {
	.brandbase-about-approach__grid {
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	}

	.brandbase-about-approach__item {
		padding: clamp(2rem, 2.6vw, 2.5rem) clamp(1.75rem, 2.2vw, 2.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.brandbase-about-approach__item {
		transition: none;
	}
}