/* YNBX /about/ — manifesto chapters. Hero (.ynbx-page-intro--about) is locked. */

.ynbx-about-chapter,
.ynbx-about-chapter.kb-row-layout-wrap,
.ynbx-about-chapter.wp-block-kadence-rowlayout {
	position: relative;
	margin: 0 !important;
	padding: 0;
	background: transparent !important;
	min-height: 100svh;
	min-height: 100dvh;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ynbx-about-chapter > .kt-row-column-wrap {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 100svh;
	min-height: 100dvh;
}

.ynbx-about-chapter .wp-block-kadence-column {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	background: transparent !important;
}

.ynbx-about-chapter-inner > .kt-inside-inner-col {
	box-sizing: border-box;
	min-height: 100svh;
	min-height: 100dvh;
	display: flex !important;
	flex-direction: column;
	padding-top: 88px !important;
	padding-bottom: clamp(48px, 9vh, 104px) !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	background: transparent !important;
}

.ynbx-about-title,
.ynbx-about-title.wp-block-kadence-advancedheading,
h2.ynbx-about-title {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500 !important;
	font-size: clamp(2.6rem, 8vw, 6rem) !important;
	line-height: 0.86 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff !important;
	margin: 0 !important;
	max-width: 11ch;
}

.ynbx-about-title .ynbx-title-line {
	display: block;
}

.ynbx-about-title .ynbx-font-pixel {
	font-family: "basis33", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-weight: 400;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: unset;
	font-smooth: never;
	letter-spacing: 0.02em;
}

.ynbx-about-lede,
.ynbx-about-lede.wp-block-kadence-advancedheading {
	margin-top: 22px !important;
}

.ynbx-about-index,
.ynbx-about-index.wp-block-kadence-advancedheading {
	margin: 28px 0 0 !important;
	font-size: 13px !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.42) !important;
}

.ynbx-about-link,
.ynbx-about-link.wp-block-kadence-advancedheading {
	margin: 28px 0 0 !important;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff !important;
}

.ynbx-about-link a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	padding-bottom: 7px;
	transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ynbx-about-link a:hover {
	opacity: 0.7;
}

/* 02 STUDIO — centered left, short ledger under the kicker */
.ynbx-about-chapter--studio .ynbx-about-chapter-inner > .kt-inside-inner-col {
	justify-content: center;
}

.ynbx-about-chapter--studio .ynbx-about-title {
	max-width: 14ch;
	position: relative;
	padding-top: 28px;
}

.ynbx-about-chapter--studio .ynbx-about-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 4.5rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.ynbx-about-chapter--studio .ynbx-about-lede {
	max-width: 22ch;
}

/* 03 APPROACH — middle right, vertical hairline */
.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col {
	justify-content: center;
	align-items: flex-end;
	text-align: right;
	padding-right: 48px !important;
	position: relative;
}

.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 22%;
	bottom: 22%;
	width: 1px;
	background: rgba(255, 255, 255, 0.16);
	pointer-events: none;
}

.ynbx-about-chapter--approach .ynbx-about-title {
	max-width: 14ch;
}

.ynbx-about-chapter--approach .ynbx-about-lede {
	max-width: 22ch;
}

/* 04 THINKING — extra tall, kicker high, statement low */
.ynbx-about-chapter--thinking,
.ynbx-about-chapter--thinking.kb-row-layout-wrap,
.ynbx-about-chapter--thinking.wp-block-kadence-rowlayout,
.ynbx-about-chapter--thinking > .kt-row-column-wrap,
.ynbx-about-chapter--thinking .ynbx-about-chapter-inner > .kt-inside-inner-col {
	min-height: 132svh;
	min-height: 132dvh;
}

.ynbx-about-chapter--thinking .ynbx-about-chapter-inner > .kt-inside-inner-col {
	display: grid !important;
	grid-template-rows: auto 1fr auto auto;
	align-items: start;
	padding-top: 18vh !important;
	padding-bottom: 16vh !important;
}

.ynbx-about-chapter--thinking .ynbx-about-kicker {
	grid-row: 1;
	margin-bottom: 0 !important;
}

