/*
 * STORY — THE QUALITY GROUP. Cyan on near-black.
 *
 * Loads on one URL, on top of blog.css and story.css. story.css carries the bar, the facts, the
 * copy stream, the closing band and the CTA; this file is the paint, the four compositions only
 * this page draws (the fold, the nine-cell board, the brand gallery, the fulfillment floor) and
 * the three places the design tunes a shared component.
 *
 * ── THE ONE DARK STORY OF THE FOUR ──────────────────────────────────────────
 *
 * Which is why more is overridden here than in the other three sheets: every hairline, every
 * muted grey and both fact colours are white at an alpha rather than ink at one. They all arrive
 * through the same --st-* properties story.css already reads, so nothing in the shared layer knows
 * this page is dark — it is told, once, at the top of this file.
 *
 * ── WHY THE LITERALS ARE LITERALS ───────────────────────────────────────────
 *
 * 220px cells, the 480px hero column, 560/520px image floors, 40px cell padding and the clamp()
 * ramps are the design's own numbers and no token means any of them. Where a token does mean the
 * thing — the gutters, the 120/72/54 rhythm, the weights, the stroke — the token is used.
 *
 * Breakpoints are @container page, never @media. See the head of story.css.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SURFACE
 * Near-black, on the BODY. It cannot go on .fc-page: .fc-shell is capped at --canvas (1920), so a
 * ground painted inside it leaves the theme's bone showing down both sides of a wider monitor and
 * under the fold of a short window — which on a dark page is not a subtle failure.
 * fc-story-tqg is added by fluent_commerce_story_body_class() to this post and nothing else.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds.fc-story-tqg {
	background: #0b0b0b;
}

body.fc-ds .fc-tqg {
	--st-accent: #00d3f2;
	/* The ink ON cyan. Not black: the design darkens it to a near-teal so the band reads warm. */
	--tqg-on-cyan: #062024;
	--tqg-ground: #0b0b0b;
	--st-ink: #ffffff;
	--st-copy: rgba(255, 255, 255, 0.85);
	--st-muted: rgba(255, 255, 255, 0.82);
	--st-hair: rgba(255, 255, 255, 0.2);
	--st-bar-bg: rgba(11, 11, 11, 0.94);
	--st-fact-on: #ffffff;
	--st-fact-hair: rgba(255, 255, 255, 0.28);
	/* A chevron in a narrow column, where MediaWorld draws an arrow in a wide one. */
	--st-mark: "\203A";
	--st-mark-w: 16px;
	/* The closing band is the accent, so the type on it is the near-teal. */
	--st-band-bg: var(--st-accent);
	--st-band-on: var(--tqg-on-cyan);
	--st-band-muted: rgba(6, 32, 36, 0.7);
	--st-band-measure: 1040px;
	--st-band-size: 48px;
	--st-band-weight: var(--fw-semibold);
	background: var(--tqg-ground);
	color: var(--st-ink);
	font-family: var(--font-core);
}

/* The label a fact carries is a step quieter than the fact itself. */
body.fc-ds .fc-tqg .fc-story-fact__label {
	color: rgba(255, 255, 255, 0.6);
}

body.fc-ds .fc-tqg .fc-story-fact__value {
	font-weight: var(--fw-medium);
}

/* Two facts across, capped so they stay beside each other in a wide column. */
body.fc-ds .fc-tqg-facts {
	--st-facts: 2;
	max-width: 640px;
}

/* The bar's back button: outlined in white, filling cyan on hover. */
body.fc-ds .fc-tqg .fc-story-back {
	--fc-btn-bg: transparent;
	--fc-btn-on: #ffffff;
	--fc-btn-edge: #ffffff;
}

body.fc-ds .fc-tqg .fc-story-back:hover {
	border-color: var(--st-accent);
	background: var(--st-accent);
	color: var(--tqg-on-cyan);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE FOLD
 * Type on the left, one photograph on the right in a column capped at 480px rather than given a
 * fraction: it is the narrowest hero image of the four stories and the headline is the widest, so
 * the type takes everything the picture does not need.
 *
 * ── THE PHOTOGRAPH SETS THE HEIGHT, AND THE TYPE FITS INSIDE IT ─────────────
 *
 * story-quality-group-hero.webp is 480 × 640, and the column it sits in is capped at 480 — so its
 * natural height on this fold is 640px at every desktop width, and the fold is 640px tall. It used
 * to be the other way round: the type column asked for 985px (120/72 of padding and three 96px
 * gaps around 467px of copy), the photograph was told height: 100% with object-fit: cover, and a
 * 480px-wide source was blown up to 738 × 984 and cropped back to 479 to fill it. A 1.54× upscale
 * of the only portrait in the set, which is what read as stretched.
 *
 * Nothing is cropped now and nothing is enlarged. What changed to pay for it is on .fc-tqg-hero
 * __text below: the same four blocks in a shorter column.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	align-items: stretch;
	border-bottom: var(--stroke-1) solid var(--st-hair);
}

