/* Fractional CBO palette and page-specific layout refinements.
 * Preserve the existing card, connector, peel, and scroll interactions.
 */
article.ys-landing--fractional_cbo #hero.brand-editorial-hero,
article.ys-landing--fractional_cbo #future_state {
	--ys-service-background: var(--ys-service-green);
	--ys-service-ink: var(--ys-service-ivory);
	--ys-service-card: transparent;
}

article.ys-landing--fractional_cbo #leadership_gap,
article.ys-landing--fractional_cbo #responsibilities {
	--ys-service-background: var(--ys-service-ivory);
	--ys-service-ink: var(--ys-service-navy);
	--ys-service-card: var(--ys-service-cream);
}

article.ys-landing--fractional_cbo #question {
	--ys-service-background: var(--ys-service-cream);
	--ys-service-ink: var(--ys-service-navy);
	--ys-service-card: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo #ownership_risk,
article.ys-landing--fractional_cbo #final_cta {
	--ys-service-background: var(--ys-service-coral);
	--ys-service-ink: var(--ys-service-navy);
	--ys-service-card: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo #who_this_is_for {
	--ys-service-background: var(--ys-service-navy);
	--ys-service-ink: var(--ys-service-ivory);
	--ys-service-card: transparent;
}

article.ys-landing--fractional_cbo #why_yulia {
	--ys-service-background: var(--ys-service-lilac);
	--ys-service-ink: var(--ys-service-navy);
	--ys-service-card: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo #point_of_view {
	--ys-service-background: var(--ys-service-gold);
	--ys-service-ink: var(--ys-service-navy);
	--ys-service-card: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo :is(#hero, #leadership_gap, #question, #ownership_risk, #future_state, #responsibilities, #who_this_is_for, #why_yulia, #point_of_view, #final_cta) {
	background-color: var(--ys-service-background);
	background-image: none;
	color: var(--ys-service-ink);
}

/* Marquee variables and descendants are intentionally untouched. */
article.ys-landing--fractional_cbo #hero.brand-editorial-hero :is(.brand-editorial-hero__stage, .brand-editorial-hero__problem),
article.ys-landing--fractional_cbo #hero.brand-editorial-hero .brand-editorial-hero__stage :is(.brand-editorial-hero__eyebrow, .brand-editorial-hero__title, .brand-editorial-hero__line-text),
article.ys-landing--fractional_cbo #hero.brand-editorial-hero .brand-editorial-hero__problem :is(.brand-editorial-hero__problem-line, .brand-editorial-hero__resolution-copy, .brand-editorial-hero__value, .ys-hero-scroll__statement-inner strong, .ys-hero-scroll__statement-inner em, .brand-editorial-hero__value em) {
	color: inherit;
}

article#ys-landing-fractional_cbo #hero .brand-editorial-hero__resolution-copy {
	color: var(--ys-service-coral);
	font-size: clamp(2.5rem, 5vw, 5rem);
	line-height: 1.1;
}

article#ys-landing-fractional_cbo #hero .brand-editorial-hero__resolution-copy :is(strong, em) {
	font-size: inherit;
	line-height: inherit;
}

/* Let the long opening headings use the available width instead of 15ch. */
article.ys-landing--fractional_cbo :is(#leadership_gap, #question) :is(.ys-landing__section-heading, .ys-landing__section-title) {
	max-width: none;
}

article.ys-landing--fractional_cbo :is(#leadership_gap, #question) .ys-landing__section-title {
	text-wrap: balance;
}

article.ys-landing--fractional_cbo #hero .brand-editorial-hero__problem {
	background-color: var(--ys-service-background);
	background-image: none;
}

article.ys-landing--fractional_cbo #hero :is(.brand-editorial-hero__vignette, .brand-editorial-hero__grain) {
	background-color: transparent;
	background-image: none;
}

/* Preserve the functional text-reveal gradient and progress stops. Its
 * hardcoded dim stop remains a legacy exception; no new gradient is added.
 */
article.ys-landing--fractional_cbo #hero .ys-hero-scroll__text-fill {
	--ys-brown: var(--ys-service-ink);
	--ys-red: var(--ys-service-ink);
}

/* Explicit legacy text colors cannot be fixed by wrapper inheritance alone.
 * These resets deliberately assign no palette color to a text child.
 */
