/* Despre noi (/despre-noi) — every rule is scoped to .cs-about */
.cs-about {
	--ink: #1e1e1f;
	--text: #4f4f50;
	--muted: #7d7d7d;
	--red: #b1231b;
	--gold: #c9a25e;
	--warm: #f8f4ee;
	--warm-2: #f2ece3;
	--line: #e9e3da;
	--serif: 'Prata', Georgia, 'Times New Roman', serif;
	--sans: 'Lato', Arial, Helvetica, sans-serif;
	--script: 'tuesday', Georgia, serif;
	--gutter: clamp(16px, 3.2vw, 40px);
	--section: clamp(36px, 5.4vw, 76px);
	--gap: clamp(20px, 2.2vw, 28px);
	--split-gap: clamp(28px, 4vw, 56px);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.7;
	overflow-x: clip;
}

.cs-about *,
.cs-about *::before,
.cs-about *::after {
	box-sizing: border-box;
}

.cs-about-wrap {
	width: 100%;
	max-width: calc(1280px + 2 * var(--gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.cs-about a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: rgba(30, 30, 31, 0.3);
	text-underline-offset: 0.18em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.cs-about a:hover,
.cs-about a:focus-visible {
	color: var(--red);
	text-decoration-color: currentColor;
}

.cs-about p {
	margin: 0 0 1em;
}

.cs-about p:last-child {
	margin-bottom: 0;
}

.cs-about h1,
.cs-about h2,
.cs-about h3 {
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}

.cs-about h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(26px, 2.7vw, 38px);
	line-height: 1.22;
	margin-bottom: 0.55em;
}

.cs-about h3 {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
	margin-bottom: 0.6em;
}

.cs-about .breadcrumb {
	margin: 0;
	padding: 6px 0 14px;
	background: none;
	text-align: left;
}

.cs-about-kicker {
	margin: 0 0 18px !important;
	color: var(--red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.24em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Shared two-column split */
.cs-about-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--split-gap);
	align-items: center;
}

.cs-about-section {
	padding-top: var(--section);
	padding-bottom: var(--section);
}

.cs-about-head {
	max-width: 760px;
	margin: 0 auto clamp(22px, 2.8vw, 38px);
	text-align: center;
}

.cs-about-head p {
	color: var(--muted);
	font-size: 17px;
}

/* Buttons: theme .btn / .btn-primary, plus an outline variant */
.cs-about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.cs-about .cs-about-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	text-decoration: none;
	white-space: normal;
	text-align: center;
}

.cs-about .cs-about-btn.btn-primary,
.cs-about .cs-about-btn.btn-primary:focus {
	color: #fff;
}

.cs-about .cs-about-btn--outline,
.cs-about .cs-about-btn--outline:focus {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
}

.cs-about .cs-about-btn--outline:hover {
	background: var(--ink);
	color: #fff;
}

.cs-about-link {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--red) !important;
	text-decoration: none !important;
}

.cs-about-link:hover,
.cs-about-link:focus-visible {
	text-decoration: underline !important;
}

/* Product packshots sit on the warm ground; multiply drops the white studio background */
.cs-about-packshot {
	margin: 0;
}

.cs-about-packshot__frame {
	width: 100%;
}

.cs-about-packshot__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.cs-about-packshot figcaption {
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
}

.cs-about-packshot figcaption a {
	color: var(--muted);
	text-decoration: none;
}

