/* About page is deliberately scoped so the shared Frappe/Kuck shell stays untouched. */
.ks-about-page {
	--ks-about-ink: #151515;
	--ks-about-muted: #696969;
	--ks-about-line: #d9d7d2;
	--ks-about-paper: #fff;
	--ks-about-dark: #111;
	--ks-about-focus: #075fc3;
	--ks-about-max: 1120px;
	background: #fff;
	color: var(--ks-about-ink);
}

.ks-about-page .page-content-wrapper {
	margin: 0;
}

.ks-about-page .page_content {
	padding: 0;
}

.ks-about-page .ks-about,
.ks-about-page .ks-about * {
	box-sizing: border-box;
}

.ks-about-page .ks-about a {
	color: inherit;
}

.ks-about-page .ks-about h1,
.ks-about-page .ks-about h2,
.ks-about-page .ks-about p {
	margin-top: 0;
}

.ks-about-page .ks-about h1,
.ks-about-page .ks-about h2 {
	font-family: inherit;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.ks-about-page .ks-about h1 {
	max-width: 12ch;
	margin: 0 auto 2rem;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.05;
}

.ks-about-page .ks-about h2 {
	max-width: 19ch;
	margin-bottom: 1.5rem;
	font-size: clamp(2rem, 3.5vw, 3.4rem);
	line-height: 1.1;
}

.ks-about-page .ks-about__eyebrow {
	margin-bottom: 1.25rem;
	color: var(--ks-about-muted);
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ks-about-page .ks-about__hero {
	position: relative;
	background: var(--ks-about-paper);
}

.ks-about-page .ks-about__hero-grid {
	width: min(calc(100% - 3rem), var(--ks-about-max));
	min-height: 0;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: center;
}

.ks-about-page .ks-about__hero-copy {
	position: relative;
	z-index: 2;
	width: min(100%, 800px);
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 5rem) 3rem;
	text-align: center;
}

.ks-about-page .ks-about__intro,
.ks-about-page .ks-about__richtext {
	max-width: 62ch;
	font-size: 1.05rem;
	line-height: 1.8;
}

.ks-about-page .ks-about__intro {
	margin-inline: auto;
}

.ks-about-page .ks-about__intro p:last-child,
.ks-about-page .ks-about__richtext p:last-child {
	margin-bottom: 0;
}

.ks-about-page .ks-about__intro a,
.ks-about-page .ks-about__richtext a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ks-about-page .ks-about__hero-media {
	position: relative;
	z-index: 3;
	width: min(100%, 980px);
	margin: 0 auto -15rem;
}

.ks-about-page .ks-about__hero-media img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

.ks-about-page .ks-about__history-band {
	position: relative;
	z-index: 1;
	min-height: 0;
	color: #fff;
	background: var(--ks-about-dark);
}

.ks-about-page .ks-about__history-band-inner {
	width: min(calc(100% - 3rem), var(--ks-about-max));
	min-height: 0;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18rem 0 3rem;
}

.ks-about-page .ks-about__history-band a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	border-bottom: 1px solid rgb(255 255 255 / 70%);
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.ks-about-page .ks-about__section {
	padding-block: clamp(5rem, 11vw, 10rem);
}

.ks-about-page .ks-about__section-inner {
	width: min(calc(100% - 3rem), var(--ks-about-max));
	margin: 0 auto;
}

.ks-about-page .ks-about__history {
	background: #fff;
}

.ks-about-page .ks-about__history-grid {
	display: grid;
	grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr);
	gap: clamp(3rem, 9vw, 10rem);
	align-items: start;
}

.ks-about-page .ks-about__copy {
	padding-top: 1rem;
}

.ks-about-page .ks-about__copy--wide {
	max-width: 70rem;
}

.ks-about-page .ks-about__media-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1rem;
	align-items: start;
}

.ks-about-page .ks-about__media-link {
	display: block;
	overflow: hidden;
	background: #ebe9e3;
}

.ks-about-page .ks-about__media-item {
	min-width: 0;
}

.ks-about-page .ks-about__media-destination {
	display: inline-flex;
	gap: 0.35rem;
	margin-top: 0.55rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ks-about-page .ks-about__media-link img,
.ks-about-page .ks-about__gallery img,
.ks-about-page .ks-about__brand-link img {
	display: block;
	width: 100%;
	transition: transform 220ms ease;
}

.ks-about-page .ks-about__media-link:hover img,
.ks-about-page .ks-about__media-link:focus-visible img,
.ks-about-page .ks-about__brand-link:hover img,
.ks-about-page .ks-about__brand-link:focus-visible img {
	transform: scale(1.035);
}

.ks-about-page .ks-about__media-grid--history .ks-about__media-item:nth-child(1) {
	grid-column: 1 / span 7;
}

.ks-about-page .ks-about__media-grid--history .ks-about__media-item:nth-child(2) {
	grid-column: 8 / -1;
	margin-top: 5rem;
}

.ks-about-page .ks-about__media-grid--history .ks-about__media-item:nth-child(3) {
	grid-column: 3 / span 7;
	margin-top: -1rem;
}

.ks-about-page .ks-about__media-grid--history .ks-about__media-link img {
	aspect-ratio: 1.08;
	object-fit: cover;
}

.ks-about-page .ks-about__quality {
	background: var(--ks-about-paper);
}

.ks-about-page .ks-about__quality .ks-about__section-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(3rem, 9vw, 9rem);
	align-items: start;
}

.ks-about-page .ks-about__history h2 {
	max-width: 8ch;
}