article.ys-landing--fractional_cbo :is(#leadership_gap, #question, #ownership_risk, #future_state, #responsibilities, #who_this_is_for, #why_yulia, #point_of_view, #final_cta) :is(.ys-landing__ordinal, .ys-section-index, .ys-landing__eyebrow, .ys-landing__section-title, .ys-landing__prose, .ys-landing__prose strong, .ys-landing__prose a, .ys-landing__prose blockquote) {
	color: inherit;
}

/* Reuse the same palette sequence across the colored card groups. */
article.ys-landing--fractional_cbo :is(#leadership_gap .ys-landing__prose > ul > li, #question ol.ys-flow > li, #responsibilities .ys-services-scroll__card, #point_of_view .ys-landing__prose > p:nth-child(-n + 3)) {
	--ys-fractional-card: var(--ys-service-coral);
	--ys-fractional-card-ink: var(--ys-service-navy);
}

article.ys-landing--fractional_cbo :is(#leadership_gap .ys-landing__prose > ul > li, #question ol.ys-flow > li, #responsibilities .ys-services-scroll__card, #point_of_view .ys-landing__prose > p:nth-child(-n + 3)):nth-child(6n + 2) {
	--ys-fractional-card: var(--ys-service-gold);
}

article.ys-landing--fractional_cbo :is(#leadership_gap .ys-landing__prose > ul > li, #question ol.ys-flow > li, #responsibilities .ys-services-scroll__card, #point_of_view .ys-landing__prose > p:nth-child(-n + 3)):nth-child(6n + 3) {
	--ys-fractional-card: color-mix(in srgb, var(--ys-service-lilac) 90%, var(--ys-service-ivory));
}

article.ys-landing--fractional_cbo :is(#leadership_gap .ys-landing__prose > ul > li, #question ol.ys-flow > li, #responsibilities .ys-services-scroll__card, #point_of_view .ys-landing__prose > p:nth-child(-n + 3)):nth-child(6n + 4) {
	--ys-fractional-card: var(--ys-service-green);
	--ys-fractional-card-ink: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo :is(#leadership_gap .ys-landing__prose > ul > li, #question ol.ys-flow > li, #responsibilities .ys-services-scroll__card, #point_of_view .ys-landing__prose > p:nth-child(-n + 3)):nth-child(6n + 5) {
	--ys-fractional-card: var(--ys-service-navy);
	--ys-fractional-card-ink: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo :is(#leadership_gap .ys-landing__prose > ul > li, #question ol.ys-flow > li, #responsibilities .ys-services-scroll__card, #point_of_view .ys-landing__prose > p:nth-child(-n + 3)):nth-child(6n + 6) {
	--ys-fractional-card: var(--ys-service-cream);
}

/* 01 — preserve the post-it geometry and recolor its face and fold. */
article.ys-landing--fractional_cbo #leadership_gap .ys-landing__prose > ul > li {
	--ys-note: var(--ys-fractional-card);
	--ys-note-fold: color-mix(in srgb, var(--ys-note) 75%, var(--ys-service-navy));
	background-color: var(--ys-note);
	background-image: none;
	color: var(--ys-fractional-card-ink);
}

article.ys-landing--fractional_cbo #leadership_gap .ys-landing__prose > ul > li::after {
	background-color: var(--ys-note-fold);
	background-image: none;
}

article.ys-landing--fractional_cbo #leadership_gap .ys-landing__prose > p {
	color: inherit;
}

/* 02 — readiness classes are JS-driven; ID scoping beats their old paints
 * without introducing any new readiness/selected-state selector.
 */
article.ys-landing--fractional_cbo #question ol.ys-flow li,
article.ys-landing--fractional_cbo #question .ys-ownership-map__centre {
	--ys-map-note: var(--ys-fractional-card, var(--ys-service-navy));
	--ys-map-fold: color-mix(in srgb, var(--ys-map-note) 75%, var(--ys-service-navy));
	background-color: var(--ys-map-note);
	background-image: none;
	color: var(--ys-fractional-card-ink, var(--ys-service-ivory));
}

