/* ===================================================================
   HOME (front-page only) — editorial / industrial art direction.

   NOT a centred, uniform-grid template. Flush-left numbered sections,
   full-bleed hairline rules, an asymmetric "wool colour" hero with an
   outline wordmark, a running ticker, a bento category grid, and a
   full-bleed red manifesto band. Tokens-first; motion reuses the theme
   hooks (data-bbco-home-motion / -reveal[-group] / -home-section).
   Loaded after shared component files; responsive.css still loads last.
   =================================================================== */

/* -------------------------------------------------------------------
   1) HERO — asymmetric, flush-left, wool field + outline wordmark.
   ------------------------------------------------------------------- */
.bbco-ed-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	margin-top: calc(-1 * var(--bbco-header-h));
	padding-top: calc(var(--bbco-header-h) + var(--bbco-space-40));
	padding-bottom: var(--bbco-space-64);
	min-height: 100vh;
	min-height: 100dvh;
	color: var(--bbco-on-dark-strong);
	background:
		radial-gradient(140% 110% at 88% -10%, color-mix(in srgb, var(--bbco-primary) 18%, transparent) 0%, transparent 52%),
		linear-gradient(155deg, var(--bbco-ink) 0%, #0a1d31 55%, #0e253b 100%);
}

.bbco-ed-hero__wool {
	position: absolute;
	inset: -16%;
	z-index: -2;
	/* Heavier diffusion so the colour reads as soft light, not a blotch. */
	filter: blur(8px);
	transform: translate3d(0, var(--bbco-home-hero-shift, 0px), 0);
	will-change: transform;
}

.bbco-ed-hero__blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(120px);
	mix-blend-mode: screen;
	will-change: transform;
}

/* Deep, desaturated maroon glow pushed off the top-right corner — only a
   gentle warm wash bleeds in instead of a bright red disc. */
.bbco-ed-hero__blob--1 {
	top: -14%;
	right: -10%;
	width: 52vw;
	max-width: 720px;
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bbco-primary) 62%, var(--bbco-ink)), transparent 72%);
	opacity: 0.55;
	animation: bbco-wool-a 30s var(--bbco-ease) infinite alternate;
}

.bbco-ed-hero__blob--2 {
	top: 34%;
	right: 26%;
	width: 28vw;
	max-width: 440px;
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bbco-accent) 70%, var(--bbco-ink)), transparent 72%);
	opacity: 0.2;
	animation: bbco-wool-b 33s var(--bbco-ease) infinite alternate;
}

.bbco-ed-hero__blob--3 {
	bottom: -22%;
	right: -10%;
	width: 52vw;
	max-width: 760px;
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bbco-secondary) 82%, var(--bbco-ink)), transparent 70%);
	opacity: 0.7;
	animation: bbco-wool-a 30s var(--bbco-ease) infinite alternate-reverse;
}

@keyframes bbco-wool-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-4%, 5%, 0) scale(1.12); }
}

@keyframes bbco-wool-b {
	from { transform: translate3d(0, 0, 0) scale(1.05); }
	to   { transform: translate3d(5%, -4%, 0) scale(0.9); }
}

/* Subtle photo on the right — monochrome-tinted by the dark gradient
   (luminosity) and dissolved toward the copy, so it reads as a faint texture
   rather than a full-bleed background. */
.bbco-ed-hero__photo {
	position: absolute;
	inset: 0 0 0 auto;
	width: clamp(360px, 54%, 920px);
	z-index: -1;
	background: var(--photo) center right / cover no-repeat;
	opacity: 0.3;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
	pointer-events: none;
}

@media (max-width: 860px) {
	.bbco-ed-hero__photo {
		width: 72%;
		opacity: 0.18;
	}

	.bbco-ed-cta__photo {
		width: 78%;
		opacity: 0.14;
	}
}

/* Giant outline wordmark bleeding off the bottom-left. */
.bbco-ed-hero__wordmark {
	position: absolute;
	left: -0.06em;
	bottom: -0.28em;
	z-index: -1;
	margin: 0;
	font-family: var(--bbco-font-display);
	font-size: clamp(9rem, 30vw, 24rem);
	font-weight: var(--bbco-weight-bold);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--bbco-on-dark-strong) 22%, transparent);
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* Vertical rail pinned to the right edge. */
.bbco-ed-hero__rail {
	position: absolute;
	top: 50%;
	right: var(--bbco-space-20);
	z-index: 1;
	transform: translateY(-50%);
}

