/* ==========================================================================
   Page: Home
   Loaded only on the front page. Sections in the order the brief gives them.
   ========================================================================== */


/* ==========================================================================
   1. Hero carousel
   ========================================================================== */

.hero {
	--hero-interval: 7000ms;

	position: relative;
	/* Sideways swipes go to the slideshow (hero.js); scrolling and pinch-zoom stay with the browser. */
	touch-action: pan-y pinch-zoom;
	padding-bottom: calc(var(--space-8) + 2.5rem);
	overflow: hidden;
	background:
		radial-gradient(55% 65% at 80% 42%, rgb(106 185 55 / 0.11) 0%, rgb(106 185 55 / 0) 70%),
		linear-gradient(180deg, var(--white) 0%, var(--white) 52%, var(--surface-2) 100%);
}

.hero__stage {
	display: grid;
}

.hero-slide {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.55s var(--ease-out), visibility 0s linear 0.55s;
}

.hero-slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.55s var(--ease-out), visibility 0s;
}

.hero-slide__inner {
	display: grid;
	align-items: center;
	gap: var(--space-6);
	padding-block: var(--space-5) var(--space-4);
}

@media (min-width: 1024px) {
	.hero-slide__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-7);
		min-height: clamp(560px, calc(100svh - var(--header-h) - 180px), 680px);
		padding-block: var(--space-6) var(--space-5);
	}
}

/* --- Copy ---------------------------------------------------------------- */

.hero-slide__copy {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--space-5);
	max-width: 38rem;
}

.hero-slide__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.95rem 0.5rem 0.7rem;
	border: 1px solid var(--green-100);
	border-radius: var(--radius-pill);
	background: var(--green-50);
	color: var(--green-700);
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

.hero-slide__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green-400);
	box-shadow: 0 0 0 4px rgb(73 162 49 / 0.2);
}

.hero-slide__title {
	color: var(--ink-900);
	font-size: var(--fs-hero);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.038em;
	line-height: 1.05;
}

/* The accent line: the logo gradient, clipped to text. Starts from the
   logo's mid stop (#49A231, 3.2:1) so every part of it passes AA-large. */
.hero-slide__accent {
	display: block;
	margin-top: 0.1em;
	color: var(--green-500);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hero-slide__accent {
		background: linear-gradient(100deg, #49A231 0%, #2C802E 45%, #0C5E2C 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.hero-slide__subtitle {
	max-width: 32rem;
	color: var(--ink-700);
	font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
	font-weight: var(--fw-bold);
	letter-spacing: -0.015em;
	line-height: 1.4;
}

.hero-slide__points {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 0.6rem 1.5rem;
}

@media (max-width: 420px) {
	.hero-slide__points {
		grid-template-columns: 1fr;
	}
}

.hero-slide__points li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ink-900);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
}

.hero-slide__points .icon {
	width: 20px;
	height: 20px;
	padding: 4px;
	border-radius: 50%;
	background: var(--green-500);
	color: var(--white);
	stroke-width: 3;
}

.hero-slide__text {
	max-width: 35rem;
	color: var(--ink-500);
	font-size: var(--fs-body);
	line-height: 1.7;
}

.hero-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--space-2);
}

/* Sequenced entrance: copy lines, then the visual, each staggered. */

.hero-slide [data-seq],
.hero-slide [data-seq-visual] {
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero-slide [data-seq] {
	transform: translateY(20px);
}

.hero-slide [data-seq-visual] {
	transform: translateY(28px) scale(0.965);
}

.hero-slide.is-active [data-seq],
.hero-slide.is-active [data-seq-visual] {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
}

.hero-slide.is-active [data-seq]:nth-child(2) { transition-delay: 70ms; }
.hero-slide.is-active [data-seq]:nth-child(3) { transition-delay: 140ms; }
.hero-slide.is-active [data-seq]:nth-child(4) { transition-delay: 210ms; }
.hero-slide.is-active [data-seq]:nth-child(5) { transition-delay: 280ms; }
.hero-slide.is-active [data-seq]:nth-child(6) { transition-delay: 350ms; }

.hero-slide.is-active [data-seq-visual]:nth-of-type(1) { transition-delay: 120ms; }
.hero-slide.is-active [data-seq-visual]:nth-of-type(2) { transition-delay: 220ms; }
.hero-slide.is-active [data-seq-visual]:nth-of-type(3) { transition-delay: 320ms; }
.hero-slide.is-active [data-seq-visual]:nth-of-type(4) { transition-delay: 420ms; }
.hero-slide.is-active [data-seq-visual]:nth-of-type(5) { transition-delay: 500ms; }
.hero-slide.is-active [data-seq-visual]:nth-of-type(6) { transition-delay: 580ms; }

/* --- Visual stage -------------------------------------------------------- */

.hero-visual {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 1 / 0.86;
}

@media (max-width: 1023px) {
	.hero-slide__visual {
		order: -1;
		max-width: 560px;
	}
}

@media (min-width: 1024px) {
	.hero-visual {
		justify-self: end;
		aspect-ratio: 1 / 0.94;
	}
}

.hero-visual__ring {
	position: absolute;
	inset: 4% 2% 0 6%;
	border: 1px solid rgb(44 128 46 / 0.14);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(106 185 55 / 0.14), rgb(106 185 55 / 0) 74%);
	pointer-events: none;
}

