/*
 * Firmengeschenke — loaded only on that page template (inc/b2b-page.php).
 *
 * Every selector here addresses markup this theme writes itself, in
 * template-parts/b2b/. That is the whole point of the rewrite: the
 * previous version styled markup the block editor produced, and the
 * editor rearranged the containers on insert. A stylesheet cannot be
 * more certain than the markup it is written against.
 *
 * Mobile-first, single class names, no defensive specificity. Nothing
 * else on the site uses these classes.
 */

/* ==================================================================
 * SECTION FRAME
 * ================================================================== */

/* Full-bleed band, content on the site's column. max() keeps the
   element edge to edge and pushes the padding out to the column edge,
   so no inner wrapper is needed. */
.bizgift-section {
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
	/* A shade warmer than white — enough to lift the white cards off it
	   without reading as a second colour. */
	background: #fbfaf8;
	color: var(--fk-color-body);
}

.bizgift-section--greige {
	background: var(--fk-color-greige);
}

.b2b-head {
	max-width: 56rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.b2b-lead {
	margin: 0;
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* The shared section heading styles come from global.css; only the
   serif weight and the tighter leading are specific to this page. */
.bizgift-section .section-title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	line-height: 1.12;
	margin: 0 0 1rem;
}

.bizgift-section .section-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fk-color-sage-text);
}

/* ==================================================================
 * SPLIT: copy left, cards right
 * ================================================================== */

.b2b-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

/* The copy column is already narrow, so the lead's own measure would
   only make it narrower still. */
.b2b-split__copy .b2b-lead {
	max-width: none;
}

@media (min-width: 60em) {
	.b2b-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: start;
	}
}

/* ==================================================================
 * CARDS
 * ================================================================== */

.b2b-cards {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.b2b-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (min-width: 60em) {
	.b2b-cards--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.b2b-card {
	position: relative;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid rgba(31, 31, 31, 0.1);
	border-radius: 0.5rem;
	background: var(--fk-color-bg);
	box-shadow: 0 1px 2px rgba(31, 31, 31, 0.04);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease;
}

/* The deep shadow lives on a pseudo-element and is faded in, rather than
   being animated on the card itself. A box-shadow transition repaints
   the blur on every frame; an opacity transition is composited and
   costs the GPU almost nothing. Same picture, a fraction of the work. */
.b2b-card::after {
	content: "";
	position: absolute;
	/* Just outside the border, NOT behind the card: the hover lift is a
	   transform, a transform makes a stacking context, and a pseudo at
	   z-index -1 would vanish behind the card's own background the
	   moment it lifted. With no background of its own, all this element
	   ever shows is the shadow it casts outward. */
	inset: -1px;
	border-radius: inherit;
	box-shadow: 0 16px 36px rgba(31, 31, 31, 0.13);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

/* Two pixels, not six. These cards are not links, and a card that
   springs up under the cursor promises a click that never comes. Enough
   movement to feel alive, not enough to lie. */
.b2b-card:hover {
	transform: translateY(-2px);
	border-color: rgba(111, 124, 104, 0.4);
}

.b2b-card:hover::after {
	opacity: 1;
}

/* The wide section gives its tiles more air: they carry three lines of
   copy under a label, not one. */
.b2b-cards--roomy .b2b-card {
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* Sans and bold against the serif section heading: card titles are
   labels for what follows, not headings competing with the one above. */
.b2b-card__title {
	margin: 0 0 0.625rem;
	font-family: var(--fk-font-sans);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fk-color-text);
}

.b2b-cards--roomy .b2b-card__title {
	font-size: 1.1875rem;
}

.b2b-card__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--fk-color-body);
}

.b2b-card .section-eyebrow {
	margin-bottom: 0.5rem;
}

/* ---------- Numbered steps ---------- */

.b2b-step__number {
	width: 2.25rem;
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(31, 31, 31, 0.2);
	font-family: var(--fk-font-serif);
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	color: var(--fk-color-sage-text);
}

/* ==================================================================
 * HERO
 * ================================================================== */

.b2b-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* Full screen, on every screen. `svh` is the viewport WITHOUT the
	   mobile browser's collapsing toolbars, so the hero is exactly as
	   tall as what is actually visible — 100vh on a phone reaches under
	   the address bar and cuts the button off. The plain `vh` line stays
	   underneath for browsers that do not know `svh`. */
	min-height: 100vh;
	min-height: 100svh;
	/* Top padding clears the header lying over it. */
	padding-block: 7rem 3.5rem;
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
	background: #141414;
	color: #fff;
}