.bbco-ed-hero__rail-text {
	display: block;
	writing-mode: vertical-rl;
	color: var(--bbco-on-dark-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.bbco-ed-hero__inner {
	position: relative;
	z-index: 1;
	width: min(calc(100% - var(--bbco-space-32)), var(--bbco-container));
}

.bbco-ed-hero__content {
	max-width: 1000px;
	/* Lift the block a touch above dead-centre (the wordmark + scroll cue weight
	   the lower half). Kept off `transform` so it survives the reduced-motion /
	   small-screen `transform: none` reset below; parallax stays on transform. */
	position: relative;
	top: calc(-1 * var(--bbco-space-64));
	transform: translate3d(0, var(--bbco-home-copy-shift, 0px), 0);
}

.bbco-ed-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-gap-text);
	margin-bottom: var(--bbco-space-32);
	color: var(--bbco-on-dark);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bbco-ed-hero__kicker span {
	color: var(--bbco-accent);
}

.bbco-ed-hero__content h1 {
	margin: 0;
	max-width: 16ch;
	font-family: var(--bbco-font-display);
	font-size: clamp(2.7rem, 8.4vw, 6.2rem);
	font-weight: var(--bbco-weight-bold);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--bbco-on-dark-strong);
}

.bbco-ed-hero__content h1 em {
	font-style: normal;
	color: transparent;
	background: linear-gradient(96deg, var(--bbco-accent), color-mix(in srgb, var(--bbco-primary) 70%, var(--bbco-accent)));
	-webkit-background-clip: text;
	background-clip: text;
}

.bbco-ed-hero__outline {
	color: transparent;
	-webkit-text-stroke: 1.4px var(--bbco-on-dark-strong);
}

.bbco-ed-hero__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--bbco-gap-card) var(--bbco-space-48);
	max-width: 880px;
	margin-top: var(--bbco-space-48);
	padding-top: var(--bbco-space-24);
	border-top: 1px solid var(--bbco-on-dark-border);
}

.bbco-ed-hero__foot p {
	max-width: 44ch;
	margin: 0;
	color: var(--bbco-on-dark-muted);
	font-size: clamp(var(--bbco-text-base), 1.3vw, var(--bbco-text-md));
	line-height: 1.6;
}

.bbco-ed-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbco-gap-stack);
	/* Match the eyebrow→headline gap so eyebrow → headline → buttons reads as an
	   even rhythm. */
	margin-top: var(--bbco-space-32);
}

/* Scroll cue, bottom-left, label-led. */
.bbco-ed-hero__scroll {
	position: absolute;
	left: max(var(--bbco-space-16), calc((100% - var(--bbco-container)) / 2));
	bottom: var(--bbco-space-24);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-gap-inline);
	color: var(--bbco-on-dark-muted);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bbco-ed-hero__scroll::after {
	content: "";
	width: 46px;
	height: 1px;
	background: var(--bbco-on-dark-border-strong);
	animation: bbco-scroll-line 1.9s var(--bbco-ease) infinite;
	transform-origin: left center;
}

@keyframes bbco-scroll-line {
	0%, 100% { transform: scaleX(0.4); opacity: 0.4; }
	50%      { transform: scaleX(1); opacity: 1; }
}

/* -------------------------------------------------------------------
   1b) HERO SLIDER — cross-fading image slides with a Ken Burns drift,
   per-slide headline reveal, and a giant knockout wordmark filled with
   the slide image (text-clip). Driven by home.js.
   ------------------------------------------------------------------- */
.bbco-hero-slider__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	/* Dark base shows through the column gaps mid-transition. */
	background: var(--bbco-ink);
}

.bbco-hero-slide {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bbco-hero-slide.is-leaving {
	z-index: 1;
}

.bbco-hero-slide.is-active {
	z-index: 2;
}

/* The slide image is split into vertical columns that slide in/out on a left-
   to-right stagger. Each column is a window onto one stage-wide cover image,
   so the columns reconstruct a single seamless photo when settled. */
.bbco-hero-slide__cols {
	position: absolute;
	inset: 0;
	display: flex;
}

.bbco-hero-slide__col {
	position: relative;
	flex: 1 1 0;
	overflow: hidden;
	/* Overlap the next column by 1px so sub-pixel flex rounding can't leave a
	   dark hairline between columns when the photo is settled. */
	margin-right: -1px;
	/* Idle: parked just below the frame; snaps back instantly (no transition)
	   once a leaving column has cleared the top. */
	transform: translateY(102%);
}

.bbco-hero-slide__col::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--col) * -100%);
	/* Pseudo spans the whole stage (12 columns) so each window shows its slice
	   of one continuous cover photo. The extra +2px hides the 1px overlap seam.
	   Keep the 1200% in sync with the column count. */
	width: calc(1200% + 2px);
	height: 100%;
	background: var(--slide-img) center / cover no-repeat;
}

.bbco-hero-slide.is-active .bbco-hero-slide__col {
	transform: translateY(0);
	transition: transform 0.8s var(--bbco-ease-reveal);
	transition-delay: calc(var(--col) * 0.045s);
}

.bbco-hero-slide.is-leaving .bbco-hero-slide__col {
	transform: translateY(-102%);
	transition: transform 0.8s var(--bbco-ease-reveal);
	transition-delay: calc(var(--col) * 0.045s);
}