.hero-visual__ring::after {
	content: "";
	position: absolute;
	inset: 13%;
	border: 1.5px dashed rgb(44 128 46 / 0.2);
	border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-slide.is-active .hero-visual__ring::after {
		animation: orbit 90s linear infinite;
	}
}

@keyframes orbit {
	to {
		transform: rotate(1turn);
	}
}

/* Slide 1 — three plates and the specification card */

.hero-visual__plate {
	position: absolute;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.hero-visual__plate--1 {
	top: 2%;
	left: 13%;
	z-index: 2;
	width: 57%;
	aspect-ratio: 1;
}

.hero-visual__plate--2 {
	top: 11%;
	right: 0;
	z-index: 1;
	width: 34%;
	aspect-ratio: 4 / 5;
	rotate: 4deg;
}

.hero-visual__plate--3 {
	right: 6%;
	bottom: 2%;
	z-index: 3;
	width: 32%;
	aspect-ratio: 1;
	rotate: -3deg;
	border: 5px solid var(--white);
}

.hero-visual__card {
	position: absolute;
	bottom: 7%;
	left: 0;
	z-index: 4;
	width: min(60%, 310px);
}

/* Slide 2 — a staggered mosaic of the range and the rating badge */

.mosaic {
	position: absolute;
	inset: 3% 0 3% 5%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-content: center;
	gap: 3.4%;
}

.mosaic__tile {
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.mosaic__tile:nth-child(3n + 2) {
	translate: 0 -11%;
}

.mosaic__tile:nth-child(3n + 1),
.mosaic__tile:nth-child(3n) {
	translate: 0 7%;
}

.hero-visual__badge {
	position: absolute;
	bottom: 1%;
	left: 0;
	z-index: 3;
}

/* Slide 3 — one large branded plate over a trail of bags in motion */

.motion-trail {
	position: absolute;
	top: 50%;
	right: -12%;
	left: -12%;
	overflow: hidden;
	translate: 0 -50%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.motion-trail__track {
	--ticker-gap: 18px;

	display: flex;
	gap: var(--ticker-gap);
	width: max-content;
	animation: ticker-left 38s linear infinite;
	animation-play-state: paused;
}

.hero-slide.is-active .motion-trail__track {
	animation-play-state: running;
}

/* Everything that moves in the hero stops when the hero is paused. */
.hero.is-paused .motion-trail__track,
.hero.is-paused .hero-visual__ring::after,
.hero.is-paused .logo-callout__dot {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.motion-trail__track {
		animation: none;
	}
}

.motion-trail__item {
	flex: 0 0 auto;
	width: clamp(96px, 8vw + 40px, 150px);
	aspect-ratio: 1;
	border-radius: 22px;
	opacity: 0.5;
}

.hero-visual__hero-plate {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 60%;
	aspect-ratio: 1;
	overflow: visible;
	translate: -50% -50%;
	border-radius: var(--radius-2xl);
	background: none;
	box-shadow: var(--shadow-lg);
}

.hero-visual__hero-plate img {
	border-radius: inherit;
	background: var(--plate);
}

/* Callout anchored just above the printed "YOUR LOGO" of the kraft
   photograph, so the dot points at the print without covering it. */
.logo-callout {
	position: absolute;
	top: 46%;
	left: 46%;
	width: 0;
	height: 0;
}

.logo-callout__dot {
	position: absolute;
	top: -8px;
	left: -8px;
	width: 16px;
	height: 16px;
	border: 3px solid var(--white);
	border-radius: 50%;
	background: var(--green-500);
	box-shadow: 0 0 0 0 rgb(44 128 46 / 0.45);
}

@media (prefers-reduced-motion: no-preference) {
	.hero-slide.is-active .logo-callout__dot {
		animation: pulse 2.2s var(--ease-out) infinite;
	}
}

@keyframes pulse {
	70% {
		box-shadow: 0 0 0 14px rgb(44 128 46 / 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgb(44 128 46 / 0);
	}
}

.logo-callout::before {
	content: "";
	position: absolute;
	bottom: 8px;
	left: -0.75px;
	width: 1.5px;
	height: 44px;
	background: var(--green-500);
}

.logo-callout__label {
	position: absolute;
	bottom: 52px;
	left: 0;
	padding: 0.5rem 0.9rem;
	translate: -50% 0;
	border-radius: var(--radius-pill);
	background: var(--ink-900);
	color: var(--white);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	white-space: nowrap;
	box-shadow: var(--shadow-md);
}

/* --- Controls ------------------------------------------------------------ */

.hero__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	margin-top: var(--space-4);
}

.hero__tabs {
	display: flex;
	flex: 1 1 auto;
	gap: var(--space-4);
	max-width: 660px;
}

.hero__tab {
	display: grid;
	flex: 1 1 0;
	grid-template-columns: auto 1fr;
	gap: 0.7rem 0.55rem;
	min-height: 44px;
	padding-block: 0.4rem;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	text-align: left;
	transition: color var(--dur-2) ease;
}

.hero__tab:hover {
	color: var(--ink-900);
}

.hero__tab-num {
	color: var(--ink-450);
	font-variant-numeric: tabular-nums;
}

/* Below 768px only the number shows; the label stays readable to screen
   readers, so each tab keeps its name. */
.hero__tab-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.hero__tab-label {
		position: static;
		display: block;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

.hero__tab-bar {
	grid-column: 1 / -1;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--line);
}

.hero__tab-fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--brand-gradient);
	transform: scaleX(0);
	transform-origin: left;
}

.hero__tab.is-active {
	color: var(--ink-900);
}

.hero__tab.is-active .hero__tab-num {
	color: var(--green-500);
}

/* Not autoplaying (reduced motion, or stopped): the active bar is simply full. */
.hero__tab.is-active .hero__tab-fill {
	transform: scaleX(1);
}

.hero.is-autoplay .hero__tab.is-active .hero__tab-fill {
	animation: tab-fill var(--hero-interval) linear forwards;
}

.hero.is-autoplay.is-paused .hero__tab.is-active .hero__tab-fill {
	animation-play-state: paused;
}

@keyframes tab-fill {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.hero__buttons {
	display: flex;
	flex: 0 0 auto;
	gap: 0.5rem;
}


/* ==========================================================================
   2. Trust strip — docked to the base of the hero
   ========================================================================== */

.trust {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * (var(--space-8) + 0.5rem));
}

.trust__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--white);
	box-shadow: var(--shadow-md);
}

