/*
 * Innovation & AI — the page sheet.
 *
 * Loads on top of pages.css when the template is page-innovation-ds.php. Everything
 * generic this page needed is in layout.css: .fc-fold and .fc-hero-copy for the fold,
 * .fc-stack for every gap, .fc-rail-split and .fc-sticky-rail for the capabilities, and
 * the fcMarquee keyframes for the agents. What is left in here is this page's own.
 *
 * ── THE DOTTED FRAME IS SHARED WITHIN THIS PAGE ─────────────────────────────
 *
 * Ten frames — five square pain-point tiles, five 16/10 capability frames — differing
 * only in aspect ratio and inner padding, both of which the caller sets. It lives here
 * and not in layout.css because it is one page's device so far; the day a second page
 * wants it, it moves, and .fc-dotframe is already named as though it were shared.
 *
 * ── THE MARQUEES REUSE fcMarquee AND CANNOT REUSE .fc-marquee-band ──────────
 *
 * The keyframes in layout.css are the right ones — 0 to -50%, which is why the track's
 * two halves have to be identical. .fc-marquee-band is not, because it hard-sets
 * height: var(--marquee-height) and gap: var(--gap-marquee) for the logo wall, and these
 * three rows are type at three different speeds with the middle one reversed. Reversing
 * is animation-direction, not a second set of keyframes: the export's fcMarqueeR is
 * fcMarqueeL backwards and nothing more.
 *
 * Under prefers-reduced-motion the global rule in tokens.css stops all three at -50%,
 * which is the second copy of the same names. Nothing goes blank.
 */

/*
 * THE RAIL'S SMOOTH SCROLL, and the one rule in here that is not under body.fc-ds.
 *
 * The export scrolls the rail's targets with window.scrollTo({ behavior: 'smooth' }).
 * Doing it in CSS instead means the rail's five rows stay ordinary anchors: they work
 * with the script absent, they put focus on the target the way a jump link should, and
 * middle-clicking one still opens it in a tab. None of that survives a click handler
 * that calls preventDefault.
 *
 * html rather than body.fc-ds html, because scroll-behavior only has an effect on the
 * scrolling element. This is safe to state unscoped because the sheet itself is scoped —
 * inc/ds.php enqueues it for page-innovation-ds.php and nothing else.
 *
 * It needs its own reduced-motion guard: the global one in tokens.css is under
 * `body.fc-ds *`, and html is not a descendant of the body.
 */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE FOLD
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-innovation-hero {
	background: var(--fc-ink-12);
	/*
	 * The design's own floor, and lower than .fc-fold's 420: a three-line serif
	 * headline plus a paragraph plus a button needs the room, but never more room than
	 * the viewport has, or the button lands below the fold on a short laptop.
	 */
	min-height: min(520px, calc(100svh - var(--nav-height)));
}

/*
 * contain, against .fc-cover's cover, and the padding is the point. The artwork is a
 * single sphere centred on a field: a cover crop cuts the top and the bottom off it
 * against the fold's own edges, where the sphere was drawn to be seen whole. A little
 * air above and below is what it wants.
 *
 * The padding is what does the insetting, and it works because everything in here is
 * border-box: object-fit lays the picture out inside the CONTENT box, so padding pulls
 * the drawing in while the element itself still fills the fold. vh in the middle term,
 * so a short laptop gives up its air before the sphere gives up its size.
 *
 * mix-blend-mode is what makes the fit invisible, and it is the reason this did not
 * need a second background colour. The artwork's field is pure black; this section is
 * #121212. A contained picture would otherwise sit in a faintly darker rectangle with
 * a visible edge down each side. lighten takes the lighter of the two per channel, so
 * the field takes the section's own value and disappears — and the sphere, every part
 * of which is lighter than #121212, is left alone.
 *
 * object-position is plain centre now. The 45% bias was there to keep the sphere's
 * light out from under the headline while the picture was being cropped; with nothing
 * cropped there is no crop to bias, and equal air top and bottom is the whole point.
 *
 * ── THE DIMMING IS ON THE PICTURE, AND THAT IS THE POINT ────────────────────
 *
 * The sphere is bright on its right side and white type over it fails undimmed, so it is
 * dimmed to the export's 0.64 — the same figure its rgba(0,0,0,0.36) scrim arrived at.
 * The scrim itself is gone. inset:0 over the whole fold meant it also washed the parts of
 * the fold that are only ground, which took a declared #121212 down to #0b0b0b: one value
 * from the #0a0a0a section below, so the two read as one continuous black. Here the wash
 * lands on the artwork alone and the fold keeps the colour it declares.
 *
 * opacity and not filter: brightness(), because lighten has already made the field equal
 * the backdrop, so compositing the result at 0.64 leaves the field at exactly #121212 —
 * an unmixed value rather than one that happens to round there.
 */