/* Gentle Ken Burns — applied to the column wrapper so every column scales
   together and the photo stays seamless. */
.bbco-hero-slide.is-active .bbco-hero-slide__cols {
	animation: bbco-kenburns 13s var(--bbco-ease) forwards;
}

@keyframes bbco-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

/* Legibility veil: dark on the left (copy) and bottom (wordmark). */
.bbco-hero-slider__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(95deg, color-mix(in srgb, var(--bbco-ink) 84%, transparent) 0%, color-mix(in srgb, var(--bbco-ink) 34%, transparent) 54%, color-mix(in srgb, var(--bbco-ink) 52%, transparent) 100%),
		linear-gradient(0deg, color-mix(in srgb, var(--bbco-ink) 82%, transparent) 0%, transparent 44%);
}

/* Content sits above the stage; the wordmark between veil and content. */
.bbco-hero-slider .bbco-ed-hero__inner {
	position: relative;
	z-index: 3;
}

.bbco-hero-slider .bbco-ed-hero__rail,
.bbco-hero-slider .bbco-ed-hero__scroll {
	z-index: 4;
}

/* Stacked headline copies — only the active one shows + slides up. */
.bbco-hero-copy-stack {
	display: grid;
}

.bbco-hero-copy {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s var(--bbco-ease), visibility 0.6s var(--bbco-ease);
}

.bbco-hero-copy.is-active {
	opacity: 1;
	visibility: visible;
}

.bbco-hero-copy .bbco-ed-hero__kicker,
.bbco-hero-copy h1 {
	opacity: 0;
	transform: translateY(24px);
}

.bbco-hero-copy.is-active .bbco-ed-hero__kicker {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--bbco-ease) 0.1s, transform 0.6s var(--bbco-ease-reveal) 0.1s;
}

.bbco-hero-copy.is-active h1 {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--bbco-ease) 0.22s, transform 0.7s var(--bbco-ease-reveal) 0.22s;
}

/* Giant knockout wordmark filled with the slide image; wipes in L→R. */
.bbco-hero-words {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.bbco-hero-word {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(-0.4rem, 0.4vw, 0.6rem);
	/* Lean the wordmark to the right edge (small gutter, matches the dots). */
	text-align: right;
	padding-right: var(--bbco-space-32);
	white-space: nowrap;
	font-family: var(--bbco-font-display);
	font-weight: var(--bbco-weight-bold);
	font-size: clamp(4rem, 17vw, 16rem);
	line-height: 0.82;
	letter-spacing: -0.03em;
	/* Fallback colour if background-clip:text is unsupported. */
	color: color-mix(in srgb, var(--bbco-on-dark-strong) 16%, transparent);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12) 58%),
		var(--slide-img);
	/* The image layer is viewport-fixed so the letters reveal the same pixels
	   that sit behind them (matches the slide background). The white gradient
	   stays tied to the word. */
	background-size: 100% 100%, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-attachment: scroll, fixed;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* Hidden until active: wiped from the right. */
	clip-path: inset(0 100% 0 0);
}

.bbco-hero-word.is-active {
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.9s var(--bbco-ease-reveal) 0.15s;
}

/* Slide dots. */
.bbco-hero-slider__dots {
	position: absolute;
	right: var(--bbco-space-32);
	bottom: var(--bbco-space-32);
	z-index: 4;
	display: flex;
	gap: var(--bbco-space-8);
}

.bbco-hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--bbco-on-dark-border-strong);
	border-radius: var(--bbco-radius-pill);
	background: transparent;
	cursor: pointer;
	transition: width var(--bbco-dur-base) var(--bbco-ease), background-color var(--bbco-dur-base) var(--bbco-ease), border-color var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-hero-dot.is-active {
	width: 28px;
	background: var(--bbco-on-dark-strong);
	border-color: var(--bbco-on-dark-strong);
}

@media (prefers-reduced-motion: reduce) {
	/* No sliding columns — fall back to a plain show/hide of each slide. */
	.bbco-hero-slide {
		opacity: 0;
	}

	.bbco-hero-slide.is-active {
		opacity: 1;
	}

	.bbco-hero-slide__col {
		transform: none !important;
		transition: none !important;
	}

	.bbco-hero-slide.is-active .bbco-hero-slide__cols {
		animation: none;
	}

	.bbco-hero-word {
		transition: none;
	}
}

@media (max-width: 640px) {
	.bbco-hero-slider__dots {
		right: 50%;
		transform: translateX(50%);
		bottom: var(--bbco-space-20);
	}
}

/* Scroll progress bar (injected by home.js). */
.bbco-ed-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--bbco-z-toast);
	width: 100%;
	height: 3px;
	background: var(--bbco-primary);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* -------------------------------------------------------------------
   2) TICKER — full-bleed running marquee in brand red.
   ------------------------------------------------------------------- */