.trust__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.2rem 1rem;
}

.trust__item:nth-child(odd) {
	border-right: 1px solid var(--line);
}

.trust__item:nth-child(-n + 2) {
	border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
	.trust__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.trust__item {
		gap: 0.8rem;
		padding: 1.35rem 1.1rem;
	}

	.trust__item:nth-child(-n + 2) {
		border-bottom: 0;
	}

	.trust__item:not(:last-child) {
		border-right: 1px solid var(--line);
	}
}

.trust__icon {
	display: grid;
	flex: 0 0 48px;
	place-items: center;
	height: 48px;
	border-radius: 15px;
	background: var(--green-50);
	color: var(--green-500);
	transition: background-color var(--dur-3) ease, color var(--dur-3) ease;
}

.trust__item:hover .trust__icon {
	background: var(--brand-gradient);
	color: var(--white);
}

.trust__label {
	color: var(--ink-900);
	font-size: 0.875rem;
	font-weight: var(--fw-bold);
	letter-spacing: -0.005em;
	line-height: 1.3;
}

@media (min-width: 900px) {
	.trust__icon {
		flex-basis: 44px;
		height: 44px;
		border-radius: 14px;
	}

	.trust__label {
		font-size: 0.9375rem;
	}
}

@media (min-width: 1200px) {
	.trust__item {
		gap: 1rem;
		padding: 1.65rem 1.6rem;
	}

	.trust__icon {
		flex-basis: 54px;
		height: 54px;
		border-radius: 17px;
	}

	.trust__label {
		font-size: 1rem;
	}
}


/* ==========================================================================
   3. Our Product Range — the 16-type ticker
   ========================================================================== */

.range {
	overflow: hidden;
	padding-top: calc(var(--section-y) * 0.85);
}

.range__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}

.range__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.range .ticker__row--left .ticker__track {
	--ticker-duration: 85s;
}

.range .ticker__row--right .ticker__track {
	--ticker-duration: 95s;
}

.range-card {
	flex: 0 0 auto;
	width: 232px;
}

@media (min-width: 768px) {
	.range-card {
		width: 280px;
	}
}

.range-card__link {
	position: relative;
	display: block;
	color: var(--ink-900);
}

.range-card__media {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
}

.range-card__media img {
	transition: transform 0.9s var(--ease-out);
}

.range-card__link:hover .range-card__media img,
.range-card__link:focus-visible .range-card__media img {
	transform: scale(1.06);
}

.range-card__body {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	display: grid;
	gap: 0.1rem;
	padding: 0.7rem 3.4rem 0.75rem 0.95rem;
	border-radius: var(--radius-md);
	background: rgb(255 255 255 / 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-sm);
}