article.ys-landing--fractional_cbo #question ol.ys-flow li::after,
article.ys-landing--fractional_cbo #question .ys-ownership-map__centre::after {
	background-color: var(--ys-map-fold);
	background-image: none;
}

article.ys-landing--fractional_cbo #question :is(.ys-ownership-map__centre-kicker, .ys-ownership-map__answer--nobody) {
	color: inherit;
}

article.ys-landing--fractional_cbo #question .ys-ownership-map__connection {
	stroke: var(--ys-service-navy);
	stroke-width: 1.5;
}

/* 03 — statements and quotes retain their light paper surface. */
article.ys-landing--fractional_cbo #ownership_risk .ys-landing__prose > ul li,
article.ys-landing--fractional_cbo #ownership_risk .ys-landing__prose > :is(p, blockquote) {
	background-color: var(--ys-service-card);
	background-image: none;
	color: inherit;
}

article.ys-landing--fractional_cbo #ownership_risk .ys-landing__prose > ul li::before {
	color: inherit;
}

/* 04 — ivory FROM notes, palette-colored TO notes, including SVG peels. */
article.ys-landing--fractional_cbo #future_state::after,
article.ys-landing--fractional_cbo #future_state .ys-transformation-table__surface {
	background-color: var(--ys-service-card);
	background-image: none;
}

article.ys-landing--fractional_cbo #future_state :is(.ys-transformation-table__card, .ys-transformation-table__mobile-card) {
	--ys-table-card: var(--ys-transform-card);
	--ys-fold-crease: var(--ys-service-navy);
	--ys-fold-pocket: color-mix(in srgb, var(--ys-table-card) 65%, var(--ys-service-navy));
	--ys-fold-under: color-mix(in srgb, var(--ys-table-card) 85%, var(--ys-service-ivory));
	--ys-fold-under-dark: color-mix(in srgb, var(--ys-table-card) 45%, var(--ys-service-navy));
	--ys-fold-highlight: color-mix(in srgb, var(--ys-table-card) 65%, var(--ys-service-ivory));
	color: var(--ys-transform-ink, var(--ys-service-navy));
}

article.ys-landing--fractional_cbo #future_state :is(.ys-transformation-table__card--from, .ys-transformation-table__mobile-card--from) {
	--ys-transform-card: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo #future_state :is(.ys-transformation-table__card--to, .ys-transformation-table__mobile-card--to) {
	--ys-transform-card: var(--ys-service-coral);
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__pair:nth-child(4n + 2) :is(.ys-transformation-table__card--to, .ys-transformation-table__mobile-card--to) {
	--ys-transform-card: var(--ys-service-gold);
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__pair:nth-child(4n + 3) :is(.ys-transformation-table__card--to, .ys-transformation-table__mobile-card--to) {
	--ys-transform-card: color-mix(in srgb, var(--ys-service-lilac) 90%, var(--ys-service-ivory));
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__pair:nth-child(4n + 4) :is(.ys-transformation-table__card--to, .ys-transformation-table__mobile-card--to) {
	--ys-transform-card: var(--ys-service-navy);
	--ys-transform-ink: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo #future_state :is(.ys-transformation-table__card-peel-base, .ys-transformation-table__card-peel-cutout) {
	fill: var(--ys-table-card);
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__card-peel-cutout {
	stroke: var(--ys-table-card);
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__card-peel-defs stop[offset="0%"] {
	stop-color: var(--ys-fold-under-dark);
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__card-peel-defs stop[offset="20%"] {
	stop-color: var(--ys-fold-pocket);
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__card-peel-defs stop[offset="60%"] {
	stop-color: var(--ys-fold-under);
}

article.ys-landing--fractional_cbo #future_state .ys-transformation-table__card-peel-defs stop[offset="80%"] {
	stop-color: var(--ys-fold-highlight);
}

article.ys-landing--fractional_cbo #future_state :is(.ys-transformation-table__card-sheet, .ys-transformation-table__mobile-card):not(.is-peel-ready) {
	background-color: var(--ys-table-card);
	background-image: none;
}

article.ys-landing--fractional_cbo #future_state :is(.ys-transformation-table__card-sheet, .ys-transformation-table__mobile-card):not(.is-peel-ready)::before {
	background-image: none;
}

article.ys-landing--fractional_cbo #future_state :is(.ys-transformation-table__pair-axis-label, .ys-transformation-table__mobile-label, .ys-transformation-table__mobile-label span, .ys-transformation-table__heading .ys-landing__eyebrow, .ys-transformation-table__card-copy) {
	color: inherit;
}

/* 05 — override every legacy service-card theme, not the photos or icons. */
article.ys-landing--fractional_cbo #responsibilities .ys-services-scroll__pin {
	background-color: var(--ys-service-background);
}

article.ys-landing--fractional_cbo #responsibilities .ys-services-scroll__card-inner {
	background-color: var(--ys-fractional-card);
	background-image: none;
	color: var(--ys-fractional-card-ink);
}