.b2b-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Both fill the frame and sit on top of each other: the poster paints
   first, the video covers it when it finally arrives. */
.b2b-hero__poster,
.b2b-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.b2b-hero__video {
	opacity: 0;
	transition: opacity 0.6s ease;
}

/* Set by b2b-hero.js once the video is actually playing, so the fade
   never runs against a black frame. */
.b2b-hero__video.is-playing {
	opacity: 1;
}

/* The dim over the footage, so white type stays readable whatever the
   frame underneath is doing. */
.b2b-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 12, 0.45);
}

/* The panel does not sit on the video as a flat box: it fades out to
   the right, so the frame keeps showing through where the text ends. */
.b2b-hero__panel {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: 0.25rem;
	background: linear-gradient(105deg, rgba(12, 12, 12, 0.6) 55%, rgba(12, 12, 12, 0.15));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.b2b-hero__eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

/* `overflow-wrap: normal` undoes the theme's own heading rule, which
   sets break-word on every h1–h4. Right for a product title in a narrow
   card, wrong here: it split "Firmengeschenke" after the k. Nothing in
   this heading needs breaking — the size is capped so the longest word
   fits the panel. */
.b2b-hero__title {
	margin: 0 0 1.25rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	line-height: 1.08;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	color: #fff;
}

.b2b-hero__lead {
	margin: 0;
	max-width: 30rem;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
}

.b2b-hero__usps {
	display: grid;
	gap: 0.5rem;
	margin: 1.75rem 0 2rem;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.b2b-button {
	display: inline-block;
	padding: 0.8125rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0.25rem;
	background: transparent;
	color: #fff;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.b2b-button:hover,
.b2b-button:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--fk-color-text);
}

/* ==================================================================
 * PAGE CONTENT
 * ================================================================== */

/* Whatever the editor holds is rendered under the sections. On this page
   that is the long-form text: prose with its own headings, emphasis,
   lists and a quote — the kind of writing that belongs in an editor and
   would be miserable in a Customizer textarea.
 *
 * The measure is 54rem rather than the site's 75rem. Long text set to
 * the full content column runs past the width an eye can track back
 * from, and the reader loses the line. */
.b2b-content {
	max-width: 54rem;
	margin: 0 auto;
	padding: clamp(3rem, 7vw, 5rem) var(--fk-space);
	background: var(--fk-color-bg);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--fk-color-body);
}

/* Centred, because these headings punctuate a column of prose rather
   than open a section — they are signposts in the text, not a layout. */
.b2b-content h2,
.b2b-content h3 {
	margin: 2.75rem 0 1rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	color: var(--fk-color-text);
}

.b2b-content h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.b2b-content h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.b2b-content > *:first-child {
	margin-top: 0;
}

.b2b-content p {
	margin: 0 0 1.125rem;
}

.b2b-content ul,
.b2b-content ol {
	margin: 0 0 1.125rem 1.5rem;
	padding: 0;
}

.b2b-content li {
	margin-bottom: 0.375rem;
}

.b2b-content strong {
	font-weight: 700;
	color: var(--fk-color-text);
}

.b2b-content a {
	color: var(--fk-color-sage-text);
	text-underline-offset: 0.2em;
}

.b2b-content a:hover {
	color: var(--fk-color-text);
}

/* The quote block, as a sage panel. Sage carries dark text at 7.7:1, so
   the pull quote reads as a break in the page rather than a passage
   someone has to squint at. */
.b2b-content blockquote,
.b2b-content .wp-block-quote {
	margin: 2.5rem 0;
	padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
	border: 0;
	border-radius: 0.25rem;
	background: var(--fk-color-sage);
	color: var(--fk-color-text);
	text-align: center;
	font-style: normal;
}