/* 1 · Hero */
.cs-about-hero {
	background: linear-gradient(180deg, #fff 0, var(--warm) 22%, var(--warm) 100%);
	padding: clamp(16px, 2.4vw, 32px) 0 clamp(28px, 4vw, 52px);
}

.cs-about-hero__title {
	font-family: var(--serif);
	font-weight: 400;
	margin-bottom: 22px !important;
}

.cs-about-hero__brand {
	display: block;
	font-size: clamp(38px, 4.6vw, 64px);
	line-height: 1.05;
	margin-bottom: 12px;
}

.cs-about-hero__lead {
	display: block;
	max-width: 15em;
	font-size: clamp(22px, 2.3vw, 32px);
	line-height: 1.25;
}

.cs-about-hero__text {
	max-width: 33em;
	font-size: 17px;
}

/* 2 · Trust strip */
.cs-about-trust {
	margin-top: calc(var(--section) * 0.7);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, #fff 0, var(--warm) 50%, #fff 100%);
}

.cs-about-trust__list {
	list-style: none;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 420px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.cs-about-trust__list li {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

.cs-about-trust__list li + li {
	border-top: 1px solid var(--line);
}

.cs-about-trust__list img {
	width: 72px;
	height: 72px;
	padding: 8px;
	object-fit: contain;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #fff 0, #fbf6ec 60%, #f4ead6 100%);
	box-shadow: inset 0 0 0 1px rgba(201, 162, 94, 0.45), 0 4px 14px rgba(150, 110, 40, 0.12);
}

.cs-about-trust__list strong {
	display: block;
	margin-bottom: 2px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* Intro */
.cs-about-intro {
	padding-top: calc(var(--section) * 0.8);
}

.cs-about-intro__copy {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
	font-size: 17px;
	line-height: 1.75;
}

/* 3 · Story — mobile order: heading, image, copy, statement, signature */
.cs-about-story {
	padding-top: calc(var(--section) * 0.8);
}

.cs-about-story__grid {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cs-about-story__aside,
.cs-about-story__main {
	display: contents;
}

.cs-about-story__main h2 {
	order: 1;
	margin-bottom: 0;
}

.cs-about-story__media {
	order: 2;
	margin: 0;
	width: 100%;
	background: #111;
	overflow: hidden;
}

.cs-about-story__copy {
	order: 3;
}

.cs-about-story__sign {
	order: 4;
}

.cs-about-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cs-about-story__copy p {
	margin-bottom: 0.9em;
}

.cs-about-story__sign {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 16px 0 0;
	border-top: 1px solid var(--line);
}

.cs-about-story__note {
	margin: 0 !important;
	color: var(--ink);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
}

.cs-about-story__sign .cs-about-signature {
	align-self: flex-end;
}

.cs-about-signature {
	margin: 0 !important;
	font-family: var(--script);
	font-size: clamp(34px, 3.4vw, 46px);
	line-height: 1;
	color: var(--ink);
}

/* 4 · Offer cards */
.cs-about-offer {
	padding-top: 0;
}

.cs-about-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap);
}

.cs-about-card {
	display: grid;
	grid-template-rows: auto 1fr;
	background: #fff;
	border: 1px solid var(--line);
}

.cs-about-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--warm);
}

.cs-about-card__media > a:first-child {
	display: block;
	width: 100%;
	height: 100%;
}

.cs-about-card__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.cs-about-card__media--contain img {
	object-fit: contain;
	padding: 4% 4% 44px;
	mix-blend-mode: multiply;
	transition: transform 0.4s ease;
}

.cs-about-card__media--cover img {
	object-fit: cover;
	object-position: 50% 40%;
}

.cs-about-card:hover .cs-about-card__media--contain img {
	transform: scale(1.03);
}

.cs-about-card__body {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.4vw, 32px);
}

.cs-about-card__body h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(21px, 1.8vw, 25px);
	line-height: 1.25;
}

.cs-about-card__body p {
	flex: 1 1 auto;
	margin-bottom: 20px;
}

.cs-about-card__body .cs-about-link {
	align-self: flex-start;
}

.cs-about-card__product {
	position: absolute;
	right: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	padding: 4px 10px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--muted) !important;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none !important;
}

.cs-about-card__product:hover,
.cs-about-card__product:focus-visible {
	color: var(--ink) !important;
}

/* 5 · Why */
.cs-about-why {
	background: var(--warm);
}

.cs-about-reasons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px var(--gap);
}

.cs-about-reasons li {
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.cs-about-reasons__num {
	display: block;
	margin-bottom: 14px;
	font-family: var(--serif);
	font-size: clamp(34px, 3vw, 44px);
	line-height: 1;
	color: var(--gold);
}

.cs-about-reasons p {
	font-size: 15px;
}

/* 6 · Press carousel (native scroll-snap; arrows in the template script) */
.cs-about-carousel {
	--per: 1.12;
	--track-gap: 16px;
}

.cs-about-carousel__track {
	list-style: none;
	margin: 0;
	padding: 2px 2px 6px;
	display: flex;
	gap: var(--track-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2px;
	scrollbar-width: none;
}

.cs-about-carousel__track::-webkit-scrollbar {
	display: none;
}

.cs-about-carousel__track:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 4px;
}

.cs-about-press__card {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--track-gap)) / var(--per));
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 18px;
	background: var(--warm);
	border: 1px solid var(--line);
	scroll-snap-align: start;
}

.cs-about-press__logo {
	display: block;
	aspect-ratio: 3 / 1.25;
	margin-bottom: 14px;
	background: #fff;
	overflow: hidden;
}

.cs-about-press__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cs-about-press__outlet {
	margin: 0 0 6px !important;
	color: var(--red);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
}

.cs-about-press__card h3 {
	font-size: 15px;
	line-height: 1.4;
	margin-bottom: 8px;
}

.cs-about-press__card h3 a {
	text-decoration: none;
}

.cs-about-press__intro {
	flex: 1 1 auto;
	margin-bottom: 14px !important;
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.55;
}

.cs-about-press__card .cs-about-link {
	font-size: 13px;
}

.cs-about-carousel__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 22px;
}

.cs-about-carousel.is-static .cs-about-carousel__nav {
	display: none;
}