.range-card__lane {
	color: var(--ink-500);
	font-size: 0.6875rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.range-card__name {
	color: var(--ink-900);
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.range-card__go {
	position: absolute;
	top: 50%;
	right: 10px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	translate: 0 -50%;
	border-radius: 50%;
	background: var(--green-50);
	color: var(--green-700);
	transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}

.range-card__link:hover .range-card__go,
.range-card__link:focus-visible .range-card__go {
	background: var(--green-500);
	color: var(--white);
}


/* ==========================================================================
   4. Your Brand, Perfectly Printed — bento
   ========================================================================== */

.printing .section-head {
	margin-bottom: var(--space-7);
}

.printing__grid {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.printing__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--space-5);
	}
}

.printing__feature {
	min-height: 380px;
	border-radius: var(--radius-xl);
}

.printing__feature img {
	position: absolute;
	inset: 0;
}

.printing__caption {
	position: absolute;
	right: 1.1rem;
	bottom: 1.1rem;
	left: 1.1rem;
	display: grid;
	gap: 0.3rem;
	max-width: 340px;
	padding: 1rem 1.2rem;
	border-radius: var(--radius-md);
	background: rgb(255 255 255 / 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-md);
	color: var(--ink-700);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.printing__caption-kicker {
	color: var(--green-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-heavy);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.printing__methods {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 600px) {
	.printing__methods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.method {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.45rem;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	transition:
		opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
		transform 0.9s var(--ease-out) var(--reveal-delay, 0ms),
		translate var(--dur-3) var(--ease-out),
		border-color var(--dur-3) ease,
		box-shadow var(--dur-3) ease;
}

.method:hover {
	translate: 0 -3px;
	border-color: var(--green-200);
	box-shadow: var(--shadow-md);
}

.method__swatch {
	position: relative;
	display: block;
	width: 54px;
	height: 54px;
	margin-bottom: 0.7rem;
	overflow: hidden;
	border-radius: 16px;
}

.method__num {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	color: var(--ink-450);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
}

.method__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.02em;
}

.method__note {
	color: var(--ink-500);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

/* The drawn swatches themselves are the shared .swatch component
   (components.css) — also used by the product pages' printing section. */

/* The mockup card closes the grid in brand green. */

.method--mockup {
	border-color: transparent;
	background: var(--brand-deep);
	color: var(--white);
}

.method--mockup:hover {
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.method--mockup .method__name {
	color: var(--white);
}

.method--mockup .method__note {
	color: rgb(255 255 255 / 0.84);
}

.method--mockup .btn {
	justify-self: start;
	margin-top: 0.7rem;
}

.method__badge {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 0.7rem;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: 16px;
	background: rgb(255 255 255 / 0.1);
	color: var(--green-glow);
}


/* ==========================================================================
   5. Your Bag. Your Specification. / Not sure which bag you need?
   ========================================================================== */

.spec {
	padding-bottom: var(--space-8);
	border-top: 1px solid var(--line);
}

.spec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}

.spec__rail {
	position: relative;
	display: grid;
}

/* The rail itself does not fade; its steps arrive one after another. */
.spec__rail[data-reveal].is-pending {
	opacity: 1;
	transform: none;
}

.spec__rail::before,
.spec__rail::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 36px;
	bottom: 36px;
	left: 35px;
	width: 2px;
	border-radius: 2px;
}

.spec__rail::before {
	background: var(--line);
}

.spec__rail::after {
	background: linear-gradient(180deg, #6AB937, #2C802E 60%, #0C5E2C);
	transform-origin: top;
	transition: transform 1.6s var(--ease-out) 0.25s;
}

.spec__rail.is-pending::after {
	transform: scaleY(0);
}

/* Steps always sit above the line. While a step fades and slides in it is
   its own layer, and without a z-index the line (drawn after the steps)
   would run across its icon until the step finished arriving. */
.spec-step {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	align-content: start;
	column-gap: 1.25rem;
	padding-bottom: 1.75rem;
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
	transition-delay: calc(var(--step) * 110ms + 150ms);
}

.spec-step:last-child {
	padding-bottom: 0;
}

.spec__rail.is-pending .spec-step {
	opacity: 0;
	transform: translateY(16px);
}

.spec-step__icon {
	position: relative;
	z-index: 1;
	display: grid;
	grid-row: 1 / span 3;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1.5px solid var(--green-200);
	border-radius: 50%;
	background: var(--white);
	box-shadow: 0 0 0 8px var(--white);
	color: var(--green-500);
	transition: background-color var(--dur-3) ease, color var(--dur-3) ease, border-color var(--dur-3) ease;
}

.spec-step:hover .spec-step__icon {
	border-color: var(--green-500);
	background: var(--green-500);
	color: var(--white);
}

.spec-step__num {
	align-self: end;
	margin-top: 0.35rem;
	color: var(--green-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-heavy);
	letter-spacing: 0.1em;
}

.spec-step__name {
	font-size: var(--fs-h3);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.02em;
}

.spec-step__note {
	max-width: 15rem;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

@media (min-width: 1024px) {
	.spec__rail {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-4);
	}

	.spec__rail::before,
	.spec__rail::after {
		top: 35px;
		right: calc(100% / 12);
		bottom: auto;
		left: calc(100% / 12);
		width: auto;
		height: 2px;
	}

	.spec__rail::after {
		background: var(--brand-gradient);
		transform-origin: left;
	}

	.spec__rail.is-pending::after {
		transform: scaleX(0);
	}

	.spec-step {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		justify-items: center;
		gap: 0.35rem;
		padding-bottom: 0;
		text-align: center;
	}

	.spec-step__icon {
		grid-row: auto;
		margin-bottom: 0.6rem;
	}

	.spec-step__num {
		margin-top: 0;
	}
}

/* Help panel */

.help {
	padding-bottom: var(--section-y);
}

.help__panel {
	position: relative;
	display: grid;
	gap: var(--space-6);
	padding: clamp(1.5rem, 0.8rem + 3vw, 3.25rem);
	overflow: hidden;
	border: 1px solid var(--green-100);
	border-radius: var(--radius-2xl);
	background:
		radial-gradient(60% 120% at 100% 0%, rgb(106 185 55 / 0.16) 0%, rgb(106 185 55 / 0) 60%),
		var(--green-50);
}

/* Wide screens: intro and action share the top row; the three questions get
   the full width beneath, so none of them is squeezed. */
@media (min-width: 900px) {
	.help__panel {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-6) var(--space-7);
	}

	.help__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.help__action {
		grid-column: 2;
		grid-row: 1;
		justify-items: end;
	}

	.help__questions {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

.help__title {
	font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.03em;
	line-height: 1.12;
}

.help__title .text-accent {
	display: inline;
}

.help__lead {
	margin-top: 0.75rem;
	color: var(--ink-500);
}

.help__questions {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 700px) {
	.help__questions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.help__question {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--white);
}

.help__question strong {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.help__question span span {
	display: block;
	margin-top: 0.25rem;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	line-height: 1.45;
}

.help__icon {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	height: 44px;
	border-radius: 13px;
	background: var(--green-50);
	color: var(--green-500);
}

.help__action {
	display: grid;
	justify-items: start;
	gap: 0.6rem;
}

.help__note {
	color: var(--ink-500);
	font-size: var(--fs-xs);
}

.help__note a {
	font-weight: var(--fw-bold);
}


/* ==========================================================================
   6. Eco-friendly bags — carousel
   ========================================================================== */

.eco {
	overflow: hidden;
	background: linear-gradient(180deg, var(--white) 0%, var(--surface-2) 100%);
}

.eco .carousel__track {
	align-items: stretch;
}

.eco-card {
	flex: 0 0 min(84vw, 360px);
}

@media (min-width: 768px) {
	.eco-card {
		flex-basis: clamp(360px, 38vw, 520px);
	}
}

.eco-card__inner {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--white);
	transition: border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}

.eco-card:hover .eco-card__inner {
	border-color: var(--green-200);
	box-shadow: var(--shadow-md);
}

.eco-card__media {
	display: block;
	aspect-ratio: 5 / 4;
	border-radius: 0;
}

.eco-card__media img {
	transition: transform 1.1s var(--ease-out);
}

.eco-card:hover .eco-card__media img {
	transform: scale(1.05);
}

.eco-card__standin {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.9rem;
	background: radial-gradient(closest-side, #FBF8F4 0%, var(--plate) 100%);
}

.eco-card__standin svg {
	width: 42%;
	height: auto;
}

.standin__face {
	fill: #FCFAF7;
	stroke: var(--green-500);
	stroke-width: 2.5;
}

.standin__gusset {
	fill: #EFE7DC;
	stroke: var(--green-500);
	stroke-width: 2.5;
	stroke-linejoin: round;
}

.standin__fold {
	stroke: var(--green-300);
	stroke-dasharray: 4 5;
	stroke-width: 1.5;
}

.standin__rope {
	fill: none;
	stroke: var(--green-700);
	stroke-linecap: round;
	stroke-width: 3.5;
}

.standin__eyelet {
	fill: var(--white);
	stroke: var(--green-500);
	stroke-width: 2;
}

.standin__mark {
	fill: none;
	stroke: var(--green-500);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.5;
}

.eco-card__standin-note {
	padding: 0.35rem 0.8rem;
	border-radius: var(--radius-pill);
	background: var(--white);
	box-shadow: var(--shadow-xs);
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.eco-card__body {
	display: grid;
	align-content: start;
	gap: 0.8rem;
	padding: 1.5rem 1.6rem 1.75rem;
}

.eco-card__index {
	color: var(--green-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-heavy);
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
}

.eco-card__title {
	font-size: clamp(1.3125rem, 1.1rem + 0.55vw, 1.625rem);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.025em;
}

.eco-card__title a {
	display: inline-block;
	padding-block: 0.65rem;
	margin-block: -0.65rem;
	color: var(--ink-900);
}

.eco-card__title a:hover {
	color: var(--green-700);
}

.eco-card__text {
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.eco-card__actions {
	margin-top: 0.3rem;
}

.eco .carousel__progress {
	margin-top: var(--space-5);
}


/* ==========================================================================
   7. Industries we serve
   ========================================================================== */

.industries__grid {
	display: grid;
	gap: var(--space-7);
}

@media (min-width: 1024px) {
	.industries__grid {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		align-items: start;
		gap: clamp(3rem, 1rem + 4vw, 6rem);
	}

	.industries__intro {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
	}
}

.industries__frame {
	display: none;
	margin-top: var(--space-7);
	aspect-ratio: 5 / 4;
	border-radius: var(--radius-xl);
}

@media (min-width: 1024px) {
	.industries__frame {
		display: block;
	}
}

.industries__photo {
	position: absolute;
	inset: 0;
	opacity: 0;
	scale: 1.04;
	transition: opacity 0.6s var(--ease-out), scale 1.2s var(--ease-out);
}

.industries__photo.is-active {
	opacity: 1;
	scale: 1;
}

.industries__photo img {
	height: 100%;
}

.industries__frame-label {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	padding: 0.5rem 0.95rem;
	border-radius: var(--radius-pill);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	color: var(--ink-900);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.industries__list {
	border-top: 1px solid var(--line-strong);
}

.industry {
	border-bottom: 1px solid var(--line-strong);
}

.industry__heading {
	font-size: inherit;
}

.industry__trigger {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	padding: 1.3rem 0;
	color: var(--ink-900);
	text-align: left;
}

.industry__num {
	width: 1.6rem;
	color: var(--ink-450);
	font-size: var(--fs-xs);
	font-weight: var(--fw-heavy);
	font-variant-numeric: tabular-nums;
	transition: color var(--dur-2) ease;
}

.industry__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--white);
	color: var(--green-500);
	transition: background-color var(--dur-3) ease, color var(--dur-3) ease, border-color var(--dur-3) ease;
}

.industry__name {
	font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.022em;
	line-height: 1.2;
	transition: color var(--dur-2) ease;
}

.industry__trigger:hover .industry__name {
	color: var(--green-700);
}

.industry__toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3) ease, border-color var(--dur-3) ease, color var(--dur-3) ease;
}

.industry.is-open .industry__toggle {
	transform: rotate(45deg);
	border-color: var(--green-500);
	background: var(--green-500);
	color: var(--white);
}

.industry.is-open .industry__icon {
	border-color: var(--green-500);
	background: var(--green-500);
	color: var(--white);
}

.industry.is-open .industry__num {
	color: var(--green-500);
}

.industry__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.55s var(--ease-out);
}

[data-industries].is-enhanced .industry:not(.is-open) .industry__panel {
	grid-template-rows: 0fr;
}

.industry__panel-inner {
	display: grid;
	gap: 0.9rem;
	min-height: 0;
	overflow: hidden;
}

.industry__panel-inner > :first-child {
	margin-top: 0.1rem;
}

.industry__panel-inner > :last-child {
	margin-bottom: 1.6rem;
}

@media (min-width: 600px) {
	.industry__panel-inner {
		padding-left: calc(1.6rem + 46px + 1.8rem);
	}
}

.industry__text {
	max-width: 34rem;
	color: var(--ink-700);
}

.industry__label {
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.industry__products {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}


/* ==========================================================================
   8. Committed to a Greener Future
   ========================================================================== */

.greener__panel {
	position: relative;
	display: grid;
	gap: var(--space-7);
	padding: clamp(1.75rem, 0.8rem + 4vw, 4.75rem);
	overflow: hidden;
	border-radius: var(--radius-2xl);
	background: var(--brand-deep);
	color: var(--white);
	isolation: isolate;
}

@media (min-width: 1024px) {
	.greener__panel {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(3rem, 1rem + 4vw, 6rem);
	}

	.greener__pillars {
		grid-column: 1 / -1;
	}
}

.greener__leaves {
	position: absolute;
	right: -4%;
	bottom: -14%;
	z-index: -1;
	width: min(52%, 560px);
	fill: none;
	stroke: rgb(255 255 255 / 0.07);
	stroke-width: 1.4;
}

.greener__copy {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--space-6);
}

.greener__visual {
	position: relative;
	min-height: 300px;
	aspect-ratio: 1.15;
}

@media (min-width: 1024px) {
	.greener__visual {
		aspect-ratio: auto;
		min-height: 400px;
	}
}

.greener__plate {
	position: absolute;
	border-radius: var(--radius-xl);
	box-shadow: 0 34px 60px -30px rgb(0 0 0 / 0.55);
}

.greener__plate--1 {
	top: 0;
	left: 0;
	width: 60%;
	aspect-ratio: 4 / 5;
}

.greener__plate--2 {
	right: 0;
	bottom: 0;
	width: 52%;
	aspect-ratio: 1;
	border: 6px solid #0E6130;
}

.greener__pillars {
	display: grid;
	gap: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid rgb(255 255 255 / 0.16);
}

@media (min-width: 768px) {
	.greener__pillars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pillar {
	display: grid;
	align-content: start;
	gap: 0.6rem;
}

.pillar__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	margin-bottom: 0.4rem;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: 15px;
	background: rgb(255 255 255 / 0.1);
	color: var(--green-glow);
}

.pillar__title {
	color: var(--white);
	font-size: var(--fs-h3);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.02em;
}

.pillar__text {
	color: rgb(255 255 255 / 0.84);
	font-size: var(--fs-sm);
	line-height: 1.6;
}


/* ==========================================================================
   9. Trusted by Business Across the UAE — logo marquee
   ========================================================================== */

.clients {
	overflow: hidden;
	padding-top: 0;
}

.clients__head {
	margin-bottom: var(--space-7);
}

/* Two rows gliding in opposite directions; each row's duration is set inline
   from its length (template-parts/home/clients.php), so every row moves at
   the same pace. */
.logo-marquee {
	--ticker-gap: 1.25rem;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ticker-gap);
}

.logo-marquee__row {
	overflow: hidden;
}

.logo-marquee__row--right .logo-marquee__track {
	animation-name: ticker-right;
}

.logo-tile {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 212px;
	height: 108px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	transition: border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}

.logo-tile:hover {
	border-color: var(--green-200);
	box-shadow: var(--shadow-sm);
}

/* Each logo's size comes from its proportions (b2p_logo_size()): the same
   visual weight for a long wordmark and a square emblem. */
.logo-tile img {
	width: var(--logo-w, 68%);
	height: var(--logo-h, auto);
	object-fit: contain;
	opacity: 0.7;
	filter: grayscale(1);
	transition: filter var(--dur-3) ease, opacity var(--dur-3) ease;
}

.logo-tile:hover img {
	opacity: 1;
	filter: none;
}

/* A brand whose logo file is still to come: its name, set like a wordmark. */
.logo-tile__name {
	color: var(--ink-500);
	font-size: 1.3125rem;
	font-weight: var(--fw-heavy);
	letter-spacing: -0.02em;
}

.clients__foot {
	display: flex;
	justify-content: center;
	margin-top: var(--space-5);
}

/* Reduced motion: nothing glides; each row scrolls sideways by hand. */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__row {
		overflow-x: auto;
		scrollbar-width: thin;
	}
}


/* ==========================================================================
   10. Why Bag2Pack is #1
   ========================================================================== */

.why {
	padding-top: 0;
}

.why__grid {
	display: grid;
	gap: var(--space-7);
}

@media (min-width: 1024px) {
	.why__grid {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		align-items: start;
		gap: clamp(3rem, 1rem + 4vw, 6rem);
	}

	.why__intro {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
	}
}

.why__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.why__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.95rem;
	padding: 0.85rem 1.2rem 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	color: var(--ink-900);
	transition: border-color var(--dur-3) ease, box-shadow var(--dur-3) ease;
}