@media (min-width: 901px) and (max-width: 1400px) {
	article#ys-landing-fractional_cbo #responsibilities .ys-services-scroll__heading {
		grid-template-columns: minmax(0, 1fr);
	}

	article#ys-landing-fractional_cbo #responsibilities .ys-heading-stamp-host {
		justify-self: start;
	}
}

/* 06 — restore light ruled paper against the navy section. */
article.ys-landing--fractional_cbo #who_this_is_for .ys-landing__prose > ul li {
	--ys-paper-fold: var(--ys-service-cream);
	background-color: var(--ys-service-ivory);
	color: var(--ys-service-navy);
}

article.ys-landing--fractional_cbo #who_this_is_for .ys-landing__prose > ul li::after {
	background-color: var(--ys-paper-fold);
	background-image: none;
}

/* Ruled-paper cards in 03 and 06; retain their existing folds and motion. */
article.ys-landing--fractional_cbo :is(#ownership_risk, #who_this_is_for) .ys-landing__prose > ul li {
	background-color: var(--ys-service-ivory);
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(1.62rem - 1px),
		color-mix(in srgb, var(--ys-service-navy) 12%, transparent) calc(1.62rem - 1px),
		color-mix(in srgb, var(--ys-service-navy) 12%, transparent) 1.62rem
	);
	background-size: 100% 1.62rem;
	color: var(--ys-service-navy);
}

/* 07 — number above heading, with the original photo colors restored. */
article.ys-landing--fractional_cbo #why_yulia .ys-photo-scatter__heading {
	align-items: flex-start;
	flex-direction: column;
}

article#ys-landing-fractional_cbo #why_yulia .ys-photo-scatter__heading > .ys-heading-stamp-host {
	align-self: flex-start;
}

article.ys-landing--fractional_cbo #why_yulia .ys-photo-scatter__image {
	filter: none;
}
article.ys-landing--fractional_cbo #why_yulia .ys-photo-scatter__copy {
	color: inherit;
}

/* 08 — palette cards, with a contrasting navy statement panel. */
article.ys-landing--fractional_cbo #point_of_view .ys-landing__prose > :is(p, blockquote) {
	--ys-pov-card-bg: var(--ys-fractional-card, var(--ys-service-cream));
	background-color: var(--ys-pov-card-bg);
	background-image: none;
	color: var(--ys-fractional-card-ink, var(--ys-service-navy));
}

article.ys-landing--fractional_cbo #point_of_view .ys-landing__prose > p:nth-child(-n + 3)::before {
	background-color: var(--ys-service-navy);
	color: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo #point_of_view .ys-landing__prose > blockquote {
	--ys-fractional-card: var(--ys-service-navy);
	--ys-fractional-card-ink: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo #point_of_view .ys-landing__prose > blockquote::after {
	background-color: var(--ys-service-card);
}

/* 09 — remove decorative photo overlay paint, not the photograph. */
article.ys-landing--fractional_cbo #final_cta :is(.ys-cta-feature__ordinal, .ys-cta-feature__eyebrow, .ys-cta-feature__title, .ys-cta-feature__prose, .ys-cta-feature__prose a) {
	color: inherit;
}

article.ys-landing--fractional_cbo #final_cta .ys-cta-feature__media::after {
	background-color: transparent;
	background-image: none;
}

/* Main CTAs — same compact pill treatment as brand-consultant. */
article.ys-landing--fractional_cbo {
	--ys-main-cta-bg: var(--ys-service-coral);
	--ys-main-cta-ink: var(--ys-service-navy);
}