/*
 * space-between across four parts, so the brand sits at the top, the facts on the photograph's
 * optical centre and the button on its foot.
 *
 * THE GAP IS A FLOOR, NOT A MEASURE. space-between owns the spacing whenever there is room, and
 * on a 640px fold there is. The floor only has to be small enough that this column never becomes
 * the thing that decides the fold's height — at 96px it was, by 345px. 8px is the insurance for
 * the widest windows, where the headline clamp reaches 84px and the copy grows to 493: 493 + 64
 * of padding + 24 of floor is 581, still inside 640.
 *
 * WHICH IS WHY THE VERTICAL INSET COMES DOWN TO 32. Everything the column does not spend on
 * padding, space-between hands to the gaps, and separating the four blocks is worth more here than
 * a deep inset: at 54 top and bottom the brands line and the CASE STUDY kicker ended up 20px
 * apart and read as one block. At 32 there is about 36px between each, which is the closest this
 * fold gets to the export's rhythm now that it is 345px shorter. The horizontal padding is
 * untouched — it is the page gutter on one side and the split's own inset on the other.
 */
body.fc-ds .fc-tqg-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-8);
	padding: var(--sp-32) var(--sp-72) var(--sp-32) var(--gutter-page);
}

/*
 * The facts board is a <dl>, and a <dl> arrives with 1em of margin top and bottom from the
 * browser's own stylesheet — 36px of it here, on a column with 640px to work in. Invisible while
 * the fold was 985px tall and space-between was absorbing everything; now it is the difference
 * between the photograph's bottom edge meeting the fold's rule and missing it by 36px at the
 * widest windows. Zeroed in this fold only: the flex gap above owns the spacing between these
 * four blocks, and the same <dl> on the other three stories is spaced by its margins.
 */
body.fc-ds .fc-tqg-hero__text .fc-story-facts {
	margin: 0;
}

body.fc-ds .fc-tqg-hero__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * The customer's name is set, not drawn: Build-18 ships no Quality Group wordmark, and
 * letterspaced Instrument Sans at 600 is what the design puts in its place.
 */
body.fc-ds .fc-tqg-name {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(18px, 1.6vw, 24px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ffffff;
}

/*
 * The three consumer brands, separated by an interpunct drawn in CSS rather than typed into the
 * copy. flex-wrap, because at 360px three brand names do not fit on one line and a separator
 * stranded at the end of a wrapped row is worse than a wrapped row.
 */
body.fc-ds .fc-tqg-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

body.fc-ds .fc-tqg-brand + .fc-tqg-brand::before {
	content: "\00B7";
	margin-right: 14px;
}

body.fc-ds .fc-tqg-hero__head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

/*
 * Instrument Sans at 600, not the display serif tokens.css gives every h1 — the same call
 * blog.css makes for in-article subheads: the serif is the site's voice and this page is wearing
 * the customer's. The widest ramp of the four stories, on the shortest headline of the four.
 */
body.fc-ds .fc-tqg-title {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(40px, 5vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	max-width: 16ch;
	color: #ffffff;
	text-wrap: pretty;
}

/* Cyan button, near-teal type, inverting on hover. */
body.fc-ds .fc-tqg .fc-story-visit {
	--fc-btn-bg: var(--st-accent);
	--fc-btn-on: var(--tqg-on-cyan);
	--fc-btn-edge: var(--st-accent);
}

body.fc-ds .fc-tqg .fc-story-visit:hover {
	background: var(--tqg-on-cyan);
	color: var(--st-accent);
}

/*
 * align-content: start IS THE RULE THAT KEEPS THE PHOTOGRAPH ITS OWN SIZE. This frame is a grid
 * item stretched to the row, and a lone grid item inside it is stretched again by default — which
 * on an <img> whose height is auto means the picture, not the box, is what gets pulled. Sizing the
 * implicit row to its content instead leaves the image at its natural height and puts it at the
 * top of the frame. The type column fits inside 640 at every width from 1101 up, so there is
 * nothing under the photograph to see; this is what guarantees that if that ever stops being true
 * the slack lands below it as the near-black the fold already is, rather than inside the picture.
 *
 * No height, no min-height, no object-fit: the shared rule in story.css (display: block, width:
 * 100%, height: auto) is the whole treatment, and 480 × 640 in a 480px column needs nothing else.
 */
body.fc-ds .fc-tqg-hero__shot {
	display: grid;
	align-content: start;
	overflow: hidden;
	border-left: var(--stroke-1) solid var(--st-hair);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SECTION LABEL
 * "Key results", "Many brands, many channels", "On the floor". Small, tracked out and cyan, and
 * the same object whether the markup calls it an h2 or a span — which of the two it is depends on
 * whether it names a section or introduces one, and the treatment does not change either way.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-label {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: 14px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--st-accent);
}

body.fc-ds .fc-tqg-panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-54);
	padding: 0 var(--gutter-page) var(--sp-120);
}