body.fc-ds .fc-innovation-hero__art {
	object-fit: contain;
	object-position: center;
	padding-block: clamp(16px, 3vh, 40px);
	mix-blend-mode: lighten;
	opacity: 0.64;
}

/*
 * The design's third hero arrangement — words CENTRED in the frame the artwork owns,
 * where .fc-hero-copy--foot pushes them to the bottom-left. Hence its own class rather
 * than that modifier.
 *
 * The cross-axis centring and the centred text come from .fc-stack--center in the markup,
 * NOT from here, and that is load-bearing: .fc-btn sets align-self: flex-start on itself,
 * which beats any align-items its parent declares, so the button would sit hard left under
 * a centred headline. layout.css answers that in one place — .fc-stack--center > .fc-btn —
 * and restating align-items here instead would silently miss it.
 *
 * What is left is the two things the modifier does not know about: the main-axis centring
 * that puts the block in the middle of the fold, and the fold's own padding.
 *
 * One gap for all four children, where the export states two nearly-identical clamps.
 * The vh term is what matters: on a short viewport the whole stack tightens together
 * rather than each gap tightening on its own schedule.
 */
body.fc-ds .fc-innovation-hero__copy {
	--stack-gap: clamp(16px, 3vh, 32px);
	justify-content: center;
	padding: clamp(24px, 4vh, 64px) var(--gutter-page);
}

/*
 * Mono, uppercase, and larger than .fc-mono's 14px: this is the page's title said once
 * before the claim, not a caption. The text-shadow is the export's own — a white halo,
 * which is what keeps the letterforms legible where the sphere is brightest behind them.
 */
body.fc-ds .fc-innovation-hero__kicker {
	margin: 0;
	font-size: var(--type-body-18);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--fc-white);
	text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.29);
}

/*
 * 1.1 rather than .fc-display-hero's flush 1. Every other hero on the site is one or two
 * words on one line, where solid leading is right; this is a sentence over three lines,
 * and serif display type set solid over three lines closes up into a block.
 */
body.fc-ds .fc-innovation-hero__title {
	max-width: 900px;
	margin: 0;
	line-height: 1.1;
	color: var(--fc-white);
}

/* Softer than the headline, so the claim keeps the first read. The export's own value. */
body.fc-ds .fc-innovation-hero__lead {
	max-width: 640px;
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
}

/*
 * THE ROTATING PHRASE.
 *
 * Whichever phrase is in flow is inline; the other two are display:none, so the line
 * reflows to the phrase's own width — which is the whole point, and the reason this is
 * not three phrases stacked in one grid cell and cross-faded. A stack is as wide as its
 * widest child forever, so the centred last line would sit off-centre for the two
 * shorter phrases and the full stop would float away from the word.
 *
 * display:none also takes the other two out of the accessibility tree, so a screen
 * reader hears exactly one complete sentence and no aria-hidden is needed.
 *
 * There is no transition. The export cuts, and a cross-fade between two phrases of
 * different widths on a reflowing line reads as a stumble rather than a change.
 */