.cs-about .cs-about-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.cs-about .cs-about-carousel__btn:hover:not(:disabled) {
	background: var(--ink);
	color: #fff;
}

.cs-about .cs-about-carousel__btn:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

.cs-about .cs-about-carousel__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* 7 · Corporate band */
.cs-about-band {
	background: var(--warm-2);
	padding-top: clamp(36px, 5vw, 64px);
	padding-bottom: clamp(36px, 5vw, 64px);
}

.cs-about-band h2 {
	font-size: clamp(28px, 3vw, 42px);
}

.cs-about-band__sub {
	display: block;
}

.cs-about-band__copy p {
	max-width: 34em;
}

/* 8 · FAQ */
.cs-about-faq__list {
	max-width: 900px;
	margin: 0 auto;
	border-top: 1px solid var(--line);
}

.cs-about-faq__item {
	border-bottom: 1px solid var(--line);
}

.cs-about-faq__item summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20px;
	gap: 16px;
	align-items: center;
	min-height: 58px;
	padding: 14px 4px;
	list-style: none;
	cursor: pointer;
	color: var(--ink);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.45;
}

.cs-about-faq__item summary::-webkit-details-marker {
	display: none;
}

.cs-about-faq__item summary::after {
	content: "";
	justify-self: center;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.2s ease;
}

.cs-about-faq__item[open] summary {
	color: var(--red);
}

.cs-about-faq__item[open] summary::after {
	transform: translateY(2px) rotate(225deg);
}

.cs-about-faq__item summary:hover {
	color: var(--red);
}

.cs-about-faq__item summary:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

.cs-about-faq__answer {
	padding: 0 40px 18px 4px;
	max-width: 820px;
}

/* 9 · Team */
.cs-about-team {
	padding-top: 0;
}

.cs-about-team__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	aspect-ratio: 4 / 3;
	padding: 32px;
	background: var(--warm);
	border: 1px solid var(--line);
	text-align: center;
}

.cs-about-team__logo {
	width: min(78%, 340px);
	height: auto;
}

.cs-about-team__place {
	margin: 0 !important;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cs-about-team__contacts {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.cs-about-team__contacts li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.5;
}

.cs-about-team__contacts i {
	color: var(--gold);
	font-size: 16px;
}

.cs-about-team__contacts a {
	text-decoration: none;
	font-weight: 600;
}

/* ≥ 768 */
@media (min-width: 768px) {
	.cs-about-trust__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: none;
		padding-top: 0;
		padding-bottom: 0;
	}

	.cs-about-trust__list li {
		grid-template-columns: 68px minmax(0, max-content);
		justify-content: center;
		padding: 20px 14px;
	}

	.cs-about-trust__list img {
		width: 68px;
		height: 68px;
	}

	.cs-about-trust__list li + li {
		border-top: 0;
		border-left: 1px solid var(--line);
	}

	.cs-about-cards,
	.cs-about-reasons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs-about-carousel {
		--per: 2;
		--track-gap: 20px;
	}
}

/* ≥ 992 */
@media (min-width: 992px) {
	.cs-about-split--hero {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.cs-about-split--team {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.cs-about-story__grid {
		display: grid;
		grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
		gap: var(--split-gap);
		align-items: start;
	}

	.cs-about-story__aside {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.cs-about-story__main {
		display: block;
	}

	.cs-about-story__main h2 {
		margin-bottom: 0.5em;
	}

	.cs-about-split--band {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.cs-about-reasons {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ≥ 1024 */
@media (min-width: 1024px) {
	.cs-about-trust__list li {
		grid-template-columns: 76px minmax(0, max-content);
		gap: 18px;
	}

	.cs-about-trust__list img {
		width: 76px;
		height: 76px;
	}

	.cs-about-carousel {
		--per: 3;
	}
}

/* ≥ 1440 */
@media (min-width: 1440px) {
	.cs-about-carousel {
		--per: 5;
	}
}

/* ≤ 991: stacked splits */
@media (max-width: 991px) {
	.cs-about-hero__copy,
	.cs-about-band__copy {
		max-width: 680px;
	}

	.cs-about-packshot--hero,
	.cs-about-packshot--band {
		max-width: 720px;
		width: 100%;
		margin: 0 auto;
	}

	.cs-about-story__media,
	.cs-about-team__brand {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ≤ 479 */
@media (max-width: 479px) {
	.cs-about {
		font-size: 15px;
	}

	.cs-about-actions .cs-about-btn {
		width: 100%;
	}

	.cs-about-intro__copy {
		text-align: left;
		font-size: 16px;
	}

	.cs-about-head {
		text-align: left;
	}

	.cs-about-faq__answer {
		padding-right: 4px;
	}

	.cs-about-team__brand {
		aspect-ratio: auto;
		padding: 40px 24px;
	}
}
