/* =============================================================================
   Bakery Combinations — D6 feedback, round 2 (client document
   "BCA_Website Feedback D6 v2", Oct 2026)

   Loaded after every other sheet (inc/feedback-v2.php), so these rules settle
   the round's items wherever the original rule lives. Each block names the
   item it answers.

   1. Big screens (ALL-1)
   2. Page titles and the space above the buttons (ALL-2, OUR STORY, SUPPLIERS,
      CASE STUDIES, INSIGHTS)
   3. Card spacing (HOME: "space below the blurb equal to the space above the
      heading")
   4. Buttons (ABOUT US, AFTERSALES)
   5. The supplier banner (HOME, AFTERSALES)
   6. Header search (HOME)
   7. Product cards — supplier and industry links (HOME)
   8. Equipment categories (EQUIPMENT)
   9. Ambient video (HOME, TURNKEY, INDUSTRIAL)
   10. Supplier pages — figures and film (SUPPLIER INNER PAGES)
   11. Our Suppliers — logo sizes (OUR SUPPLIERS)
   12. Client quotes (INDUSTRIAL, Testimonials document)
   13. Footer social (FOOTER)
   14. Odds and ends

   Round 3, the QA review of round 2, follows at the foot:
   15. Hero lattices (ALL, CASE STUDIES, INSIGHTS)
   16. Our Story — the milestone crops (OUR STORY)
   17. Footage (HOME, EQUIPMENT, INDUSTRIAL, SUPPLIER INNER PAGES)
   18. Industrial — the benefits' button pair (INDUSTRIAL)
   19. Aftersales — the service photos (AFTERSALES)
   20. Last touches — band height, light band lattice, Artisan intro photos (HOME, SUPPLIER INNER PAGES, ARTISAN)
   ============================================================================= */

/* 1. Big screens (ALL-1) -------------------------------------------------------
   Past 1440 the head script lays the page out at 1440 and zooms it to the
   screen (inc/feedback-v2.php). A length in viewport units is not shrunk by
   that zoom, so the few rules sized in them are divided back by it. */

.is-stage-scaled .site {
	min-height: calc(100vh / var(--stage-zoom, 1));
}

.is-stage-scaled .catalogue__rail {
	max-height: calc((100vh / var(--stage-zoom, 1)) - 48px);
}

/* The pointer ring (main.js) is placed at the mouse's position on screen,
   which the zoom would otherwise multiply: the ring drew further from the
   real pointer the further right and down the mouse went, so clicks landed
   away from where it showed. It is drawn outside the zoom, at its own size;
   the head script hands over the inverse of the scale for it. */
.is-stage-scaled .pointer {
	zoom: var(--stage-unzoom, 1);
}

/* 2. Page titles and the space above the buttons --------------------------------
   Every top band now sets its title the size About Us, Our Suppliers and Our
   Story do (Case Studies, Insights and the supplier pages ran 72px against
   88px), and opens the same air between the blurb and the buttons as the
   Our Suppliers band the client marked, instead of pinning the buttons to
   the foot of a tall column. */

.panel-hero__title,
.insights-page .panel-hero__title,
.cases-page .panel-hero__title {
	/* 40px @430 → 88px @1440 — the Our Story ramp. */
	font-size: clamp(40px, 19.56px + 4.7525vw, 88px);
	line-height: 0.9;
}

@media (min-width: 1200px) {

	.panel-hero__copy,
	.insights-page .panel-hero__copy,
	.cases-page .panel-hero__copy {
		justify-content: flex-start;
		gap: 96px;
	}

	.panel-hero__title,
	.cases-page .panel-hero__title {
		max-width: none;
		line-height: 0.9;
	}

	.panel-hero__head,
	.insights-page .panel-hero__head,
	.cases-page .panel-hero__head {
		gap: 16px;
	}

	.panel-hero__lede,
	.insights-page .panel-hero__lede,
	.cases-page .panel-hero__lede {
		margin-top: 0;
	}

	.story-hero__copy {
		justify-content: flex-start;
		gap: 96px;
	}
}