.bbco-ed-ticker {
	overflow: hidden;
	border-block: 1px solid color-mix(in srgb, var(--bbco-ink) 30%, var(--bbco-primary));
	background: var(--bbco-primary);
	color: var(--bbco-on-dark-strong);
}

.bbco-ed-ticker__track {
	display: flex;
	width: max-content;
	animation: bbco-ticker var(--bbco-dur-marquee) linear infinite;
}

.bbco-ed-ticker__group {
	display: flex;
	align-items: center;
	padding-block: var(--bbco-space-16);
}

.bbco-ed-ticker__item {
	padding-inline: var(--bbco-space-24);
	font-family: var(--bbco-font-display);
	font-size: var(--bbco-text-lg);
	font-weight: var(--bbco-weight-bold);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bbco-ed-ticker__dot {
	color: var(--bbco-accent);
	font-size: var(--bbco-text-sm);
}

@keyframes bbco-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------
   3) SECTIONS + editorial numbered head.
   ------------------------------------------------------------------- */
.bbco-ed-section {
	padding: var(--bbco-space-80) 0;
	background: var(--bbco-surface);
}


.bbco-ed-head {
	margin-bottom: var(--bbco-space-48);
}

.bbco-ed-head__top {
	display: flex;
	align-items: center;
	gap: var(--bbco-gap-card);
	margin-bottom: var(--bbco-gap-card);
}

.bbco-ed-head__index {
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-sm);
	font-weight: var(--bbco-weight-bold);
	color: var(--bbco-primary);
}

.bbco-ed-head__rule {
	flex: 1;
	height: 1px;
	background: var(--bbco-border);
}

.bbco-ed-head__link {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-space-4);
	color: var(--bbco-ink);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-head__link svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	transition: transform var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-head__link:hover {
	color: var(--bbco-primary);
}

.bbco-ed-head__link:hover svg {
	transform: translateX(3px);
}

.bbco-ed-head__title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--bbco-font-display);
	font-size: clamp(2.1rem, 5.2vw, 3.6rem);
	font-weight: var(--bbco-weight-bold);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--bbco-ink);
}

.bbco-ed-head__title em {
	font-style: normal;
	color: var(--bbco-primary);
}

.bbco-ed-head__lead {
	max-width: 52ch;
	margin: var(--bbco-gap-stack) 0 0;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-md);
	line-height: 1.55;
}

/* -------------------------------------------------------------------
   4) BENTO CATEGORY GRID + editorial tile restyle.
   ------------------------------------------------------------------- */
.bbco-ed-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 196px;
	gap: var(--bbco-space-12);
}

/* Reset the inherited absolute-visual layout from components.css, then
   rebuild a sharper, architectural tile. */
.bbco-ed-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--bbco-space-4);
	min-height: 168px;
	padding: var(--bbco-pad-card-compact);
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius-sm);
	background: var(--bbco-surface);
	overflow: hidden;
	transition: background-color var(--bbco-dur-base) var(--bbco-ease),
		border-color var(--bbco-dur-base) var(--bbco-ease),
		color var(--bbco-dur-base) var(--bbco-ease),
		transform var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-tile::before {
	content: none;
}

.bbco-ed-tile--lead {
	grid-column: span 2;
	grid-row: span 2;
	justify-content: space-between;
	background: var(--bbco-ink);
	border-color: var(--bbco-ink);
	color: var(--bbco-on-dark-strong);
}

.bbco-ed-tile .bbco-ed-tile__num {
	position: static;
	align-self: flex-start;
	margin: 0 0 auto;
	inset: auto;
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	color: var(--bbco-muted);
}

.bbco-ed-tile--lead .bbco-ed-tile__num {
	color: var(--bbco-accent);
}

