/* Page colors
   -------------------------------------------------------------------- */
.tm-about-hero,
.tm-about-story,
.tm-about-pillars,
.tm-about-atelier,
.tm-about-artisans {
	--tm-about-panel: #f1eee5;
	--tm-about-panel-dark: #ece8df;
}

/* Hero
   -------------------------------------------------------------------- */
.tm-about-hero {
	background: var(--tm-color-cream);
	padding-block: 90px;
}

.tm-about-hero__intro {
	max-width: 1086px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.tm-about-hero__heading {
	max-width: 1086px;
	margin: 0;
	font-family: var(--tm-font-display);
	font-weight: 400;
	font-size: 84px;
	line-height: 1.15;
	letter-spacing: -5px;
	color: var(--tm-color-primary-dark);
}

.tm-about-hero__description {
	max-width: 672px;
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	color: var(--tm-color-text-muted);
}

.tm-about-hero__card {
	position: relative;
	max-width: 1152px;
	margin: 32px auto 0;
	aspect-ratio: 1152 / 494;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tm-about-panel);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.tm-about-hero__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tm-about-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28, 28, 23, 0.6), rgba(28, 28, 23, 0) 50%);
}

.tm-about-hero__overlay {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 16px;
	border-radius: 4px;
	background: rgba(49, 49, 43, 0.7);
	backdrop-filter: blur(6px);
}

.tm-about-hero__location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.025em;
	color: var(--tm-color-cream);
}
.tm-about-hero__location svg {
	width: 15px;
	height: 14px;
	flex-shrink: 0;
	color: var(--tm-color-accent-gold);
}

.tm-about-hero__established {
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: #e6e2d9;
	white-space: nowrap;
}

/* Our Story
   -------------------------------------------------------------------- */
.tm-about-story {
	background: var(--tm-color-surface);
	padding-block: 90px;
}

.tm-about-story__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 32px;
	align-items: center;
}

.tm-about-story__photo {
	position: relative;
	grid-column: 1 / span 5;
	aspect-ratio: 461 / 615;
	border-radius: 8px;
	background: var(--tm-about-panel);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.tm-about-story__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.tm-about-story__copy {
	grid-column: 6 / span 7;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tm-about-story__kicker {
	margin: 0 0 4px;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tm-color-primary-dark);
}

.tm-about-story__heading {
	margin: 0 0 16px;
	font-family: var(--tm-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -3px;
	color: var(--tm-color-primary-dark);
}

.tm-about-story__paragraph {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 26px;
	color: var(--tm-color-text-muted);
}
.tm-about-story__paragraph:last-of-type {
	margin-bottom: 0;
}

.tm-about-story__quote {
	margin: 24px 0;
	padding: 24px;
	border-radius: 4px;
	background: var(--tm-color-cream);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tm-about-story__quote p {
	margin: 0;
	font-family: var(--tm-font-label);
	font-size: 24px;
	line-height: 32px;
	color: var(--tm-color-text);
}
.tm-about-story__quote cite {
	display: flex;
	align-items: center;
	gap: 8px;
	font-style: normal;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--tm-color-text-muted);
}
.tm-about-story__quote-rule {
	width: 32px;
	height: 2px;
	background: var(--tm-color-primary-dark);
}

.tm-about-story__badges {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.tm-about-story__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--tm-color-text);
	white-space: nowrap;
}
.tm-about-story__badge svg {
	width: 18px;
	height: 17px;
	color: var(--tm-color-primary-dark);
}
.tm-about-story__badge-dot {
	color: var(--tm-color-border-light);
}

/* Core Pillars of Craftsmanship
   -------------------------------------------------------------------- */
.tm-about-pillars {
	background: var(--tm-color-cream);
	padding-block: 90px;
}

.tm-about-pillars__intro {
	max-width: 672px;
	margin: 0 auto 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
.tm-about-pillars__kicker {
	margin: 0;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tm-color-primary-dark);
}
.tm-about-pillars__heading {
	margin: 0;
	font-family: var(--tm-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -3px;
	color: var(--tm-color-primary-dark);
}
.tm-about-pillars__description {
	margin: 4px 0 0;
	font-size: 18px;
	line-height: 24px;
	color: var(--tm-color-text-muted);
}

.tm-about-pillars__grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.tm-about-pillar-card {
	flex: 1 0 0;
	min-width: 0;
	padding: 24px;
	border-radius: 8px;
	background: var(--tm-about-panel);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tm-about-pillar-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 4px;
	background: var(--tm-color-cream);
}
.tm-about-pillar-card__icon svg {
	width: 20px;
	height: 22px;
	color: var(--tm-color-primary-dark);
}
.tm-about-pillar-card__badge {
	margin: 0 0 4px;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tm-color-primary-dark);
}
.tm-about-pillar-card__heading {
	margin: 0 0 8px;
	font-family: var(--tm-font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: var(--tm-color-primary-dark);
}
.tm-about-pillar-card__description {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	color: var(--tm-color-text-muted);
}

/* Inside Our Atelier & Process Visuals
   -------------------------------------------------------------------- */
.tm-about-atelier {
	background: var(--tm-color-surface);
	padding-block: 90px;
}

.tm-about-atelier__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 32px;
	align-items: center;
}

.tm-about-atelier__copy {
	grid-column: 1 / span 6;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tm-about-atelier__kicker {
	margin: 0;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tm-color-primary-dark);
}
.tm-about-atelier__heading {
	margin: 0;
	font-family: var(--tm-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -3px;
	color: var(--tm-color-primary-dark);
}
.tm-about-atelier__paragraph {
	margin: 0;
	font-size: 18px;
	line-height: 26px;
	color: var(--tm-color-text-muted);
}

.tm-about-atelier__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tm-about-atelier__checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--tm-font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 24px;
	color: var(--tm-color-text);
}
.tm-about-atelier__checklist svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: var(--tm-color-primary-dark);
}