/* 3. Card spacing ---------------------------------------------------------------
   The process steps ran their copy to the foot of the cell with no padding
   under it, so the blurb sat on the rule while the heading had 24px over
   it. The cell now closes with the same 24px it opens with. */

@media (min-width: 1200px) {

	.process__cell {
		padding-bottom: 24px;
	}
}

/* 4. Buttons --------------------------------------------------------------------
   One behaviour for every white button: white first, hollow under the pointer
   (ABOUT US: "having it white first, then hollow draws the eyes to it
   quicker"; AFTERSALES: "make white CTA go hollow when hovered over"). The
   About page's own steel hover goes with it. */

.btn {
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn--light:hover,
.btn--light:focus-visible,
.about-industries .btn--light:hover,
.about-industries .btn--light:focus-visible,
.about-map .btn--light:hover,
.about-map .btn--light:focus-visible,
.about-industries__row:hover .about-industries__cta,
.about-industries__link:focus-visible ~ .about-industries__copy .about-industries__cta {
	background-color: transparent;
	color: var(--bca-powder);
	box-shadow: inset 0 0 0 1px var(--bca-powder);
}

/* 5. The supplier banner ---------------------------------------------------------
   The strip had no ground of its own, so each page's lattice plate showed
   through it at whatever offset that page hangs its plate — the grid sat
   differently under the logos on every page. It is a banner now: its own
   ground, ruled top and bottom (AFTERSALES: "a line under the supplier
   banner … dividing it from the top and bottom sections"), and one lattice
   on the site's 80.685px module, hung from the band's own edge so it falls
   the same way on every page. */

.partners {
	position: relative;
	background-color: var(--partners-ground, var(--bca-midnight));
	background-image:
		repeating-linear-gradient(to right, rgba(255, 246, 239, 0.07) 0 1px, transparent 1px 80.685px);
	background-position: var(--partners-grid-x, 0) 0;
	border-top: var(--bca-hairline) solid var(--bca-rule-cream);
	border-bottom: var(--bca-hairline) solid var(--bca-rule-cream);
}

.accent-chocolate .partners,
[data-accent="chocolate"] .partners {
	--partners-ground: var(--bca-chocolate);
}

/* Inside the dark heroes the copy block above already closes on its own
   rule, so the banner only needs the one under it. */
.page-hero .partners {
	border-top: 0;
}

/* 6. Header search -------------------------------------------------------------- */

.header-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	color: var(--bca-white);
	transition: color 0.2s ease;
}

.header-search-toggle:hover,
.header-search-toggle[aria-expanded="true"] {
	color: var(--bca-tangerine);
}

.header-search-toggle svg {
	width: 24px;
	height: 24px;
}

.has-light-header .header-search-toggle {
	color: var(--bca-midnight);
}

.has-light-header .header-search-toggle:hover,
.has-light-header .header-search-toggle[aria-expanded="true"] {
	color: var(--bca-tangerine);
}

/* Beside the menu icon below the desktop bar; the bar's own sits in the nav. */
.header-search-toggle--mobile {
	margin-left: auto;
	margin-right: 8px;
}

.primary-nav .header-search-toggle {
	display: none;
}

@media (min-width: 1200px) {

	.header-search-toggle--mobile {
		display: none;
	}

	.primary-nav .header-search-toggle {
		display: inline-flex;
		align-self: center;
		margin-left: 16px;
		margin-right: 24px;
	}
}

.header-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 25;
	background-color: var(--bca-white);
	border-bottom: var(--bca-hairline) solid rgba(40, 53, 124, 0.25);
	box-shadow: 0 24px 48px -32px rgba(8, 6, 36, 0.45);
}

.header-search[hidden] {
	display: none;
}