.ynbx-about-chapter--thinking .ynbx-about-title {
	grid-row: 3;
	max-width: 12ch;
	height: auto !important;
}

.ynbx-about-chapter--thinking .ynbx-about-lede {
	grid-row: 4;
	max-width: 26ch;
	height: auto !important;
}

/* 05 GLOBAL — high left, empty field below */
.ynbx-about-chapter--global .ynbx-about-chapter-inner > .kt-inside-inner-col {
	justify-content: flex-start;
	padding-top: 22vh !important;
}

.ynbx-about-chapter--global .ynbx-about-title {
	max-width: 12ch;
	position: relative;
	padding-top: 28px;
}

.ynbx-about-chapter--global .ynbx-about-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: min(48vw, 560px);
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
}

.ynbx-about-chapter--global .ynbx-about-lede {
	max-width: 44ch;
}

/* 06 CONTACT — bookend, bottom right */
.ynbx-about-chapter--contact .ynbx-about-chapter-inner > .kt-inside-inner-col {
	justify-content: flex-end;
	align-items: flex-end;
	text-align: right;
}

.ynbx-about-chapter--contact .ynbx-about-title {
	max-width: 12ch;
}

/* Scroll reveal — chapters only, never the hero.
   Only hide while JS has armed motion, so content stays visible if the script fails. */
.ynbx-about-motion .ynbx-about-reveal .ynbx-about-kicker,
.ynbx-about-motion .ynbx-about-reveal .ynbx-about-title,
.ynbx-about-motion .ynbx-about-reveal .ynbx-about-lede,
.ynbx-about-motion .ynbx-about-reveal .ynbx-about-index,
.ynbx-about-motion .ynbx-about-reveal .ynbx-about-link {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ynbx-about-reveal.is-visible .ynbx-about-kicker,
.ynbx-about-reveal.is-visible .ynbx-about-title,
.ynbx-about-reveal.is-visible .ynbx-about-lede,
.ynbx-about-reveal.is-visible .ynbx-about-index,
.ynbx-about-reveal.is-visible .ynbx-about-link {
	opacity: 1;
	transform: none;
}

.ynbx-about-reveal.is-visible .ynbx-about-title {
	transition-delay: 70ms;
}

.ynbx-about-reveal.is-visible .ynbx-about-lede,
.ynbx-about-reveal.is-visible .ynbx-about-index,
.ynbx-about-reveal.is-visible .ynbx-about-link {
	transition-delay: 140ms;
}

@media (min-width: 640px) {
	.ynbx-about-chapter-inner > .kt-inside-inner-col {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col {
		padding-right: 56px !important;
	}

	.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col::after {
		right: 24px;
	}
}

@media (min-width: 768px) {
	.ynbx-about-chapter-inner > .kt-inside-inner-col {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col {
		padding-right: 72px !important;
	}

	.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col::after {
		right: 40px;
	}

	.ynbx-about-chapter--thinking,
	.ynbx-about-chapter--thinking.kb-row-layout-wrap,
	.ynbx-about-chapter--thinking.wp-block-kadence-rowlayout,
	.ynbx-about-chapter--thinking > .kt-row-column-wrap,
	.ynbx-about-chapter--thinking .ynbx-about-chapter-inner > .kt-inside-inner-col {
		min-height: 140svh;
		min-height: 140dvh;
	}
}

@media (min-width: 1280px) {
	.ynbx-about-chapter-inner > .kt-inside-inner-col {
		padding-left: 56px !important;
		padding-right: 56px !important;
	}

	.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col {
		padding-right: 88px !important;
	}

	.ynbx-about-chapter--approach .ynbx-about-chapter-inner > .kt-inside-inner-col::after {
		right: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ynbx-about-reveal .ynbx-about-kicker,
	.ynbx-about-reveal .ynbx-about-title,
	.ynbx-about-reveal .ynbx-about-lede,
	.ynbx-about-reveal .ynbx-about-index,
	.ynbx-about-reveal .ynbx-about-link {
		opacity: 1;
		transform: none;
		transition: none;
	}
}