.why__rating:hover {
	border-color: var(--green-200);
	box-shadow: var(--shadow-md);
	color: var(--ink-900);
}

.why__rating-score {
	color: var(--ink-900);
	font-size: 2.375rem;
	font-weight: var(--fw-heavy);
	letter-spacing: -0.04em;
	line-height: 1;
}

.why__rating-meta {
	display: grid;
	gap: 0.2rem;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
}

.why__list {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.reason {
	display: grid;
	align-content: start;
	gap: 0.65rem;
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	transition:
		opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
		transform 0.9s var(--ease-out) var(--reveal-delay, 0ms),
		translate var(--dur-3) var(--ease-out),
		border-color var(--dur-3) ease,
		box-shadow var(--dur-3) ease;
}

.reason:hover {
	translate: 0 -3px;
	border-color: var(--green-200);
	box-shadow: var(--shadow-md);
}

.reason__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 0.45rem;
	border-radius: 16px;
	background: var(--green-50);
	color: var(--green-500);
	transition: background-color var(--dur-3) ease, color var(--dur-3) ease;
}

.reason:hover .reason__icon {
	background: var(--green-500);
	color: var(--white);
}

.reason__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.02em;
}

.reason__text {
	color: var(--ink-500);
	font-size: var(--fs-sm);
	line-height: 1.6;
}


