/* About Us page. Scoped to .bp-about-main; global tokens are untouched. */
.bp-about-main {
	--bp-about-cream: #f2e7d4;
	--bp-about-ivory: #f6f2ea;
	--bp-about-espresso: #33251e;
	--bp-about-deep: #221711;
	--bp-about-bronze: #b18b63;
	/* Bronze for large text on light grounds. */
	--bp-about-bronze-strong: #8a6440;
	/* Bronze for small text and focus rings on light grounds: over 5:1 on cream. */
	--bp-about-bronze-text: #7a5634;
	/* Bronze for text on espresso: over 6:1. */
	--bp-about-bronze-light: #cfa66c;
	--bp-about-body: #3d2e25;
	--bp-about-muted: #6a5a4e;
	--bp-about-line: rgba(51, 37, 30, 0.14);
	--bp-about-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	margin-block-start: 0;
	padding-top: var(--bp-header-height);
	background: var(--bp-about-ivory);
	color: var(--bp-about-espresso);
	font-family: "Hanken Grotesk", system-ui, sans-serif;
}

/* Sections meet edge to edge: no block-gap strips between them or before the footer. */
.bp-about-main > *,
.bp-about-main + * { margin-block: 0; }

.bp-about-main :focus-visible { outline-color: var(--bp-about-bronze-text); }
.bp-about-brands :focus-visible,
.bp-about-cta :focus-visible { outline-color: var(--bp-about-bronze-light); }

.bp-about-shell {
	width: min(100%, 1320px);
	margin: 0 auto;
}

/* Shared type ------------------------------------------------------------ */
.bp-about-label {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	color: var(--bp-about-bronze-text);
	font: 500 11px/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.bp-about-label i {
	display: block;
	flex: none;
	width: 40px;
	height: 1px;
	background: var(--bp-about-bronze);
}
.bp-about-label__num { color: var(--bp-about-espresso); }
.bp-about-label--center { justify-content: center; }

.bp-about-main h1,
.bp-about-main h2 {
	margin: 0;
	color: inherit;
	font-family: "Bodoni Moda", Georgia, serif;
	font-weight: 500;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.bp-about-main h1 { font-size: clamp(38px, 4.3vw, 64px); line-height: 1.02; }
.bp-about-main h2 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.05; }
.bp-about-main h1 em,
.bp-about-main h2 em {
	display: block;
	color: var(--bp-about-bronze-strong);
	font-style: italic;
}
.bp-about-main h3 {
	margin: 0;
	color: inherit;
	font: 500 22px/1.2 "Bodoni Moda", Georgia, serif;
	letter-spacing: -0.01em;
}
.bp-about-main p { margin: 0; }

.bp-about-head {
	display: grid;
	gap: 22px;
	align-content: start;
	max-width: 640px;
}
.bp-about-head__text {
	max-width: 560px;
	color: var(--bp-about-body);
	font-size: 16px;
	line-height: 1.7;
}

/* Actions ---------------------------------------------------------------- */
.bp-about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 30px;
	align-items: center;
}
.bp-about-actions--center { justify-content: center; }

.bp-about-button {
	display: inline-flex;
	gap: 14px;
	align-items: center;
	min-height: 50px;
	padding: 0 26px;
	background: var(--bp-about-espresso);
	color: var(--bp-about-ivory);
	font: 600 14px/1 "Hanken Grotesk", sans-serif;
	text-decoration: none;
	transition: background-color 220ms ease;
}
.bp-about-button:hover { background: var(--bp-about-bronze-text); color: var(--bp-about-ivory); }
.bp-about-button--light { background: var(--bp-about-cream); color: var(--bp-about-espresso); }
.bp-about-button--light:hover { background: var(--bp-about-ivory); color: var(--bp-about-espresso); }

.bp-about-link {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 32px;
	border-bottom: 1px solid var(--bp-about-bronze);
	color: var(--bp-about-espresso);
	font: 600 14px/1.3 "Hanken Grotesk", sans-serif;
	text-decoration: none;
	transition: color 200ms ease;
}
.bp-about-button span,
.bp-about-link span { transition: transform 240ms var(--bp-about-ease); }
.bp-about-link:hover { color: var(--bp-about-bronze-text); }
.bp-about-button:hover span,
.bp-about-link:hover span { transform: translateX(4px); }