.bbco-ed-tile strong {
	position: relative;
	z-index: 1;
	font-family: var(--bbco-font-display);
	font-size: var(--bbco-text-lg);
	font-weight: var(--bbco-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
}

.bbco-ed-tile--lead strong {
	font-size: clamp(var(--bbco-text-xl), 3vw, var(--bbco-text-3xl));
}

.bbco-ed-tile small {
	position: relative;
	z-index: 1;
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	color: var(--bbco-muted);
}

.bbco-ed-tile--lead small {
	color: var(--bbco-on-dark-muted);
}

/* The category visual becomes a large, faded architectural mark.
   Compound selectors beat the inherited .bbco-category-tile span rules. */
.bbco-ed-tile .bbco-ed-tile__visual {
	position: absolute;
	top: var(--bbco-space-12);
	right: var(--bbco-space-8);
	bottom: auto;
	left: auto;
	z-index: 0;
	display: block;
	width: 38%;
	max-width: 104px;
	height: auto;
	margin: 0;
	color: color-mix(in srgb, var(--bbco-primary) 22%, transparent);
	opacity: 0.92;
	transform: rotate(-6deg);
	transition: transform var(--bbco-dur-base) var(--bbco-ease), color var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-tile .bbco-ed-tile__visual svg,
.bbco-ed-tile .bbco-ed-tile__visual img {
	width: 100%;
	height: auto;
}

/* Photographic term images read as a faint architectural mark, not a clash. */
.bbco-ed-tile .bbco-ed-tile__visual img {
	border-radius: var(--bbco-radius-sm);
	filter: grayscale(1) contrast(1.05);
	opacity: 0.16;
}

.bbco-ed-tile--lead .bbco-ed-tile__visual {
	top: var(--bbco-space-24);
	right: var(--bbco-space-24);
	width: 40%;
	max-width: 168px;
	color: color-mix(in srgb, var(--bbco-accent) 40%, transparent);
}

.bbco-ed-tile--lead .bbco-ed-tile__visual img {
	filter: grayscale(1) brightness(1.6);
	opacity: 0.22;
}

.bbco-ed-tile:hover {
	background: var(--bbco-primary);
	border-color: var(--bbco-primary);
	color: var(--bbco-on-dark-strong);
	transform: translateY(-2px);
}

.bbco-ed-tile:hover .bbco-ed-tile__num,
.bbco-ed-tile:hover small {
	color: var(--bbco-on-dark-muted);
}

.bbco-ed-tile:hover .bbco-ed-tile__visual {
	color: color-mix(in srgb, #fff 26%, transparent);
	transform: rotate(0deg) scale(1.08);
}

/* -------------------------------------------------------------------
   4b) SELLERS — image-led panels with a restrained, related colour run.
   Related tints keep each profile legible without turning into solid colour chips.
   ------------------------------------------------------------------- */
.bbco-ed-sellers__viewport {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: var(--bbco-space-48);
}

/* White edge fades sit under the arrows, masking the diagonal card edges. */
.bbco-ed-sellers__viewport::before,
.bbco-ed-sellers__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 72px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-sellers__viewport::before {
	left: 0;
	background: linear-gradient(90deg, var(--bbco-surface), transparent);
}

.bbco-ed-sellers__viewport::after {
	right: 0;
	background: linear-gradient(270deg, var(--bbco-surface), transparent);
}

.bbco-ed-sellers__viewport.has-prev::before,
.bbco-ed-sellers__viewport.has-next::after {
	opacity: 1;
}

.bbco-ed-panels {
	--bbco-ed-panel-cut: clamp(44px, 5vw, 68px);
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* White seams show through the slanted edges, like the reference grid. */
	background: var(--bbco-surface);
}

.bbco-ed-panels::-webkit-scrollbar {
	display: none;
}

/* Each panel is a flat colour column: name + price up top, product image
   sinking into the lower band — alternating light / dark like the reference. */
.bbco-ed-panel {
	--bbco-ed-panel-bg: var(--bbco-ink);
	--bbco-ed-panel-fg: var(--bbco-on-dark-strong);
	--bbco-ed-panel-muted: var(--bbco-on-dark-muted);
	/* Thin white diagonal seam left between the leaning columns. */
	--bbco-ed-panel-seam: 12px;
	position: relative;
	isolation: isolate;
	flex: 0 0 clamp(270px, 25vw, 350px);
	display: flex;
	flex-direction: column;
	min-height: clamp(440px, 52vh, 560px);
	/* Column widens on hover, gently nudging its neighbours. */
	transition: flex-basis var(--bbco-dur-base) var(--bbco-ease);
	/* Overlap only partially so a slanted gap stays visible between cards. */
	margin-right: calc((var(--bbco-ed-panel-cut) - var(--bbco-ed-panel-seam)) * -1);
	background: var(--bbco-ed-panel-bg);
	color: var(--bbco-ed-panel-fg);
	overflow: hidden;
	/* Parallelogram: both side edges lean the same way (top shifted right). */
	clip-path: polygon(
		var(--bbco-ed-panel-cut) 0,
		100% 0,
		calc(100% - var(--bbco-ed-panel-cut)) 100%,
		0 100%
	);
	text-decoration: none;
	scroll-snap-align: start;
}

/* First column meets the screen edge with a straight left side. */
.bbco-ed-panel:first-child {
	clip-path: polygon(
		0 0,
		100% 0,
		calc(100% - var(--bbco-ed-panel-cut)) 100%,
		0 100%
	);
}

/* Last column ends the row with a straight right side. */
.bbco-ed-panel:last-child {
	margin-right: 0;
	clip-path: polygon(
		var(--bbco-ed-panel-cut) 0,
		100% 0,
		100% 100%,
		0 100%
	);
}

/* Light column — dark text. */
.bbco-ed-panel:nth-child(4n + 2) {
	--bbco-ed-panel-bg: var(--bbco-surface-alt);
	--bbco-ed-panel-fg: var(--bbco-ink);
	--bbco-ed-panel-muted: var(--bbco-muted);
}

/* Deep green column — light text. */
.bbco-ed-panel:nth-child(4n + 3) {
	--bbco-ed-panel-bg: var(--bbco-cta-dark);
	--bbco-ed-panel-fg: var(--bbco-on-dark-strong);
	--bbco-ed-panel-muted: var(--bbco-on-dark-muted);
}

/* Light column — dark text. */
.bbco-ed-panel:nth-child(4n + 4) {
	--bbco-ed-panel-bg: var(--bbco-control-bg);
	--bbco-ed-panel-fg: var(--bbco-ink);
	--bbco-ed-panel-muted: var(--bbco-muted);
}

.bbco-ed-panel__top {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--bbco-space-8);
	/* Inset from the leaning left edge so text follows the diagonal. */
	padding: var(--bbco-pad-card) var(--bbco-pad-card-compact) 0
		calc(var(--bbco-ed-panel-cut) + var(--bbco-space-8));
}

/* Straight-edged first column needs no diagonal inset. */
.bbco-ed-panel:first-child .bbco-ed-panel__top {
	padding-left: var(--bbco-pad-card-compact);
}

.bbco-ed-panel__name {
	font-family: var(--bbco-font-display);
	font-size: clamp(var(--bbco-text-xl), 2vw, var(--bbco-text-3xl));
	font-weight: var(--bbco-weight-bold);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--bbco-ed-panel-fg);
}

.bbco-ed-panel__meta {
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-sm);
	letter-spacing: 0.02em;
	color: var(--bbco-ed-panel-muted);
}