/* ==========================================================================
   11. Google reviews
   ========================================================================== */

.reviews {
	overflow: hidden;
}

.reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

.rating-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-sm);
}

.rating-summary__score {
	color: var(--ink-900);
	font-size: 2.75rem;
	font-weight: var(--fw-heavy);
	letter-spacing: -0.045em;
	line-height: 1;
}

.rating-summary__meta {
	display: grid;
	gap: 0.3rem;
}

.rating-summary__count {
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
}

.review-card {
	flex: 0 0 min(86vw, 420px);
}

@media (min-width: 1100px) {
	.carousel--contained {
		overflow: visible;
	}

	.carousel--contained .carousel__track {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: auto;
	}

	.carousel--contained + .carousel-foot {
		display: none;
	}
}

.review-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	height: 100%;
	padding: 2rem 1.9rem 1.7rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--white);
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--dur-3) ease, border-color var(--dur-3) ease;
}

.review-card__inner:hover {
	border-color: var(--green-200);
	box-shadow: var(--shadow-md);
}

.review-card__inner::before {
	content: "\201C";
	position: absolute;
	top: 0.5rem;
	right: 1.4rem;
	color: var(--green-100);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 6.5rem;
	font-weight: var(--fw-bold);
	line-height: 1;
	pointer-events: none;
}