.b2b-content blockquote p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* An empty paragraph still occupies a line, and inside a panel that is
   sized by its contents a few stray returns become a few centimetres of
   green. Editors collect them when text is pasted from elsewhere. */
.b2b-content blockquote p:empty,
.b2b-content blockquote br:only-child {
	display: none;
}

.b2b-content blockquote cite {
	display: block;
	margin-top: 0.875rem;
	font-size: 0.9375rem;
	font-style: normal;
	font-weight: 700;
}

/* The closing button. `is-layout-flex` comes from the block editor's
   global styles, which this theme dequeues site-wide, so the row is laid
   out here instead of inherited. */
.b2b-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 2.5rem 0 0;
}

.b2b-content .wp-block-button__link {
	display: inline-block;
	padding: 0.8125rem 1.75rem;
	border: 1px solid var(--fk-color-text);
	border-radius: 0.25rem;
	background: var(--fk-color-text);
	color: #fff;
	font-family: var(--fk-font-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.b2b-content .wp-block-button__link:hover,
.b2b-content .wp-block-button__link:focus-visible {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
	color: var(--fk-color-text);
	box-shadow: 0 10px 24px rgba(31, 31, 31, 0.22);
}

/* ==================================================================
 * SHOWCASE: three example hampers
 * ================================================================== */

.bizgift-products {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.bizgift-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The whole card is the link: one target, not a title and a "read more"
   pointing at the same place — which is two tab stops and two entries in
   a screen reader's link list for one destination. */
.bizgift-product__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem 1.25rem 1.5rem;
	border: 1px solid rgba(31, 31, 31, 0.08);
	border-radius: 0.5rem;
	background: var(--fk-color-bg);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(31, 31, 31, 0.04);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease;
}

.bizgift-product__link::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	box-shadow: 0 22px 44px rgba(31, 31, 31, 0.16);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

/* These ARE links, so they may lift further than the content cards —
   the movement is a promise the card can keep. */
.bizgift-product__link:hover,
.bizgift-product__link:focus-visible {
	transform: translateY(-5px);
	border-color: rgba(111, 124, 104, 0.4);
}

.bizgift-product__link:hover::after,
.bizgift-product__link:focus-visible::after {
	opacity: 1;
}

.bizgift-product__media {
	display: block;
	overflow: hidden;
	margin-bottom: 1.5rem;
	border-radius: 0.25rem;
}

.bizgift-product__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* A hamper leaning in slightly. Four percent is the most it can move
   before the photograph starts to look like it is being handled. */
.bizgift-product__link:hover .bizgift-product__image,
.bizgift-product__link:focus-visible .bizgift-product__image {
	transform: scale(1.04);
}

.bizgift-product__title {
	margin: 0 0 0.5rem;
	font-family: var(--fk-font-sans);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fk-color-text);
}

.bizgift-product__text {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--fk-color-body);
}

/* Pushed to the bottom edge so the line sits level across all three
   cards however long the copy above it runs. */