article.ys-landing--fractional_cbo :is(#ownership_risk, #final_cta) {
	--ys-main-cta-bg: var(--ys-service-navy);
	--ys-main-cta-ink: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo :is(#future_state, #why_yulia) {
	--ys-main-cta-bg: var(--ys-service-ivory);
}

article.ys-landing--fractional_cbo :is(#hero, #leadership_gap, #question, #ownership_risk, #future_state, #responsibilities, #who_this_is_for, #why_yulia, #point_of_view, #final_cta) .ys-landing__cta--primary {
	--ys-main-arrow-bg: var(--ys-main-cta-ink);
	--ys-main-arrow-ink: var(--ys-main-cta-bg);
	align-items: center;
	background-color: var(--ys-main-cta-bg);
	background-image: none;
	border: 1px solid transparent;
	border-radius: 100vw;
	color: var(--ys-main-cta-ink);
	display: inline-flex;
	font-size: clamp(0.88rem, 1.1vw, 1rem);
	font-weight: 700;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	justify-content: space-between;
	letter-spacing: normal;
	line-height: 1.2;
	max-width: 100%;
	min-height: 2.75rem;
	min-width: min(13rem, 100%);
	padding: 0.45rem 0.7rem 0.45rem 1.1rem;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
}

article#ys-landing-fractional_cbo .ys-landing__cta--primary {
	transform: none;
	transition: background-color 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms cubic-bezier(.2,.8,.2,1), color 260ms cubic-bezier(.2,.8,.2,1), transform 500ms cubic-bezier(.2,.8,.2,1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	article#ys-landing-fractional_cbo .ys-landing__cta--primary:not(:disabled):not([aria-disabled="true"]) {
		transform: translate(var(--ys-why-cta-x, 0px), var(--ys-why-cta-y, 0px));
	}

	article#ys-landing-fractional_cbo .ys-landing__cta--primary:not(:disabled):not([aria-disabled="true"]):active {
		transform: translate(var(--ys-why-cta-x, 0px), calc(var(--ys-why-cta-y, 0px) + 2px)) scale(0.97);
	}
}

@media (prefers-reduced-motion: reduce) {
	article#ys-landing-fractional_cbo .ys-landing__cta--primary {
		transition: none;
	}
}

article.ys-landing--fractional_cbo :is(#hero, #leadership_gap, #question, #ownership_risk, #future_state, #responsibilities, #who_this_is_for, #why_yulia, #point_of_view, #final_cta) .ys-landing__cta--primary:is(:hover, :focus-visible):not(:disabled) {
	--ys-main-arrow-bg: var(--ys-service-navy);
	--ys-main-arrow-ink: var(--ys-service-cream);
	background-color: var(--ys-service-cream);
	border-color: var(--ys-service-navy);
	color: var(--ys-service-navy);
}

article.ys-landing--fractional_cbo :is(#hero, #leadership_gap, #question, #ownership_risk, #future_state, #responsibilities, #who_this_is_for, #why_yulia, #point_of_view, #final_cta) .ys-landing__cta--primary:focus-visible {
	outline: 2px solid var(--ys-service-ink);
	outline-offset: 4px;
}

article.ys-landing--fractional_cbo :is(#hero, #leadership_gap, #question, #ownership_risk, #future_state, #responsibilities, #who_this_is_for, #why_yulia, #point_of_view, #final_cta) .ys-landing__cta--primary::after {
	background-color: var(--ys-main-arrow-bg);
	border: 1px solid var(--ys-main-arrow-ink);
	border-radius: 50%;
	color: var(--ys-main-arrow-ink);
	content: "↗";
	display: inline-grid;
	flex: 0 0 auto;
	font-size: 1em;
	height: 2.1em;
	line-height: 1;
	margin-left: 0;
	place-items: center;
	transform: none;
	width: 2.1em;
}

article.ys-landing--fractional_cbo #hero .brand-editorial-hero__actions .ys-landing__cta--secondary,
article.ys-landing--fractional_cbo :is(#leadership_gap, #question, #ownership_risk, #future_state, #responsibilities, #who_this_is_for, #why_yulia, #point_of_view, #final_cta) .ys-landing__cta--secondary {
	background-color: transparent;
	background-image: none;
	color: inherit;
}