.bbco-ed-panel__link {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-space-8);
	margin-top: var(--bbco-space-16);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbco-ed-panel-fg);
}

/* Reference-style accent chevron in a thin circle. */
.bbco-ed-panel__link svg {
	width: 26px;
	height: 26px;
	padding: 6px;
	border: 1.5px solid var(--bbco-primary);
	border-radius: var(--bbco-radius-pill);
	stroke: var(--bbco-primary);
	transition: transform var(--bbco-dur-base) var(--bbco-ease),
		background-color var(--bbco-dur-base) var(--bbco-ease),
		stroke var(--bbco-dur-base) var(--bbco-ease);
}

/* Product image sits in the lower band and melts into the panel colour. */
.bbco-ed-panel__media {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 0;
	height: 62%;
	/* Keep the hover zoom clipped to the band — no spill above the gradient. */
	overflow: hidden;
}

.bbco-ed-panel__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		var(--bbco-ed-panel-bg) 0%,
		color-mix(in srgb, var(--bbco-ed-panel-bg) 55%, transparent) 26%,
		transparent 60%
	);
	pointer-events: none;
}

.bbco-ed-panel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	transition: transform var(--bbco-dur-slow) var(--bbco-ease);
}

.bbco-ed-panel__initial {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: end center;
	height: 100%;
	padding-bottom: var(--bbco-space-24);
	font-family: var(--bbco-font-display);
	font-size: clamp(4rem, 7vw, 7rem);
	font-weight: var(--bbco-weight-bold);
	color: var(--bbco-ed-panel-fg);
	opacity: 0.12;
}

.bbco-ed-panel:hover {
	flex-basis: clamp(330px, 30vw, 430px);
}

.bbco-ed-panel:hover .bbco-ed-panel__media img {
	transform: scale(1.04);
}

.bbco-ed-panel:hover .bbco-ed-panel__link svg {
	transform: translateX(3px);
	background: var(--bbco-primary);
	stroke: var(--bbco-on-dark-strong);
}

/* Prev / next arrows — shown by JS only when the row overflows. */
.bbco-ed-sellers__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius-pill);
	background: var(--bbco-surface);
	color: var(--bbco-ink);
	box-shadow: var(--bbco-shadow-md);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity var(--bbco-dur-base) var(--bbco-ease),
		background-color var(--bbco-dur-base) var(--bbco-ease),
		color var(--bbco-dur-base) var(--bbco-ease),
		border-color var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-sellers__nav svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

.bbco-ed-sellers__nav--prev {
	left: var(--bbco-space-20);
}

.bbco-ed-sellers__nav--prev svg {
	transform: rotate(180deg);
}

.bbco-ed-sellers__nav--next {
	right: var(--bbco-space-20);
}

.bbco-ed-sellers__viewport.has-prev .bbco-ed-sellers__nav--prev,
.bbco-ed-sellers__viewport.has-next .bbco-ed-sellers__nav--next {
	opacity: 1;
	pointer-events: auto;
}

.bbco-ed-sellers__nav:hover {
	border-color: var(--bbco-primary);
	background: var(--bbco-primary);
	color: var(--bbco-on-dark-strong);
}

/* Mobile: narrower cards and swipe navigation. */
@media (max-width: 900px) {
	.bbco-ed-panel {
		flex: 0 0 80%;
		min-height: clamp(380px, 78vw, 460px);
	}

	.bbco-ed-sellers__nav {
		display: none;
	}

	.bbco-ed-sellers__viewport::before,
	.bbco-ed-sellers__viewport::after {
		display: none;
	}
}