.tm-about-atelier__photos {
	grid-column: 7 / span 6;
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.tm-about-atelier__photo {
	flex: 1 0 0;
	min-width: 0;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	overflow: hidden;
	background: var(--tm-about-panel);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.tm-about-atelier__photo--offset {
	margin-top: 24px;
}
.tm-about-atelier__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tm-about-stats {
	margin-top: 46px;
	display: flex;
	gap: 24px;
	justify-content: center;
	padding: 32px;
	border-radius: 8px;
	background: var(--tm-color-primary-dark);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.tm-about-stats__item {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.tm-about-stats__number {
	font-family: var(--tm-font-display);
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.01em;
	color: var(--tm-color-cream);
}
.tm-about-stats__label {
	margin-top: 4px;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tm-about-panel-dark);
}

/* Meet the Master Cutters & Artisans
   -------------------------------------------------------------------- */
.tm-about-artisans {
	background: var(--tm-color-cream);
	padding-block: 90px;
}

.tm-about-artisans__intro {
	max-width: 672px;
	margin: 0 auto 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
.tm-about-artisans__kicker {
	margin: 0;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tm-color-primary-dark);
}
.tm-about-artisans__heading {
	margin: 0;
	font-family: var(--tm-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -3px;
	color: var(--tm-color-primary-dark);
}
.tm-about-artisans__description {
	margin: 4px 0 0;
	font-size: 18px;
	line-height: 24px;
	color: var(--tm-color-text-muted);
}

.tm-about-artisans__grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.tm-about-artisan-card {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tm-about-panel);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tm-about-artisan-card__media {
	aspect-ratio: 384 / 276;
	background: var(--tm-about-panel-dark);
}
.tm-about-artisan-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tm-about-artisan-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
}
.tm-about-artisan-card__role {
	margin: 0;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tm-color-primary-dark);
}
.tm-about-artisan-card__name {
	margin: 4px 0;
	font-family: var(--tm-font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: var(--tm-color-primary-dark);
}
.tm-about-artisan-card__experience {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--tm-color-text-muted);
}
.tm-about-artisan-card__description {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	color: var(--tm-color-text-muted);
}

.tm-about-finish-badges {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 16px 24px;
	padding: 16px;
	border-radius: 4px;
	background: var(--tm-color-surface);
}
.tm-about-finish-badges__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--tm-font-label);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--tm-color-text);
	white-space: nowrap;
}
.tm-about-finish-badges__item svg {
	width: 17px;
	height: 17px;
	color: var(--tm-color-primary-dark);
}

/* Responsive
   -------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.tm-about-story__grid,
	.tm-about-atelier__grid {
		grid-template-columns: 1fr;
	}
	.tm-about-story__photo,
	.tm-about-story__copy,
	.tm-about-atelier__copy,
	.tm-about-atelier__photos {
		grid-column: 1 / -1;
		padding-left: 0;
	}
	.tm-about-pillars__grid,
	.tm-about-artisans__grid {
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.tm-about-hero,
	.tm-about-story,
	.tm-about-pillars,
	.tm-about-atelier,
	.tm-about-artisans {
		padding-block: 56px;
	}
	.tm-about-hero__heading {
		font-size: 36px;
	}
	.tm-about-pillars__heading {
		font-size: 32px;
	}
	.tm-about-atelier__heading,
	.tm-about-artisans__heading {
		font-size: 28px;
	}
	.tm-about-atelier__photos {
		flex-direction: column;
	}
	.tm-about-atelier__photo--offset {
		margin-top: 0;
	}
	.tm-about-stats {
		flex-wrap: wrap;
	}
	.tm-about-stats__item {
		flex: 1 1 40%;
	}
}