.ks-about-page .ks-about__quality h2 {
	font-size: clamp(2rem, 3vw, 2.6rem);
}

.ks-about-page .ks-about__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.ks-about-page .ks-about__media-link--certificate {
	background: #fff;
	border: 1px solid var(--ks-about-line);
	padding: 1rem;
}

.ks-about-page .ks-about__media-link--certificate img {
	aspect-ratio: 350 / 499;
	object-fit: contain;
}

.ks-about-page .ks-about__brands {
	background: #fff;
}

.ks-about-page .ks-about__brands h2 {
	max-width: 30ch;
	margin-inline: auto;
	font-size: clamp(2rem, 3vw, 2.6rem);
	text-align: center;
}

.ks-about-page .ks-about__brands .ks-about__eyebrow {
	text-align: center;
}

.ks-about-page .ks-about__brands-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 3rem;
	background: #fff;
}

.ks-about-page .ks-about__brand-link {
	min-height: 8rem;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: #f7f7f7;
	overflow: hidden;
}

.ks-about-page .ks-about__brand-link img {
	max-width: 100%;
	max-height: 5rem;
	object-fit: contain;
}

.ks-about-page .ks-about a:focus-visible,
.ks-about-page .ks-about-lightbox button:focus-visible {
	outline: 3px solid var(--ks-about-focus);
	outline-offset: 4px;
}

.ks-about-page .ks-about-lightbox[hidden] {
	display: none;
}

.ks-about-modal-open {
	overflow: hidden;
}

.ks-about-page .ks-about-lightbox {
	position: fixed;
	z-index: 100;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.ks-about-page .ks-about-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 82%);
}

.ks-about-page .ks-about-lightbox__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 1100px);
	max-height: calc(100vh - 3rem);
	padding: clamp(1rem, 3vw, 2rem);
	background: #fff;
	box-shadow: 0 1rem 4rem rgb(0 0 0 / 40%);
}

.ks-about-page .ks-about-lightbox__dialog figure {
	margin: 0;
}

.ks-about-page .ks-about-lightbox__dialog img {
	display: block;
	width: 100%;
	max-height: calc(100vh - 9rem);
	object-fit: contain;
}

.ks-about-page .ks-about-lightbox__dialog figcaption {
	margin-top: 0.75rem;
	color: var(--ks-about-muted);
	font-size: 0.9rem;
}

.ks-about-page .ks-about-lightbox__close {
	position: absolute;
	z-index: 2;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--ks-about-line);
	color: var(--ks-about-ink);
	background: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.ks-about-page .ks-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 900px) {
	.ks-about-page .ks-about__hero-grid,
	.ks-about-page .ks-about__history-grid,
	.ks-about-page .ks-about__quality .ks-about__section-inner {
	grid-template-columns: minmax(0, 1fr);
	}

	.ks-about-page .ks-about__hero-grid {
	min-height: 0;
	gap: 0;
	}

	.ks-about-page .ks-about__hero-copy {
	padding-block: 3rem 2rem;
	}

	.ks-about-page .ks-about__hero-media {
	width: 100%;
	margin: 0 auto -6rem;
	}

	.ks-about-page .ks-about__hero-media img {
		height: auto;
	}

	.ks-about-page .ks-about__history-band-inner {
	min-height: 0;
	padding-top: 8rem;
	}

	.ks-about-page .ks-about__quality .ks-about__section-inner {
	gap: 3rem;
	}

	.ks-about-page .ks-about__brands-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ks-about-page .ks-about__hero-grid,
	.ks-about-page .ks-about__section-inner,
	.ks-about-page .ks-about__history-band-inner {
		width: min(calc(100% - 2rem), var(--ks-about-max));
	}

	.ks-about-page .ks-about h1 {
		font-size: clamp(2.5rem, 14vw, 4.5rem);
	}

	.ks-about-page .ks-about h2 {
		font-size: clamp(2rem, 11vw, 3.5rem);
	}

	.ks-about-page .ks-about__hero-copy {
		padding-block: 2.5rem 2rem;
	}

	.ks-about-page .ks-about__hero-media {
		margin-bottom: -2rem;
	}

	.ks-about-page .ks-about__hero-media img {
		min-height: 0;
		height: auto;
	}

	.ks-about-page .ks-about__history-band-inner {
		min-height: 0;
		padding-top: 4rem;
	}

	.ks-about-page .ks-about__section {
		padding-block: 4.5rem;
	}

	.ks-about-page .ks-about__media-grid--history {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ks-about-page .ks-about__media-grid--history .ks-about__media-item:nth-child(1),
	.ks-about-page .ks-about__media-grid--history .ks-about__media-item:nth-child(2),
	.ks-about-page .ks-about__media-grid--history .ks-about__media-item:nth-child(3) {
		grid-column: auto;
		margin-top: 0;
	}

	.ks-about-page .ks-about__media-grid--history .ks-about__media-item:nth-child(1) {
		grid-column: 1 / -1;
	}

	.ks-about-page .ks-about__gallery,
	.ks-about-page .ks-about__brands-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ks-about-page .ks-about__brand-link {
		min-height: 6.5rem;
		padding: 1rem;
	}

	.ks-about-page .ks-about-lightbox {
		padding: 0.5rem;
	}

	.ks-about-page .ks-about-lightbox__dialog {
		max-height: calc(100vh - 1rem);
		padding: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ks-about-page .ks-about__media-link img,
	.ks-about-page .ks-about__brand-link img {
		transition: none;
	}
}