/* -------------------------------------------------------------------
   5) MANIFESTO — full-bleed red band with oversized stats.
   ------------------------------------------------------------------- */
.bbco-ed-manifesto {
	padding: var(--bbco-space-80) 0;
	background: var(--bbco-primary);
	color: var(--bbco-on-dark-strong);
}

.bbco-ed-manifesto__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--bbco-space-64);
	align-items: center;
}

.bbco-ed-manifesto__statement {
	margin: 0;
	font-family: var(--bbco-font-display);
	font-size: clamp(var(--bbco-text-xl), 3.2vw, 2.4rem);
	font-weight: var(--bbco-weight-semibold);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.bbco-ed-manifesto__statement em {
	font-style: normal;
	color: var(--bbco-accent);
}

.bbco-ed-manifesto__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--bbco-space-32) var(--bbco-space-24);
}

.bbco-ed-stat {
	border-top: 1px solid var(--bbco-on-dark-border-strong);
	padding-top: var(--bbco-gap-text);
}

.bbco-ed-stat strong {
	display: block;
	font-family: var(--bbco-font-display);
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: var(--bbco-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
}

.bbco-ed-stat span {
	display: block;
	margin-top: var(--bbco-space-8);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbco-on-dark-muted);
}

/* -------------------------------------------------------------------
   6) REVIEWS — reuse the marquee wall under the editorial head.
   ------------------------------------------------------------------- */
/* 2× faster marquee — scoped to this block so the ticker (same token) is
   unaffected. Halves --bbco-dur-marquee 26s→13s / -slow 31s→15.5s. */
.bbco-ed-section.bbco-feedback {
	--bbco-dur-marquee: 13s;
	--bbco-dur-marquee-slow: 15.5s;
}

.bbco-ed-section.bbco-feedback .bbco-ed-head {
	margin-bottom: var(--bbco-space-40);
}

/* -------------------------------------------------------------------
   7) CLOSING CTA — full-bleed, oversized outline wordmark.
   ------------------------------------------------------------------- */
.bbco-ed-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(var(--bbco-space-80), 12vw, 160px) 0;
	color: var(--bbco-on-dark-strong);
	background:
		radial-gradient(120% 120% at 86% 0%, color-mix(in srgb, var(--bbco-primary) 48%, var(--bbco-ink)) 0%, transparent 56%),
		linear-gradient(160deg, var(--bbco-ink) 0%, #0b2034 100%);
}

/* Subtle photo on the LEFT — mirror of the hero (different image),
   monochrome-tinted by the dark gradient and dissolved toward the copy. */
.bbco-ed-cta__photo {
	position: absolute;
	inset: 0 auto 0 0;
	width: clamp(300px, 44%, 760px);
	z-index: -1;
	background: var(--photo) center left / cover no-repeat;
	opacity: 0.24;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 56%);
	mask-image: linear-gradient(270deg, transparent 0%, #000 56%);
	pointer-events: none;
}

.bbco-ed-cta__wordmark {
	position: absolute;
	right: -0.04em;
	bottom: -0.3em;
	z-index: -1;
	font-family: var(--bbco-font-display);
	font-size: clamp(7rem, 26vw, 20rem);
	font-weight: var(--bbco-weight-bold);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--bbco-on-dark-strong) 16%, transparent);
	pointer-events: none;
	user-select: none;
}

.bbco-ed-cta__inner {
	display: grid;
	gap: var(--bbco-gap-card);
	max-width: 800px;
	margin-inline: auto;
}

.bbco-ed-cta__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--bbco-gap-text);
	font-family: var(--bbco-font-mono);
	font-size: var(--bbco-text-xs);
	font-weight: var(--bbco-weight-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bbco-on-dark);
}

.bbco-ed-cta__kicker span {
	color: var(--bbco-accent);
}

.bbco-ed-cta h2 {
	margin: 0;
	font-family: var(--bbco-font-display);
	font-size: clamp(2.4rem, 6.4vw, 5rem);
	font-weight: var(--bbco-weight-bold);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--bbco-on-dark-strong);
}

.bbco-ed-cta h2 em {
	font-style: normal;
	color: var(--bbco-accent);
}

.bbco-ed-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbco-gap-stack);
	margin-top: var(--bbco-space-16);
}

/* -------------------------------------------------------------------
   7b) FAQ — light accordion as the closing block (native <details>).
   ------------------------------------------------------------------- */
.bbco-ed-faq__list {
	display: grid;
	gap: var(--bbco-space-12);
	max-width: 860px;
	margin-inline: auto;
}

.bbco-ed-faq__item {
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius-md);
	background: var(--bbco-surface);
	transition: border-color var(--bbco-dur-base) var(--bbco-ease),
		box-shadow var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-faq__item:hover {
	border-color: color-mix(in srgb, var(--bbco-primary) 32%, var(--bbco-border));
}