/* Captions under product photographs. */
.bp-about-caption {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	color: var(--bp-about-muted);
	font-size: 13px;
	line-height: 1.45;
}
.bp-about-caption span {
	color: var(--bp-about-bronze-text);
	font: 500 10px/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bp-about-caption a {
	color: var(--bp-about-espresso);
	text-decoration: underline;
	text-decoration-color: var(--bp-about-bronze);
	text-underline-offset: 3px;
}
.bp-about-caption a:hover { color: var(--bp-about-bronze-text); }

.bp-about-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--bp-about-ease);
}
.bp-about-img--contain { object-fit: contain; }

/* 01 Hero ---------------------------------------------------------------- */
.bp-about-hero {
	padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 64px) clamp(72px, 8vw, 120px);
	border-bottom: 1px solid var(--bp-about-line);
}
.bp-about-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(40px, 6vw, 104px);
	align-items: center;
	width: min(100%, 1320px);
	margin: 0 auto;
}
.bp-about-hero--text .bp-about-hero__inner { grid-template-columns: minmax(0, 860px); }
.bp-about-hero__copy {
	display: grid;
	gap: 28px;
	animation: bp-about-rise 700ms var(--bp-about-ease) both;
}
.bp-about-hero__text {
	display: grid;
	gap: 16px;
	max-width: 560px;
	color: var(--bp-about-body);
	font-size: 16px;
	line-height: 1.7;
}
.bp-about-hero__text p:first-child { color: var(--bp-about-espresso); font-size: 17px; }
.bp-about-hero__copy .bp-about-actions { margin-top: 6px; }

.bp-about-hero__figure {
	display: grid;
	gap: 16px;
	width: min(100%, 540px);
	margin: 0 0 0 auto;
	animation: bp-about-rise 900ms 120ms var(--bp-about-ease) both;
}
.bp-about-hero__frame {
	position: relative;
	padding: 12px;
	background: var(--bp-about-cream);
	border: 1px solid var(--bp-about-line);
}
/* Offset bronze rule behind the frame. */
.bp-about-hero__frame::before {
	content: "";
	position: absolute;
	inset: 22px -18px -18px 22px;
	z-index: -1;
	border: 1px solid var(--bp-about-bronze);
}
.bp-about-hero__frame .bp-about-img { aspect-ratio: 4 / 5; height: auto; }
.bp-about-hero__figure .bp-about-caption { padding-left: 2px; }

/* 02 Collection ---------------------------------------------------------- */
.bp-about-collection {
	scroll-margin-top: var(--bp-header-height);
	padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 64px);
	background: var(--bp-about-cream);
}
.bp-about-collection .bp-about-head {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 22px clamp(32px, 6vw, 96px);
	align-items: end;
	max-width: none;
}
.bp-about-collection .bp-about-head .bp-about-label,
.bp-about-collection .bp-about-head h2 { grid-column: 1; }
.bp-about-collection .bp-about-head__text { grid-column: 2; grid-row: 2; }

.bp-about-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
	margin: clamp(44px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
}
.bp-about-card {
	display: flex;
	flex-direction: column;
	background: var(--bp-about-ivory);
	border: 1px solid var(--bp-about-line);
}
.bp-about-card__figure { margin: 0; }
.bp-about-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bp-about-cream);
}
.bp-about-card__media--contain { padding: 14px; background: #fff; }
.bp-about-card:hover .bp-about-img { transform: scale(1.03); }
.bp-about-card__figure .bp-about-caption {
	padding: 12px 22px;
	border-bottom: 1px solid var(--bp-about-line);
}
.bp-about-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 24px 22px 28px;
}
.bp-about-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	width: 100%;
	color: var(--bp-about-muted);
	font: 500 10px/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bp-about-card__meta span:first-child { color: var(--bp-about-bronze-text); }
.bp-about-card__body > p:not(.bp-about-card__meta) {
	color: var(--bp-about-body);
	font-size: 15px;
	line-height: 1.65;
}
.bp-about-card__body .bp-about-link { margin-top: auto; }

/* 03 Guidance ------------------------------------------------------------ */
.bp-about-guidance {
	padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 64px);
	background: var(--bp-about-ivory);
}
.bp-about-guidance__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 7vw, 120px);
	align-items: start;
}
.bp-about-guidance__aside { display: grid; gap: clamp(36px, 4vw, 52px); }
.bp-about-guidance__figure { display: grid; gap: 14px; width: min(100%, 440px); margin: 0; }
.bp-about-guidance__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--bp-about-line);
	background: var(--bp-about-cream);
}