.review-card__top {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.review-card__source {
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.review-card__quote {
	position: relative;
	flex: 1 1 auto;
	color: var(--ink-900);
	font-size: 1.0625rem;
	font-weight: var(--fw-medium);
	line-height: 1.68;
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line);
}

.review-card__avatar {
	display: grid;
	flex: 0 0 46px;
	place-items: center;
	height: 46px;
	border-radius: 50%;
	background: var(--brand-gradient);
	color: var(--white);
	font-size: 0.9375rem;
	font-weight: var(--fw-heavy);
}

.review-card__author strong {
	display: block;
	font-size: 0.9375rem;
}

.review-card__author span span {
	display: block;
	color: var(--ink-500);
	font-size: var(--fs-xs);
}


/* ==========================================================================
   Small-screen refinements (from the 390px review)
   ========================================================================== */

@media (max-width: 599px) {

	/* Hero: the specification card becomes a compact badge, so it never
	   covers the product it is describing. */
	.hero-visual__card {
		bottom: 4%;
		width: auto;
		padding: 0.6rem 0.8rem;
	}

	.hero-visual__card .spec-card__title {
		margin-bottom: 0;
		font-size: 0.75rem;
	}

	.hero-visual__card .spec-card__chips {
		display: none;
	}

	.hero-visual__plate--1 {
		left: 4%;
		width: 60%;
	}

	/* Hero buttons share the row, and each takes the full width if it can't. */
	.hero-slide__actions .btn {
		flex: 1 1 150px;
		padding-inline: 1rem;
	}

	/* Printing methods: two columns, the mockup card across both. */
	.printing__methods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.method {
		padding: 1.1rem;
	}

	.method__num {
		top: 1.1rem;
		right: 1.1rem;
	}

	.method__swatch,
	.method__badge {
		width: 44px;
		height: 44px;
		margin-bottom: 0.4rem;
		border-radius: 13px;
	}

	.method__name {
		font-size: 1.0625rem;
	}

	.method__note {
		font-size: var(--fs-xs);
	}

	.method--mockup {
		grid-column: 1 / -1;
	}

	/* An odd number of methods leaves one cell over: the last method (the one
	   before the mockup card) takes the row, laid flat. */
	.method:nth-child(odd):nth-last-child(2) {
		grid-column: 1 / -1;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 1rem;
		align-items: center;
	}

	.method:nth-child(odd):nth-last-child(2) .method__swatch {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.printing__feature {
		min-height: 300px;
	}

	/* Reasons: icon beside the text instead of above it. */
	.reason {
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 1rem;
		row-gap: 0.3rem;
		padding: 1.25rem;
	}

	.reason__icon {
		grid-row: 1 / span 2;
		width: 44px;
		height: 44px;
		margin-bottom: 0;
		border-radius: 13px;
	}

	/* Logo tiles sized for a phone, the logos in proportion. */
	.logo-tile {
		width: 156px;
		height: 84px;
		border-radius: var(--radius-md);
	}

	.logo-tile img {
		width: calc(var(--logo-w, 100px) * 0.72);
		height: calc(var(--logo-h, 40px) * 0.72);
	}

	.logo-tile__name {
		font-size: 1.0625rem;
	}
}

@media (max-width: 899px) {

	/* Trust: icon above label, so short labels stop breaking into three lines. */
	.trust__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.65rem;
		padding: 1.1rem 1rem 1.15rem;
	}

	.trust__icon {
		flex-basis: auto;
		width: 42px;
		height: 42px;
		border-radius: 13px;
	}
}

@media (max-width: 767px) {

	/* Ticker cards a touch wider, so the lane label fits on one line. */
	.range-card {
		width: 252px;
	}

	.range-card__body {
		padding-right: 3.2rem;
	}

	.range-card__lane {
		letter-spacing: 0.05em;
	}
}

@media (max-width: 1023px) {

	/* Greener panel: the visual must not force the one-column grid wider
	   than the panel (it was clipping the copy). */
	.greener__panel > * {
		min-width: 0;
	}

	.greener__visual {
		min-height: 0;
	}
}