.bbco-ed-faq__item[open] {
	border-color: color-mix(in srgb, var(--bbco-primary) 45%, var(--bbco-border));
	box-shadow: var(--bbco-shadow-sm);
}

.bbco-ed-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bbco-gap-card);
	padding: var(--bbco-space-20) var(--bbco-space-24);
	cursor: pointer;
	color: var(--bbco-ink);
	font-family: var(--bbco-font-display);
	font-size: var(--bbco-text-md);
	font-weight: var(--bbco-weight-semibold);
	line-height: 1.3;
	list-style: none;
}

.bbco-ed-faq__q::-webkit-details-marker {
	display: none;
}

.bbco-ed-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid var(--bbco-border);
	border-radius: var(--bbco-radius-pill);
	transition: transform var(--bbco-dur-slow) var(--bbco-ease),
		border-color var(--bbco-dur-base) var(--bbco-ease);
}

.bbco-ed-faq__icon::before,
.bbco-ed-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 2px;
	border-radius: 2px;
	background: var(--bbco-primary);
	transform: translate(-50%, -50%);
}

.bbco-ed-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* + rotates into × when the item opens. */
.bbco-ed-faq__item[open] .bbco-ed-faq__icon {
	border-color: var(--bbco-primary);
	transform: rotate(135deg);
}

.bbco-ed-faq__a {
	padding: 0 var(--bbco-space-24) var(--bbco-space-24);
}

.bbco-ed-faq__item[open] .bbco-ed-faq__a {
	animation: bbco-faq-in var(--bbco-dur-reveal) var(--bbco-ease-reveal);
}

.bbco-ed-faq__a p {
	margin: 0;
	max-width: 70ch;
	color: var(--bbco-muted);
	font-size: var(--bbco-text-base);
	line-height: 1.65;
}

@keyframes bbco-faq-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bbco-ed-faq__icon,
	.bbco-ed-faq__item[open] .bbco-ed-faq__a {
		animation: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------
   8) BUTTONS — sharper, squarer home variants.
   ------------------------------------------------------------------- */
.bbco-ed-btn {
	border-radius: var(--bbco-radius-sm);
	padding: var(--bbco-space-16) var(--bbco-space-24);
	font-family: var(--bbco-font-display);
	letter-spacing: -0.01em;
}

.bbco-ed-btn.bbco-btn--light {
	box-shadow: 0 14px 34px color-mix(in srgb, var(--bbco-ink) 40%, transparent);
}

.bbco-ed-btn.bbco-btn--light:hover {
	color: var(--bbco-primary);
	transform: translateY(-1px);
}

.bbco-ed-btn--ghost {
	border: 1px solid var(--bbco-on-dark-border-strong);
	background: transparent;
	color: var(--bbco-on-dark-strong);
}

.bbco-ed-btn--ghost:hover {
	border-color: var(--bbco-on-dark-strong);
	background: var(--bbco-on-dark-softer);
	color: var(--bbco-on-dark-strong);
}

/* -------------------------------------------------------------------
   9) PARALLAX gating + RESPONSIVE + REDUCED MOTION.
   ------------------------------------------------------------------- */
@media (max-width: 781px), (prefers-reduced-motion: reduce) {
	.bbco-ed-hero__content,
	.bbco-ed-hero__wool {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.bbco-ed-bento {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Uniform tiles below desktop — the lead stops spanning so 6 items always
	   fill complete rows (no orphan). It stays a dark accent tile. */
	.bbco-ed-tile--lead {
		grid-column: auto;
		grid-row: auto;
		justify-content: flex-end;
	}

	.bbco-ed-tile--lead strong {
		font-size: var(--bbco-text-lg);
	}

	.bbco-ed-manifesto__grid {
		grid-template-columns: 1fr;
		gap: var(--bbco-space-40);
	}
}

@media (max-width: 860px) {
	.bbco-ed-hero__rail {
		display: none;
	}

	.bbco-ed-hero__foot {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--bbco-gap-card);
	}
}

@media (max-width: 640px) {
	.bbco-ed-hero {
		min-height: 92vh;
		min-height: 92dvh;
	}

	.bbco-ed-section,
	.bbco-ed-manifesto {
		padding: var(--bbco-space-64) 0;
	}

	.bbco-ed-bento {
		grid-template-columns: 1fr 1fr;
		gap: var(--bbco-space-8);
	}

	.bbco-ed-manifesto__stats {
		gap: var(--bbco-space-24) var(--bbco-space-16);
	}

	.bbco-ed-hero__actions .bbco-btn,
	.bbco-ed-cta__actions .bbco-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.bbco-ed-hero__scroll {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbco-ed-hero__blob,
	.bbco-ed-hero__scroll::after,
	.bbco-ed-ticker__track {
		animation: none;
	}
}