body.fc-ds .fc-rotate__word {
	display: none;
	font-style: italic;
}

body.fc-ds .fc-rotate__word.is-on {
	display: inline;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * OF COURSE WE HAVE AI
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * #0a0a0a, a step darker than the fold above it. Two dark sections at the same value
 * would read as one very long black band with no join; a step is enough to draw the join
 * without a hairline across it.
 */
body.fc-ds .fc-innovation-decision {
	background: var(--fc-ink-10);
}

body.fc-ds .fc-innovation-decision__col {
	--stack-gap: var(--gap-blocks);
	max-width: 760px;
	margin-inline: auto;
}

body.fc-ds .fc-innovation-decision__pair {
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
}

body.fc-ds .fc-innovation-decision__title,
body.fc-ds .fc-innovation-decision__sub {
	margin: 0;
	color: var(--fc-bone);
}

/* The second statement is a step down from the first, and still the display serif. */
body.fc-ds .fc-innovation-decision__sub {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--type-h3-48);
	line-height: var(--lh-flush);
	letter-spacing: var(--ls-display);
	text-wrap: pretty;
}

/*
 * The indent IS the composition here — it is what makes each paragraph read as a note
 * under its heading rather than as the next thing on the page. --sp-54 for the export's
 * 50px, and deliberately not --indent-body: 132px would take a fifth of the column.
 */
body.fc-ds .fc-innovation-decision__copy {
	max-width: 620px;
	margin-inline-start: var(--sp-54);
}

@container page (max-width: 820px) {
	body.fc-ds .fc-innovation-decision__copy {
		margin-inline-start: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE DOTTED FRAME
 * A drawing on the diagram surface with four violet corner ticks around it.
 *
 * The ticks are four pseudo-elements on two elements rather than the export's four
 * empty spans per frame: forty empty spans would be serialized into the page's stored
 * content, where they would look like something an editor could delete.
 *
 * WHICH PSEUDO-ELEMENT IS WHICH CORNER:
 *   .fc-dotframe::before        top-left
 *   .fc-dotframe::after         top-right
 *   .fc-dotframe__art::before   bottom-left
 *   .fc-dotframe__art::after    bottom-right
 *
 * The art layer is inset:0 with PADDING, never inset:<pad>. An absolutely positioned
 * child is placed against its ancestor's padding box, so padding leaves the ticks on the
 * frame's corners while insetting the drawing; switching to inset would walk the bottom
 * two ticks inwards and break the set of four.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-dotframe {
	position: relative;
	width: 100%;
	background-color: var(--diagram-surface);
	background-image: var(--dot-grid);
	background-size: var(--dot-cell) var(--dot-cell);
}

body.fc-ds .fc-dotframe__art {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	padding: var(--frame-pad, 0px);
	display: flex;
	align-items: center;
	justify-content: center;
}

body.fc-ds .fc-dotframe::before,
body.fc-ds .fc-dotframe::after,
body.fc-ds .fc-dotframe__art::before,
body.fc-ds .fc-dotframe__art::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border-top: var(--stroke-2) solid var(--fc-violet);
	border-left: var(--stroke-2) solid var(--fc-violet);
}

body.fc-ds .fc-dotframe::before {
	top: 0;
	left: 0;
}

body.fc-ds .fc-dotframe::after {
	top: 0;
	right: 0;
	transform: rotate(90deg);
}

body.fc-ds .fc-dotframe__art::before {
	bottom: 0;
	left: 0;
	transform: rotate(270deg);
}

body.fc-ds .fc-dotframe__art::after {
	bottom: 0;
	right: 0;
	transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * WE HEAR YOUR PAIN POINTS
 *
 * .fc-bleed, and each part pays its own gutter, because the hairlines above and below
 * the tiles run the full width of the page while the grids either side of them line up
 * with the rest of the page's copy. A .fc-section with padding could do one or the other.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-innovation-pain {
	background: var(--fc-bone);
}

body.fc-ds .fc-innovation-pain__head {
	padding-inline: var(--gutter-page);
}

/*
 * The one heading on this page that is NOT the display serif. It is the reader's own
 * complaint said back to them, and in the serif it would read as an announcement.
 * Semibold grotesk, set tight, is the design's own choice and it is the right one.
 */
body.fc-ds .fc-innovation-pain__title {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(26px, 3cqw, 48px);
	line-height: var(--lh-flush);
	letter-spacing: -0.02em;
	color: var(--fc-ink-12);
}

body.fc-ds .fc-innovation-pain__band {
	margin-top: var(--sp-72);
	border-top: var(--stroke-1) solid var(--fc-ink-a20);
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

/*
 * Two grids, not one grid of five tile-and-sentence cells: the hairlines belong to the
 * tiles alone, which is the design's composition. One class on both is what keeps a tile
 * above its own sentence at every width — change the steps here and both follow.
 */
body.fc-ds .fc-innovation-pain__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-32);
	padding-inline: var(--gutter-page);
}