.header-search__inner {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: 24px var(--gutter) 32px;
}

.header-search__inner .equipment-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
}

.header-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	color: var(--bca-steel-blue);
	transition: color 0.2s ease;
}

.header-search__close:hover {
	color: var(--bca-tangerine);
}

/* 7. Product cards — supplier and industry links --------------------------------
   The card was one link, so its caption could not link anywhere of its own.
   The picture and the machine's name now each link to the machine (the
   name's link stretched over its row), and the caption's supplier and
   industry link to the supplier page and the Industrial or Artisan page —
   as on a machine's own page. */

.product-card__link {
	color: inherit;
}

.product-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.product-card__link:focus-visible {
	outline: 0;
}

.product-card:has(.product-card__link:focus-visible) {
	outline: 2px solid var(--bca-tangerine);
	outline-offset: 3px;
}

.product-card:has(.product-card__link:focus-visible) .product-card__plate {
	background-color: rgba(40, 53, 124, 0.1);
}

.product-card:has(.product-card__link:focus-visible) .product-card__go {
	opacity: 1;
}

@media (hover: hover) {

	.product-card:has(.product-card__link:focus-visible) .product-card__summary-text {
		transform: none;
	}
}

.product-card__eyebrow {
	position: relative;
	z-index: 2;
}

.product-card__eyebrow-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.product-card__eyebrow-link:hover,
.product-card__eyebrow-link:focus-visible {
	color: var(--bca-tangerine);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 8. Equipment categories ---------------------------------------------------------
   A category with no sub-categories (Proofing and Retarding, Scoring and
   Decorating, Product Logistics) was drawn as a plain list row in the body
   face's mixed case, beside the parents' caps. It now reads as the
   category it is. */

/* The same 48px row as a category with sub-categories (12 + its 24px
   chevron + 12), so the list keeps one rhythm top to bottom. */
.filter-group--category .filter-group__body > .filter-group__list {
	min-height: 48px;
	padding-block: 12px;
	justify-content: center;
}

.filter-group--category .filter-group__body > .filter-group__list .filter-option__label {
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* 9. Ambient video ------------------------------------------------------------------
   A YouTube or Vimeo clip in a plate: the poster holds the space, and the
   player fades in over it once it is actually playing (feedback-v2.js). The
   player never takes the pointer — the frames draw footage, not a player. */

.video-embed {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--bca-midnight);
}

.video-embed__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	transition: opacity 0.6s ease 0.3s;
}

.video-embed iframe {
	position: absolute;
	z-index: 0;
	max-width: none;
	border: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

/* A YouTube loop is a relay of players (feedback-v2.js): the one on screen
   sits over the rest, and takes over from the last with a straight cut. */
.video-embed.is-playing iframe.is-on {
	z-index: 2;
	opacity: 1;
}

.video-embed iframe.is-cut {
	transition: none;
}

.video-embed.is-playing .video-embed__poster {
	opacity: 0;
}

/* An Instagram post is Instagram's own card (TURNKEY — the client's choice):
   shown as it comes, centred in the mount, which grows to hold it. */
.video-embed--instagram {
	display: flex;
	justify-content: center;
	overflow: visible;
	background: none;
}

.video-embed--instagram iframe,
.video-embed--instagram .instagram-media {
	position: static;
	opacity: 1;
	pointer-events: auto;
	margin: 0 auto !important;
}

.turnkey-fitout__plate:has(.video-embed--instagram) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 402px;
	aspect-ratio: auto;
}

.turnkey-fitout__plate .video-embed--instagram {
	height: auto;
}

/* Plates that size their still by its own selector. */
.turnkey-fitout__plate .video-embed,
.turnkey-fitout__plate video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 10. Supplier pages — figures and film --------------------------------------------- */

.supplier-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	padding: 0 var(--gutter) var(--section-64-88);
}

.supplier-media .turnkey-stats {
	margin-top: 0;
}