body.fc-ds .fc-tqg-panel--top {
	padding-top: var(--sp-120);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BOARD
 * Nine cells, three across, on a hairline ground — so the rules between them are the 1px gaps
 * showing through and no cell owns a border. Which is what keeps the rules single when the grid
 * drops to two columns and the last row is short.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-board {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--stroke-1);
	background: var(--st-hair);
}

body.fc-ds .fc-tqg-cell {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-32);
	min-height: 220px;
	padding: 40px;
	background: var(--tqg-ground);
}

body.fc-ds .fc-tqg-cell__value {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(30px, 3vw, 52px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--st-accent);
}

body.fc-ds .fc-tqg-cell__label {
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: 1.45;
	color: var(--st-copy);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE OPENING PARAGRAPH
 * One paragraph at the reading measure, between the board and the gallery.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-open {
	max-width: calc(820px + 2 * var(--gutter-page));
	padding: 0 var(--gutter-page) var(--sp-120);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE GALLERY
 * Four figures cropped to 4:5 whatever shape the source file is, so the row reads as one gallery.
 * The crop is the design's per-image choice and lives here rather than in a style attribute.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

body.fc-ds .fc-tqg-shot {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.fc-ds .fc-tqg-shot .fc-story-photo {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}

body.fc-ds .fc-tqg-shot--esn .fc-story-photo {
	object-position: center 20%;
}

body.fc-ds .fc-tqg-shot--store .fc-story-photo {
	object-position: center 30%;
}

body.fc-ds .fc-tqg-shot__by {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STORY
 * Heading in a narrow left column, copy in a wide right one. 0.42fr against 1fr, which at 1920
 * gives the heading about 420px: three lines of a 34px heading, which is what the longer of the
 * two titles needs.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-row {
	display: grid;
	grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
	gap: var(--sp-72);
	align-items: start;
	padding: 0 var(--gutter-page) var(--sp-120);
}

body.fc-ds .fc-tqg-blocks {
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
	max-width: 70ch;
}

/*
 * THE PULL QUOTE IS A BOX HERE, not the rule down the left that the other three stories draw. The
 * shorthand deliberately replaces story.css's border-left longhand — on a near-black page a 3px
 * cyan rule beside 26px type reads as an underline that went the wrong way, and the design boxes
 * it instead.
 */
body.fc-ds .fc-tqg .fc-story-quote {
	margin: var(--sp-8) 0;
	padding: 40px;
	border: var(--stroke-1) solid var(--st-hair);
}

body.fc-ds .fc-tqg .fc-story-quote__words {
	font-weight: var(--fw-regular);
}

/* Name over role, where the shared caption runs them along one line. */
body.fc-ds .fc-tqg .fc-story-quote__by {
	flex-direction: column;
	gap: 4px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE FLOOR
 * A claim at display size beside the robots. The one band on the page with a rule above and
 * below it, which is what separates it from the two grids either side.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-floor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
	align-items: stretch;
	border-top: var(--stroke-1) solid var(--st-hair);
	border-bottom: var(--stroke-1) solid var(--st-hair);
}

body.fc-ds .fc-tqg-floor__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: var(--sp-120) var(--sp-72) var(--sp-120) var(--gutter-page);
}

body.fc-ds .fc-tqg-floor__claim {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(30px, 3.2vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-wrap: pretty;
}

body.fc-ds .fc-tqg-floor__copy {
	max-width: 44ch;
	font-size: var(--type-body-16);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	text-wrap: pretty;
}

body.fc-ds .fc-tqg-floor__shot {
	display: grid;
	overflow: hidden;
	border-left: var(--stroke-1) solid var(--st-hair);
}

body.fc-ds .fc-tqg-floor__shot .fc-story-photo {
	height: 100%;
	min-height: 520px;
	object-fit: cover;
	object-position: center;
}

/* The band's words are tighter here than the shared default, and heavier. */
body.fc-ds .fc-tqg-band .fc-story-band__words {
	line-height: 1.15;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSE
 * Results on the left, what is next on the right. Two columns of prose, no rule between them:
 * two halves of one answer rather than a comparison.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-close {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 96px;
	padding: var(--sp-120) var(--gutter-page);
}

body.fc-ds .fc-tqg-col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

/* The two closing headings are a step smaller than the story's. */
body.fc-ds .fc-tqg-close .fc-story-h2 {
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1.15;
	letter-spacing: 0;
}

/* A quotation at body size with a rule over it, which is how the design ends the column. */
body.fc-ds .fc-tqg-pull {
	padding-top: var(--sp-24);
	border-top: var(--stroke-1) solid var(--st-hair);
	font-size: var(--type-body-16);
	line-height: 1.75;
	color: var(--st-copy);
	text-wrap: pretty;
}

body.fc-ds .fc-tqg-credit {
	font-size: 15px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSE'S BUTTON
 * Cyan on near-black, inverting the way the visit button does. story.css owns the geometry;
 * owning the resting colour means owning the hover.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-tqg-cta .fc-btn {
	--fc-btn-bg: var(--st-accent);
	--fc-btn-on: var(--tqg-on-cyan);
	--fc-btn-edge: var(--st-accent);
}

body.fc-ds .fc-tqg-cta .fc-btn:hover {
	background: var(--tqg-on-cyan);
	color: var(--st-accent);
}

body.fc-ds .fc-tqg-cta .fc-btn:focus-visible {
	outline-color: var(--st-accent);
}

/*
 * Quieter than --st-muted, which on this page is white at 82% because the gallery notes need to
 * be readable. The same 82% on the last link of the page would make it the brightest thing under
 * the button.
 */
body.fc-ds .fc-tqg-cta .fc-story-back--plain {
	color: rgba(255, 255, 255, 0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROWER
 * The export's own step is 1100. Below it both split bands stop being splits: the photograph goes
 * under the type, and its hairline moves from the left edge to the top, because a vertical rule
 * between two stacked blocks is a rule between nothing.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	body.fc-ds .fc-tqg-hero,
	body.fc-ds .fc-tqg-floor,
	body.fc-ds .fc-tqg-row,
	body.fc-ds .fc-tqg-close {
		grid-template-columns: 1fr;
	}

	body.fc-ds .fc-tqg-hero__text,
	body.fc-ds .fc-tqg-floor__text {
		gap: 40px;
		padding: var(--sp-72) var(--gutter-page);
	}

	body.fc-ds .fc-tqg-hero__shot,
	body.fc-ds .fc-tqg-floor__shot {
		border-top: var(--stroke-1) solid var(--st-hair);
		border-left: 0;
	}

	body.fc-ds .fc-tqg-floor__shot .fc-story-photo {
		min-height: min(56vh, 440px);
	}

	/*
	 * THE CROP COMES BACK WHEN THE COLUMN DOES NOT. Above this step the hero photograph is left at
	 * its natural size because its column is 480px, the width the file was cut for. Stacked, the
	 * column is the whole measure — a 480px source across 1000px would be a 2× enlargement of a
	 * portrait tall enough to be the only thing on the screen. So here it is a band again: the
	 * frame stretches, the picture fills it, and the crop is the athlete's head in the top third.
	 * The floor shot above keeps this treatment at every width and carries it in its own rule.
	 */
	body.fc-ds .fc-tqg-hero__shot {
		align-content: stretch;
	}

	body.fc-ds .fc-tqg-hero__shot .fc-story-photo {
		height: min(56vh, 440px);
		object-fit: cover;
		object-position: center 25%;
	}

	body.fc-ds .fc-tqg-board,
	body.fc-ds .fc-tqg-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.fc-ds .fc-tqg-row {
		gap: var(--sp-32);
	}

	body.fc-ds .fc-tqg-close {
		gap: var(--sp-54);
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-tqg-panel,
	body.fc-ds .fc-tqg-open,
	body.fc-ds .fc-tqg-row {
		padding-bottom: var(--sp-72);
	}

	body.fc-ds .fc-tqg-panel--top,
	body.fc-ds .fc-tqg-close {
		padding-top: var(--sp-72);
	}

	body.fc-ds .fc-tqg-close {
		padding-bottom: var(--sp-72);
	}

	body.fc-ds .fc-tqg-cell {
		min-height: 0;
		padding: var(--sp-32) var(--sp-24);
	}

	body.fc-ds .fc-tqg .fc-story-quote {
		padding: var(--sp-32) var(--sp-24);
	}
}

@container page (max-width: 700px) {
	body.fc-ds .fc-tqg-board {
		grid-template-columns: 1fr;
	}
}