body.fc-ds .fc-innovation-pain__points {
	padding-top: var(--sp-32);
}

body.fc-ds .fc-innovation-pain__tile {
	--frame-pad: var(--sp-24);
	max-width: 200px;
	aspect-ratio: 1;
}

body.fc-ds .fc-innovation-pain__tile .fc-dotframe__svg {
	width: 100%;
	height: auto;
}

body.fc-ds .fc-innovation-pain__foot {
	margin-top: var(--sp-72);
	padding-inline: var(--gutter-page);
}

body.fc-ds .fc-innovation-pain__aside {
	max-width: 620px;
}

body.fc-ds .fc-innovation-pain__ask {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--type-h3-48);
	line-height: var(--lh-flush);
	letter-spacing: var(--ls-display);
	color: var(--fc-ink-12);
	text-wrap: pretty;
}

/*
 * Five across only while five 200px tiles and five sentences both fit. Below that it is
 * three, then two, then one — and because it is one class, the sentences break with the
 * tiles rather than against them.
 */
@container page (max-width: 1100px) {
	body.fc-ds .fc-innovation-pain__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: var(--sp-32);
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-innovation-pain__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container page (max-width: 440px) {
	body.fc-ds .fc-innovation-pain__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* On one column the tile is the sentence's illustration, so it centres over it. */
	body.fc-ds .fc-innovation-pain__tile {
		margin-inline: auto;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * AND BUILD SOLUTIONS YOU ACTUALLY NEED
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-innovation-solutions {
	background: var(--fc-bone);
}

body.fc-ds .fc-innovation-solutions__split {
	padding-inline: var(--gutter-page);
}

body.fc-ds .fc-innovation-rail__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: var(--type-h3-48);
	line-height: 1.04;
	letter-spacing: var(--ls-display);
	color: var(--fc-ink-12);
	text-wrap: pretty;
}

body.fc-ds .fc-innovation-rail__nav {
	display: flex;
	flex-direction: column;
	margin-top: var(--sp-24);
}

/*
 * Anchors, not the export's buttons, so the rail works with no JavaScript — see the note
 * in inc/ds-innovation.php. 18px rather than the export's 20: these are index labels, and
 * they sit next to a 400px rail where the longest of the five has to stay on one line.
 *
 * The left rule is always there and only its colour changes, so nothing shifts sideways
 * when the active row moves.
 */
body.fc-ds .fc-innovation-rail__link {
	padding: 12px 0 12px 16px;
	border-left: var(--stroke-2) solid transparent;
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: var(--type-body-16);
	line-height: var(--lh-body);
	color: var(--fc-ink-a60);
	text-decoration: none;
	transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

body.fc-ds .fc-innovation-rail__link:hover {
	color: var(--fc-violet);
}

body.fc-ds .fc-innovation-rail__link.is-on {
	border-left-color: var(--fc-violet);
	color: var(--fc-ink-12);
}

body.fc-ds .fc-innovation-caps {
	--stack-gap: var(--gap-blocks);
}

/*
 * The landing offset, and it has to match the rail's own sticky top: click a row and the
 * capability should arrive where the rail is, not under the nav. innovation.js does not
 * compute an offset for the same reason — scroll-margin already states it, once.
 */
body.fc-ds .fc-innovation-cap {
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
	scroll-margin-top: var(--pad-section);
}

body.fc-ds .fc-innovation-cap__frame {
	aspect-ratio: 16 / 10;
}

/* 78% of the frame, so the drawing sits in the dot field rather than filling it. */
body.fc-ds .fc-innovation-cap__svg {
	width: 78%;
	height: auto;
}

/*
 * Regular weight with a bold lead, which is the export's own contrast and the reason
 * this is not .fc-h5: that role is semibold throughout, so the <strong> in it would have
 * almost nothing to say.
 */
body.fc-ds .fc-innovation-cap__title {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-regular);
	font-size: var(--type-h5-24);
	line-height: var(--lh-snug);
	color: var(--fc-ink-12);
}

body.fc-ds .fc-innovation-cap__title strong {
	font-weight: var(--fw-bold);
}

body.fc-ds .fc-innovation-cap__copy {
	max-width: 640px;
}

body.fc-ds .fc-innovation-solutions__foot {
	margin-top: var(--gap-blocks);
	padding-inline: var(--gutter-page);
}

body.fc-ds .fc-innovation-solutions__close {
	max-width: 620px;
}

/* The labels inside the drawings. 11px is a diagram annotation, not body copy. */
body.fc-ds .fc-innovation-cap__svg .fc-dgl {
	font-family: var(--font-core);
	font-size: 11px;
	font-weight: var(--fw-medium);
}

/* The one number that is a claim rather than a label, so it is set in the quote serif. */
body.fc-ds .fc-innovation-cap__svg .fc-dgn {
	font-family: var(--font-quote);
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * BUT WAIT, THERE'S MORE
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-innovation-more {
	background: var(--fc-bone);
}

body.fc-ds .fc-innovation-more__head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-72);
	align-items: start;
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: var(--gutter-page);
}

body.fc-ds .fc-innovation-more__title {
	margin: 0;
	line-height: 1.02;
	color: var(--fc-ink-12);
}

body.fc-ds .fc-innovation-more__copy {
	max-width: 420px;
}

@container page (max-width: 820px) {
	body.fc-ds .fc-innovation-more__head {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-32);
	}
}

/* THE AGENTS. See the note at the head of this file for why these are not .fc-marquee-*. */
body.fc-ds .fc-innovation-agents {
	margin-top: var(--sp-72);
	padding-block: var(--sp-54);
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	overflow: hidden;
}

body.fc-ds .fc-innovation-agents__row {
	overflow: hidden;
}

body.fc-ds .fc-innovation-agents__track {
	display: flex;
	width: max-content;
	gap: var(--sp-54);
	animation-name: fcMarquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/*
 * Three speeds, so the rows never line up into a grid. The middle row runs the other way
 * — animation-direction, on the same keyframes.
 */
body.fc-ds .fc-innovation-agents__track--a {
	animation-duration: 52s;
}

body.fc-ds .fc-innovation-agents__track--b {
	animation-duration: 58s;
	animation-direction: reverse;
}

body.fc-ds .fc-innovation-agents__track--c {
	animation-duration: 64s;
}

body.fc-ds .fc-innovation-agent {
	padding-block: 2px;
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: var(--type-h5-24);
	line-height: var(--lh-snug);
	color: var(--fc-ink-12);
	white-space: nowrap;
}