/* The intro mount in the supplier pages' own steel rather than the Artisan
   page's chocolate. */
.supplier-media .industry-intro__screen {
	background-color: var(--bca-midnight);
}

.supplier-media .industry-intro__play-mark {
	background-color: rgba(40, 53, 124, 0.85);
}

.supplier-media .industry-intro__play:hover .industry-intro__play-mark,
.supplier-media .industry-intro__play:focus-visible .industry-intro__play-mark {
	background-color: var(--bca-tangerine);
}

/* Centred, so a YouTube still's letterbox bars fall outside the 16:9 crop. */
.supplier-media .industry-intro__poster {
	display: block;
	object-position: 50% 50%;
}

@media (min-width: 1200px) {

	.supplier-media {
		gap: 88px;
	}
}

/* 11. Our Suppliers — logo sizes ---------------------------------------------------
   Each supplier's card mark can be nudged from its own screen ("Card logo
   size"); Ferneto runs a little larger and MIWE and Koenig a little smaller
   (client, Oct 2026). */

.supplier-card__logo-img {
	transform: scale(var(--logo-scale, 1));
	transform-origin: left center;
}

/* Ferneto's colour file keeps a clear margin round the mark (about 8% of its
   width on the left), so at the larger size its ink would start short of the
   card's text edge; this pulls it back to the line. */
.supplier-card--ferneto .supplier-card__logo-img {
	translate: calc(-7.5px * var(--logo-scale, 1)) 0;
}

/* 12. Client quotes -------------------------------------------------------------------
   The quotes the client supplied run to several paragraphs, so a card folds
   them to its first lines with a Read more, and the band carries a call to
   action like the site's other bands (INDUSTRIAL: "please add CTA to
   testimonials"). */

.quote-card__quote p {
	margin: 0;
}

/* Below the desktop layout a quote card was a fixed 350px in a track as wide
   as the screen less its gutters (295px on a 375px phone), so the first
   card's text ran off the screen edge. It now fits the track. The Artisan
   customer photos (300px) did the same on the narrowest phones. */
@media (max-width: 1199px) {

	.testimonials.panel {
		--card-w: min(350px, 100%);
	}
}

@media (max-width: 767px) {

	.industry-customers .industry-customers__rail {
		--card-w: min(300px, 100%);
	}
}

.quote-card__quote p + p {
	margin-top: 12px;
}

.quote-card.has-fold .quote-card__quote {
	max-height: calc(1.5em * 9);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
}