.bp-about-points {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--bp-about-line);
}
.bp-about-point {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 20px;
	padding: clamp(28px, 3vw, 40px) 0;
	border-top: 1px solid var(--bp-about-line);
}
.bp-about-point:first-child { border-top-color: var(--bp-about-bronze); }
.bp-about-point__num {
	color: var(--bp-about-bronze-strong);
	font: italic 400 36px/1 "Bodoni Moda", Georgia, serif;
}
.bp-about-point > div { display: grid; justify-items: start; gap: 14px; }
.bp-about-point p {
	max-width: 560px;
	color: var(--bp-about-body);
	font-size: 15px;
	line-height: 1.7;
}

/* 04 Manufacturers ------------------------------------------------------- */
.bp-about-brands {
	padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 64px);
	background: var(--bp-about-espresso);
	color: var(--bp-about-cream);
}
.bp-about-brands__inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 48px clamp(40px, 7vw, 112px);
	align-items: start;
}
.bp-about-brands .bp-about-label,
.bp-about-brands h2 em { color: var(--bp-about-bronze-light); }
.bp-about-brands .bp-about-label__num { color: var(--bp-about-cream); }
.bp-about-brands .bp-about-head__text { color: rgba(242, 231, 212, 0.78); }

.bp-about-brands__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(242, 231, 212, 0.16);
}
.bp-about-brand {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px 32px;
	align-items: center;
	padding: 26px 0;
	border-top: 1px solid rgba(242, 231, 212, 0.16);
	color: var(--bp-about-cream);
	text-decoration: none;
}
.bp-about-brands__list li:first-child .bp-about-brand { border-top-color: var(--bp-about-bronze); }
.bp-about-brand__name {
	font: 500 clamp(24px, 2.2vw, 32px)/1.1 "Bodoni Moda", Georgia, serif;
	letter-spacing: -0.02em;
	transition: color 220ms ease;
}
.bp-about-brand__desc {
	grid-column: 1;
	color: rgba(242, 231, 212, 0.72);
	font-size: 14px;
	line-height: 1.55;
}
.bp-about-brand__meta {
	display: grid;
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-items: end;
	gap: 10px;
	text-align: right;
}
.bp-about-brand__count {
	color: rgba(242, 231, 212, 0.66);
	font: 500 10px/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bp-about-brand__cta {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--bp-about-bronze-light);
	font: 600 13px/1.3 "Hanken Grotesk", sans-serif;
}
.bp-about-brand__cta span { transition: transform 240ms var(--bp-about-ease); }
.bp-about-brand:hover .bp-about-brand__name { color: var(--bp-about-bronze-light); }
.bp-about-brand:hover .bp-about-brand__cta span { transform: translateX(4px); }

.bp-about-brands__note {
	display: grid;
	gap: 8px;
	margin-top: 28px !important;
	color: rgba(242, 231, 212, 0.72);
	font-size: 14px;
	line-height: 1.6;
}
.bp-about-brands__note span {
	color: var(--bp-about-bronze-light);
	font: 500 10px/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bp-about-brands__note a {
	justify-self: start;
	color: var(--bp-about-cream);
	text-decoration: underline;
	text-decoration-color: var(--bp-about-bronze);
	text-underline-offset: 3px;
}
.bp-about-brands__note a:hover { color: var(--bp-about-bronze-light); }

/* 05 Explore ------------------------------------------------------------- */
.bp-about-explore {
	padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 64px);
	background: var(--bp-about-cream);
}
.bp-about-explore__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 40px clamp(40px, 7vw, 120px);
	align-items: start;
}
.bp-about-explore__body {
	display: grid;
	gap: 18px;
	padding-top: 33px;
	color: var(--bp-about-body);
	font-size: 16px;
	line-height: 1.7;
}
.bp-about-explore__body .bp-about-actions { margin-top: 12px; }