.bizgift-product__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.9375rem;
	color: var(--fk-color-text);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.bizgift-product__more span {
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.bizgift-product__link:hover .bizgift-product__more,
.bizgift-product__link:focus-visible .bizgift-product__more {
	color: var(--fk-color-sage-text);
}

/* The arrow steps toward the destination. It is the smallest possible
   way to say "this goes somewhere". */
.bizgift-product__link:hover .bizgift-product__more span,
.bizgift-product__link:focus-visible .bizgift-product__more span {
	transform: translateX(0.25rem);
}

/* ==================================================================
 * LOGO SLIDER
 * ================================================================== */

.bizgift-logos {
	position: relative;
}

/* The browser does the scrolling. scroll-snap gives it the stops, and
   `overscroll-behavior-x: contain` keeps a swipe at the end of the row
   from turning into a browser back-navigation. */
.bizgift-logos__track {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.bizgift-logos__track::-webkit-scrollbar {
	display: none;
}

.bizgift-logos__item {
	flex: 0 0 calc(50% - 0.625rem);
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
	border-radius: 0.5rem;
	background: var(--fk-color-bg);
}

@media (min-width: 48em) {
	.bizgift-logos__item {
		flex-basis: calc(33.333% - 0.834rem);
	}
}

/* A fixed box for logos of wildly different proportions: contain keeps
   each one whole, the height keeps the row from stepping up and down. */
.bizgift-logos__image {
	width: 100%;
	max-width: 12rem;
	height: 4.5rem;
	object-fit: contain;
}

.bizgift-logos__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(31, 31, 31, 0.14);
	border-radius: 50%;
	background: var(--fk-color-bg);
	color: var(--fk-color-text);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.bizgift-logos__nav:hover {
	background: var(--fk-color-text);
	color: #fff;
}

.bizgift-logos__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.bizgift-logos__nav:disabled:hover {
	background: var(--fk-color-bg);
	color: var(--fk-color-text);
}

/* `display: flex` above outranks the browser's own `[hidden]` rule, so
   without this the arrows are on screen even while the script has them
   switched off — visible controls that do nothing. */
.bizgift-logos__nav[hidden] {
	display: none;
}

.bizgift-logos__nav--prev {
	left: -0.75rem;
}

.bizgift-logos__nav--next {
	right: -0.75rem;
}

.bizgift-logos__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	margin-top: 1.25rem;
}

/*
 * The dot a visitor sees is eight pixels. The dot a visitor HITS is
 * twenty-four, which is the minimum WCAG asks of a touch target — and
 * the reason the button itself is an empty, transparent box with the
 * mark drawn inside it as a pseudo-element. Making the visible dot big
 * enough to tap would have meant a row of buttons instead of a row of
 * dots.
 *
 * `flex-wrap` because there can be twelve of them: on a narrow phone a
 * row that cannot wrap is a row that pushes the page sideways.
 */
.bizgift-logos__dot {
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bizgift-logos__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: rgba(31, 31, 31, 0.2);
	transform: translate(-50%, -50%);
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.bizgift-logos__dot:hover::before {
	background: rgba(31, 31, 31, 0.4);
}

.bizgift-logos__dot.is-active::before {
	background: var(--fk-color-sage-dark);
	transform: translate(-50%, -50%) scale(1.3);
}

/* ==================================================================
 * REQUEST BAND
 * ================================================================== */

.bizgift-section--dark {
	background: #262626;
	color: rgba(255, 255, 255, 0.88);
}

.bizgift-section--dark .section-title {
	color: #fff;
}

.bizgift-section--dark .section-eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.bizgift-section--dark .b2b-lead {
	color: rgba(255, 255, 255, 0.88);
}

.bizgift-checks {
	display: grid;
	gap: 0.625rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.bizgift-checks li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.bizgift-checks svg {
	flex: 0 0 auto;
	margin-top: 0.125rem;
	color: var(--fk-color-sage);
}

.bizgift-cta {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
}

.bizgift-cta__title {
	margin: 0 0 0.75rem;
	font-family: var(--fk-font-sans);
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
}

.bizgift-cta__text {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Light on dark here, rather than the outline the hero uses: this is the
   one thing the section is asking for, and the hero's ghost button would
   read as secondary next to it. */
.bizgift-cta__button {
	display: inline-block;
	padding: 0.8125rem 1.5rem;
	border-radius: 0.25rem;
	background: var(--fk-color-greige);
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bizgift-cta__button:hover,
.bizgift-cta__button:focus-visible {
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.bizgift-cta__mail {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

.bizgift-cta__mail a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.bizgift-cta__mail a:hover {
	color: #fff;
}

/* ==================================================================
 * POLISH
 * ================================================================== */

/* ---------- Eyebrows get a rule ---------- */

/* A short line before the label. It does the work a heavier typeface
   would do — marks the line as a signpost rather than a sentence —
   without adding weight to a page that is already dense with type. */
.bizgift-section .section-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.bizgift-section .section-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

/* ---------- Step numbers ---------- */

/* The rule under the number is a pseudo-element rather than a border,
   so it can grow on hover: the card acknowledges the cursor without
   moving anything the eye is reading. */
.b2b-step__number {
	position: relative;
	border-bottom: 0;
	padding-bottom: 0.875rem;
	color: var(--fk-color-sage-text);
}

.b2b-step__number::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: rgba(31, 31, 31, 0.2);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.4s ease;
}

.b2b-step:hover .b2b-step__number::after {
	background: var(--fk-color-sage-dark);
	transform: scaleX(1.9);
}

/* ---------- Logo tiles ---------- */

.bizgift-logos__item {
	border: 1px solid rgba(31, 31, 31, 0.06);
	box-shadow: 0 1px 2px rgba(31, 31, 31, 0.04);
}

/* ---------- Request card ---------- */

.bizgift-cta {
	transition: border-color 0.4s ease, background-color 0.4s ease;
}

.bizgift-cta:hover {
	border-color: rgba(168, 181, 162, 0.4);
	background: rgba(255, 255, 255, 0.07);
}

/* ---------- Scroll reveal ---------- */

/*
 * Sections rise into place as they enter the viewport — a scroll-driven
 * CSS animation, so there is no JavaScript, no scroll listener and no
 * observer. The browser runs it on the compositor.
 *
 * Wrapped twice on purpose. `@supports` because `animation-timeline` is
 * Chromium-only for now: elsewhere the rule is skipped entirely and the
 * page simply appears, which is a perfectly good page. And
 * `prefers-reduced-motion: no-preference` because content that moves
 * while you are trying to read it is precisely what that setting exists
 * to switch off.
 *
 * The animation is on the containers, never on the cards themselves:
 * a filled animation keeps owning `transform`, and it would sit on top
 * of the hover lift and cancel it.
 *
 * The hero is left alone. It is the largest element on the first
 * screen, and fading in the thing a browser is trying to measure as the
 * Largest Contentful Paint is a way of reporting a slower page than the
 * one you built.
 */
/* Movement only, deliberately NO fade.
 *
 * The first version animated opacity from zero, and that is what
 * Lighthouse reported as a contrast failure on the greige section: text
 * below the fold sits at the start of its scroll animation, so it was
 * measured at opacity 0. The colours were never the problem — the
 * eyebrow is 5.2:1 on greige and the heading far above that — the
 * transparency was.
 *
 * There is no version of a fade that survives this. Any opacity under 1
 * lowers the measured ratio, and at the start of the range it is 0. So
 * the reveal rises and does not fade, which reads as a gentle settling
 * rather than an appearance, and costs nothing in readability. */
@keyframes bizgift-rise {
	from {
		transform: translateY(1.5rem);
	}

	to {
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.bizgift-section .b2b-head,
		.bizgift-section .b2b-split__copy,
		.bizgift-section .b2b-cards,
		.bizgift-section .bizgift-products,
		.bizgift-section .bizgift-logos,
		.bizgift-section .bizgift-cta {
			animation-name: bizgift-rise;
			animation-timing-function: linear;
			animation-fill-mode: both;
			/* `auto`, not a number of seconds: with a view timeline the
			   range below is what drives the animation, and the
			   shorthand would have quietly reset this to 0s. */
			animation-duration: auto;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}

/* ==================================================================
 * NO SIDEWAYS SCROLL
 * ================================================================== */

/*
 * A page that slides left and right under a thumb feels broken, and on a
 * phone it is easy to trigger by accident while scrolling down.
 *
 * `clip`, not `hidden`. `overflow-x: hidden` turns the element into a
 * scroll container, which changes how `position: sticky` behaves inside
 * it and can trap a scroll that belongs to the page. `clip` only clips —
 * no scroll container, no side effects. The logo row keeps its own
 * horizontal scrolling, because that is a separate scroll container of
 * its own and clipping an ancestor does not reach into it.
 *
 * Scoped to this template rather than to html/body on purpose. A global
 * clip already bit this project once: on the product page it cut the
 * first letters off headings, because a full-bleed section needs to
 * escape the very container that was clipping it. Whatever else turns
 * out to overflow elsewhere gets looked at where it happens.
 */
.b2b {
	overflow-x: clip;
}

/* Pasted copy is where an unbreakable string usually enters a page — a
   URL, a product code, a long German compound. Any one of them can push
   a column wider than the screen. */
.b2b-content {
	overflow-wrap: break-word;
}