.quote-card.has-fold.is-open .quote-card__quote {
	max-height: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.quote-card__more {
	margin-top: -24px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--bca-steel-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.quote-card__more:hover {
	color: var(--bca-tangerine);
}

/* The band's call to action sits under its tag on the 1440 frame, in the
   column the cards leave empty, and after the heading on a phone. */
.testimonials__lead {
	display: contents;
}

.testimonials__cta {
	order: 3;
}

@media (min-width: 1200px) {

	.testimonials__lead {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		flex: none;
	}

	.testimonials__cta {
		order: 0;
	}
}

/* 13. Footer social --------------------------------------------------------------------- */

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: inline-flex;
	color: var(--bca-powder);
	opacity: 0.9;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: var(--bca-tangerine);
	opacity: 1;
}

.site-footer__social .icon {
	width: 24px;
	height: 24px;
}

/* 14. Odds and ends ---------------------------------------------------------------------- */

/* Turnkey Solutions: the counts are the About Us page's three now
   (TURNKEY: "keep to what we have on the About Us page"). */
@media (min-width: 768px) and (max-width: 1199.98px) {

	.turnkey-stats__row:has(> :last-child:nth-child(3)) {
		grid-template-columns: repeat(3, auto);
	}
}

@media (max-width: 767.98px) {

	.turnkey-stats__row > :last-child:nth-child(3) {
		grid-column: 1 / -1;
	}
}

/* Complete Bakery Fitout: the 1440 frame's fixed columns (664 + 554) ran
   past the screen between 1200 and about 1340px wide, cutting the copy off.
   Both now give a little as the screen narrows. */
@media (min-width: 1200px) {

	.turnkey-fitout__figure {
		flex: 0 1 664px;
		min-width: 0;
	}

	.turnkey-fitout__plate {
		width: auto;
		max-width: 660px;
	}

	.turnkey-fitout__copy {
		flex: 1 1 554px;
		width: auto;
		min-width: 0;
	}

	/* Aftersales services: the frame's fixed columns (104 / 315 / 319 / 487)
	   need a 1305px window, so on a 1280px laptop the copy ran off the right
	   edge. The copy column now gives way to what the row has left. */
	.aftersales-services .aftersales-services__row {
		grid-template-columns: 104px 315px 319px minmax(0, 487px) minmax(0, 1fr);
	}
}

/* Supplier names linked in running copy (ARTISAN). */
.text-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.text-link:hover,
.text-link:focus-visible {
	color: var(--bca-tangerine);
}

/* Our Story: a milestone told on film rather than in a still. */
.story-card video.story-card__media {
	display: block;
	object-fit: cover;
	background-color: var(--bca-midnight);
}

/* =============================================================================
   D6 feedback, round 3 — the QA review of round 2 (Oct 2026)

   15. Hero lattices: one unbroken grid, edge to edge (QA: "Remove the
       blank/no grid space in the bg-image globally. Also align the grid lines
       of the banner bg with the logo bg grid globally"; CASE STUDIES and
       INSIGHTS: "the grid design stretches from end to end of a large screen"
       on Our Story, but not there)
   16. Our Story — the milestone crops (OUR STORY)
   17. Footage (HOME, EQUIPMENT, INDUSTRIAL, SUPPLIER INNER PAGES)
   18. Industrial — the benefits' button pair (INDUSTRIAL)
   ========================================================================== */

/* 15a. The dark top bands — About Us, Our Suppliers, Equipment, Turnkey
   Solutions, Industrial, Artisan and Aftersales (.page-hero).

   The plate behind them is Figma's export: it fades its lattice out under
   the title (the blank the QA marked) and stops at the 1440 stage. The band
   now draws its own lattice over the copy block instead, at the plate's
   full strength everywhere and across the whole width of the screen. On the
   1440 frame it keeps the plate's module and phase — rules on x = 41.465 +
   n × 80.685 from the stage's left edge, so one still lands on the split at
   x = 929, and on y = 7.1 + n × 80.685 — and on the small frames it hangs
   from the gutter and the bar's rule. The logo banner under it rules its
   verticals on the same columns, so the grid runs straight down through the
   logos. Below the band the page's plates carry on exactly as drawn. */

.page-hero {
	--hero-lattice: rgba(255, 246, 239, 0.1);
	--hero-lattice-m: 80.685px;
	--hero-lattice-x: var(--gutter);
	--hero-lattice-y: calc(var(--header-height) - var(--hero-lattice-m));
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* The small frames lay the shared plate over the lower half of the band,
	   so the band brings its own ground there; on the 1440 frame it is clear
	   and the page's blooms show through. */
	background-color: var(--bca-midnight);
	background-image:
		repeating-linear-gradient(to right, var(--hero-lattice) var(--hero-lattice-x), var(--hero-lattice) calc(var(--hero-lattice-x) + 1px), transparent calc(var(--hero-lattice-x) + 1px), transparent calc(var(--hero-lattice-x) + var(--hero-lattice-m))),
		repeating-linear-gradient(to bottom, var(--hero-lattice) 0 1px, transparent 1px var(--hero-lattice-m));
	background-position: 0 var(--hero-lattice-y);
	/* Lines stop at the bar, as every hero lattice does (main.css). */
	clip-path: inset(var(--header-height) 0 0);
	pointer-events: none;
}

.accent-chocolate .page-hero::before {
	background-color: var(--bca-chocolate);
}

/* The logo banner's verticals on the band's columns (it was ruled from its
   own left edge, 41px off the plate's at 1440 and further at other widths). */
.page-hero .partners {
	background-image: repeating-linear-gradient(to right, var(--hero-lattice) var(--hero-lattice-x), var(--hero-lattice) calc(var(--hero-lattice-x) + 1px), transparent calc(var(--hero-lattice-x) + 1px), transparent calc(var(--hero-lattice-x) + var(--hero-lattice-m)));
	background-position: 0 0;
}

@media (min-width: 1200px) {

	/* The stage's left edge: flush right with the screen below 1440 (where
	   the split and the plates ride the right edge), centred past it. */
	.page-hero {
		--hero-lattice-x: calc(min(50% - 720px, 100% - 1440px) + 41.465px);
		--hero-lattice-y: 7.1px;
	}

	.page-hero::before {
		background-color: transparent;
	}

	/* The hero plate gives way to the band's lattice over the copy block
	   (the banner's own ground covers it from there to the band's foot), and
	   carries on as drawn below the band. */
	.page-glow:has(+ .page-hero) > .page-glow__grid:first-child {
		clip-path: inset(476px 0 0);
	}

	.aftersales-page > .page-glow:has(+ .page-hero) > .page-glow__grid:first-child {
		clip-path: inset(482px 0 0);
	}
}

/* 15b. The light top bands — Case Studies, Insights and the supplier pages
   (.panel-hero).

   Their plate (hero-grid.webp) is drawn for the 1440 stage, so past the
   2560 cap it stopped short of both edges and left the band's sides bare,
   where Our Story's grid runs on to the screen's edge. They now take Our
   Story's own lattice — the same module, strength and soft fade — drawn
   across the whole band, with one rule on the plate frame's left edge
   (x = 743 at 1440) and one on its top (y = 179), as Our Story lands one on
   its plate. */

@media (min-width: 1200px) {

	.panel-hero::after {
		--panel-lattice: rgba(40, 53, 124, 0.06);
		--panel-lattice-x: calc(max(0px, 50% - 720px) + 16.835px);
		left: 0;
		width: 100%;
		height: 100%;
		background-image:
			repeating-linear-gradient(to right, var(--panel-lattice) var(--panel-lattice-x), var(--panel-lattice) calc(var(--panel-lattice-x) + 1px), transparent calc(var(--panel-lattice-x) + 1px), transparent calc(var(--panel-lattice-x) + 80.685px)),
			repeating-linear-gradient(to bottom, var(--panel-lattice) 0 1px, transparent 1px 80.685px);
		background-size: auto;
		background-repeat: repeat;
		background-position: 0 17.63px;
		-webkit-mask-image: radial-gradient(120% 90% at 42% 38%, #000 35%, transparent 78%);
		mask-image: radial-gradient(120% 90% at 42% 38%, #000 35%, transparent 78%);
	}
}

@supports (top: calc(1px * tan(atan2(1vw, 1px)))) {

	@media (max-width: 1199.98px) {

		.panel-hero::after {
			--panel-lattice: rgba(40, 53, 124, 0.06);
			--panel-lattice-m: calc(80.685px * tan(atan2(100vw, 1440px)));
			--panel-lattice-x: var(--gutter);
			left: 0;
			width: 100%;
			height: 100%;
			background-image:
				repeating-linear-gradient(to right, var(--panel-lattice) var(--panel-lattice-x), var(--panel-lattice) calc(var(--panel-lattice-x) + 1px), transparent calc(var(--panel-lattice-x) + 1px), transparent calc(var(--panel-lattice-x) + var(--panel-lattice-m))),
				repeating-linear-gradient(to bottom, var(--panel-lattice) 0 1px, transparent 1px var(--panel-lattice-m));
			background-size: auto;
			background-repeat: repeat;
			background-position: 0 calc(75px * tan(atan2(100vw, 1440px)));
			-webkit-mask-image: radial-gradient(120% 90% at 42% 38%, #000 35%, transparent 78%);
			mask-image: radial-gradient(120% 90% at 42% 38%, #000 35%, transparent 78%);
		}
	}
}

/* 16. Our Story — the milestone crops -------------------------------------------
   The cards crop each photograph to a wide band from its top, which cut the
   pie out of 2006 and the two men out of 2018 (QA: "Shift this image
   slightly upwards so that the food item is more visible", "Same as
   above"). Those two now crop from lower down. Keyed on the year, so a
   replacement photograph for either year keeps the same crop. */

.story-timeline__slide[data-year="2006"] .story-card__media {
	object-position: 50% 80%;
}

.story-timeline__slide[data-year="2018"] .story-card__media {
	object-position: 50% 85%;
}

/* 17. Footage -------------------------------------------------------------------
   The QA still caught YouTube's own furniture over the footage (INDUSTRIAL:
   "Remove the Youtube overlay from the video"). A player that is taken off
   the plate — at each turn of the loop, or when the clip comes back round to
   its still — now leaves at once rather than fading out over 0.4s with
   YouTube's pause button and title showing on it, and the still is back
   under it in the same moment instead of 0.3s later. (feedback-v2.js also
   stops a clip with no end of its own short of YouTube's end screen, and
   lays the player out larger so it streams sharper and its furniture falls
   outside the crop.) */

.video-embed {
	isolation: isolate;
}

.video-embed iframe:not(.is-on) {
	transition: none;
}

.video-embed:not(.is-playing) .video-embed__poster {
	transition: none;
}

/* Equipment: a machine whose video link names a stretch plays that stretch
   over the plate as the site's other footage does (EQUIPMENT: "No youtube
   buttons and only the section of video mentioned by clients"), filling it,
   so the photograph no longer shows round a letterboxed player (Fork Mixer:
   "The image is still visible in the bg"). A photograph's thumbnail lays
   that photograph over the footage; the first brings the footage back. */

.product__plate--ambient .product__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product__plate--ambient .product__ambient {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.product__plate--ambient.shows-photo .product__ambient {
	visibility: hidden;
}

/* Supplier pages: every film now plays in its screen, muted and looping
   (SUPPLIER INNER PAGES: "Some have autoplay whereas some don't. Add
   autoplay and loop for all of them"); the cue still opens it with sound. */

.supplier-media .industry-intro__screen .video-embed {
	position: absolute;
	inset: 0;
}

/* 18. Industrial — the benefits' button pair -------------------------------------
   INDUSTRIAL, under Benefits: "Please add CTA to testimonials". There is no
   testimonials page, so the benefits close on the site's usual pair: the
   filled "Get in touch" and an outlined "Client testimonials" that takes the
   reader up to the client quotes on the same page — centred under the copy
   on the small frames, from its left edge on the 1440 one. */

.turnkey-fitout__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

@media (min-width: 1200px) {

	.turnkey-fitout__actions {
		justify-content: flex-start;
	}
}

/* =============================================================================
   D6 feedback — Aftersales QA (Nov 2026)

   19. Aftersales — the service photos (AFTERSALES: "image not properly
       aligned in desktop"; "images too large in mobile and tablet devices";
       "images size on mobile are irregular as well")
   ========================================================================== */

/* 19. Aftersales — the service photos ---------------------------------------
   The photos took the site-wide img rule's top-edge crop, so in its 315 x 214
   frame the portrait Training shot kept the oven's hood and lost its operator.
   They now crop from the centre. Under 1200px each photo ran the full width
   of the screen at its own shape (landscape, square and portrait in the one
   list), so every photo now keeps the frame's 315 x 214 shape at every width.
   Phones keep the stacked row; tablets take the desktop's reading order, the
   photo on the left with the name and copy beside it. */

.aftersales-services__media img {
	object-position: 50% 50%;
}

@media (max-width: 1199.98px) {

	.aftersales-services__media img {
		aspect-ratio: 315 / 214;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {

	.aftersales-services .aftersales-services__row {
		display: grid;
		grid-template-columns: clamp(280px, 36vw, 400px) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"icon  icon"
			"media name"
			"media copy";
		gap: 24px 40px;
		align-items: start;
	}

	/* A row without a photo reads straight down. */
	.aftersales-services .aftersales-services__row:has(> .aftersales-services__media:empty) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"icon"
			"name"
			"copy";
	}

	.aftersales-services__row > .case-solutions__icon {
		grid-area: icon;
	}

	.aftersales-services__row > .aftersales-services__media {
		grid-area: media;
	}

	.aftersales-services__row > .case-solutions__name {
		grid-area: name;
	}

	.aftersales-services__row > .aftersales-services__copy {
		grid-area: copy;
		max-width: 487px;
	}
}

/* 20. Last touches (client, Nov 2026) --------------------------------------------------- */

/* 20.1 The supplier band is the logos' own height on every page (HOME: "The
   height of the supplier band on the Homepage is different to other pages,
   it has now become much 'taller'"). The homepage kept the 40px of air above
   and below the logos that the frame drew when the band had no ground of
   its own; since it got one (5. above) that air read as part of the band. */

.partners {
	padding-block: 0;
}

/* 20.2 The light top bands' lattice (15b) counted its rows from the plate
   frame's top, which put the first one 8px under the bar's own rule — two
   lines, one just under the other (SUPPLIER INNER PAGES: "still have this
   misalignment with the grid design"). The rows now count from the bar's
   rule — 89px down on the 1440 frame, 112px on the small ones — so the rule
   is the lattice's first row, and on the 1440 frame the plate's frame moves
   up 9.3px onto the second row below it (89 + 2 × 80.685), so it still sits
   on the lattice as it did. */

@media (min-width: 1200px) {

	.panel-hero::after {
		background-position: 0 8.315px;
	}

	.panel-hero__frame {
		margin-top: -7.315px;
	}
}

@supports (top: calc(1px * tan(atan2(1vw, 1px)))) {

	@media (max-width: 1199.98px) {

		.panel-hero::after {
			background-position: 0 calc(var(--header-height) - 1px);
		}
	}
}

/* 20.3 The Artisan intro plate turns through the customer photographs
   (ARTISAN: the photos of customers with their equipment "added to the
   current one that sits below the Artisan Bakeries blurb"). Each photograph
   is shown whole — the portraits stand the plate's full height — over a
   soft, darkened enlargement of itself, so the 16:9 plate is always full and
   no head or machine is cut; the slides cross-fade every few seconds
   (feedback-v2.js), with the site's arrow pair and the photograph's own
   caption in the lower corners. */

.industry-intro__slides {
	position: absolute;
	inset: 0;
	display: block;
}

.industry-intro__slide {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.industry-intro__slide.is-current {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease, visibility 0s linear 0s;
}

.industry-intro__slide-fill {
	position: absolute;
	top: -40px;
	left: -40px;
	width: calc(100% + 80px);
	height: calc(100% + 80px);
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	filter: blur(24px) brightness(0.55);
}

.industry-intro__slide-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: 50% 50%;
}

.industry-intro__slide-caption {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	max-width: calc(100% - 120px);
	padding: 6px 10px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bca-powder);
	background-color: rgba(8, 6, 36, 0.6);
}

.industry-intro__nav {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	margin: 0;
}

@media (min-width: 1200px) {

	.industry-intro__slide-caption {
		left: 24px;
		bottom: 24px;
		font-size: 13px;
	}

	.industry-intro__nav {
		right: 24px;
		bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.industry-intro__slide,
	.industry-intro__slide.is-current {
		transition: none;
	}
}