.bp-about-note {
	display: grid;
	gap: 8px;
	margin-top: 26px;
	padding: 20px 22px;
	border-left: 2px solid var(--bp-about-bronze);
	background: rgba(246, 242, 234, 0.6);
	color: var(--bp-about-muted);
	font-size: 14px;
	line-height: 1.65;
}
.bp-about-note__label {
	color: var(--bp-about-bronze-text);
	font: 500 10px/1.4 "IBM Plex Mono", monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* 06 Final CTA ----------------------------------------------------------- */
.bp-about-cta {
	position: relative;
	padding: clamp(96px, 11vw, 156px) clamp(20px, 4vw, 64px);
	border-bottom: 1px solid rgba(177, 139, 99, 0.45);
	background: radial-gradient(ellipse 70% 70% at 50% 40%, var(--bp-about-espresso) 0%, var(--bp-about-deep) 100%);
	color: var(--bp-about-cream);
	text-align: center;
}
/* Fine bronze plumb line from the section edge. */
.bp-about-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: clamp(48px, 6vw, 80px);
	background: linear-gradient(var(--bp-about-bronze), rgba(177, 139, 99, 0));
}
.bp-about-cta__inner {
	display: grid;
	justify-items: center;
	gap: 26px;
	width: min(100%, 860px);
	margin: 0 auto;
}
.bp-about-cta .bp-about-label { color: var(--bp-about-bronze-light); }
.bp-about-cta h2 { font-size: clamp(34px, 3.8vw, 56px); }
.bp-about-cta h2 em { color: var(--bp-about-bronze-light); }
.bp-about-cta__text {
	max-width: 520px;
	color: rgba(242, 231, 212, 0.8);
	font-size: 16px;
	line-height: 1.7;
}
.bp-about-cta .bp-about-actions { margin-top: 10px; }
.bp-about-cta .bp-about-link { color: var(--bp-about-cream); }
.bp-about-cta .bp-about-link:hover { color: var(--bp-about-bronze-light); }

/* Motion ----------------------------------------------------------------- */
@keyframes bp-about-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bp-about-main *,
	.bp-about-main *::before { animation: none !important; transition: none !important; }
	.bp-about-card:hover .bp-about-img { transform: none; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.bp-about-cards { grid-template-columns: minmax(0, 1fr); }
	.bp-about-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.bp-about-card__figure { display: flex; flex-direction: column; border-right: 1px solid var(--bp-about-line); }
	.bp-about-card__media { position: relative; flex: 1; aspect-ratio: auto; min-height: 240px; }
	/* Fill the frame without letting the image's own ratio set the row height. */
	.bp-about-card__media .bp-about-img { position: absolute; inset: 0; }
	.bp-about-card__media--contain .bp-about-img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
	.bp-about-card__figure .bp-about-caption { border-top: 1px solid var(--bp-about-line); border-bottom: 0; }
}

@media (max-width: 900px) {
	.bp-about-hero__inner,
	.bp-about-guidance__inner,
	.bp-about-brands__inner,
	.bp-about-explore__inner { grid-template-columns: minmax(0, 1fr); }
	.bp-about-hero__figure { width: min(calc(100% - 18px), 520px); margin: 0; }
	.bp-about-guidance__figure { width: min(100%, 520px); }
	.bp-about-guidance__media { aspect-ratio: 4 / 3; }
	.bp-about-explore__body { padding-top: 0; }
	.bp-about-collection .bp-about-head { grid-template-columns: minmax(0, 1fr); }
	.bp-about-collection .bp-about-head__text { grid-column: 1; grid-row: auto; }
}

@media (max-width: 600px) {
	.bp-about-card { display: flex; }
	.bp-about-card__figure { display: block; border-right: 0; }
	.bp-about-card__media { aspect-ratio: 4 / 3; min-height: 0; }
	.bp-about-card__media .bp-about-img { position: static; }
	.bp-about-card__media--contain .bp-about-img { width: 100%; height: 100%; }
	.bp-about-card__figure .bp-about-caption { border-top: 0; border-bottom: 1px solid var(--bp-about-line); }
	.bp-about-hero__frame { padding: 8px; }
	.bp-about-hero__frame::before { inset: 16px -12px -12px 16px; }
	.bp-about-point { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.bp-about-point__num { font-size: 30px; }
	.bp-about-brand { grid-template-columns: minmax(0, 1fr); }
	.bp-about-brand__meta { grid-column: 1; grid-row: auto; justify-items: start; margin-top: 8px; text-align: left; }
	.bp-about-button { width: 100%; justify-content: space-between; }
}