/* ==========================================================================
   THE PACKAGING LAB
   The frontend system. main.css keeps the reset, the design tokens and the
   plumbing that WordPress, WooCommerce and Elementor need; this file owns the
   layout and every component the visitor actually sees.

   It replaces the previous redesign layer outright rather than sitting on top
   of it — there is one card system, one button system and one section rhythm,
   and where a legacy rule survives in main.css it is because nothing here
   re-implements it.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS THE SYSTEM ADDS
   Colour, type, spacing, container and radius live in main.css :root. Motion
   and image ratios belong to the components, so they are declared here.
   ========================================================================== */

:root {
	--dur-fast:  .18s;
	--dur-base:  .32s;
	--dur-slow:  .6s;
	--dur-draw:  1.1s;
	--ease:      cubic-bezier(.22, .61, .36, 1);
	--ease-out:  cubic-bezier(.16, 1, .3, 1);

	--ratio-hero:     16 / 10;
	--ratio-category: 4 / 3;
	--ratio-product:  4 / 3;
	--ratio-service:  8 / 5;
	--ratio-band:     21 / 9;

	--rail-card: 84vw;
	--bar-h: 0px;
}

/* ==========================================================================
   2. PRIMITIVES
   ========================================================================== */

body { background: var(--paper); color: var(--v-body); font-size: var(--v-fs-body); }

.lab-container {
	width: min(100% - (var(--v-gutter) * 2), var(--container));
	margin-inline: auto;
}
.lab-container--wide { width: min(100% - (var(--v-gutter) * 2), var(--container-wide)); }
.lab-container--read { width: min(100% - (var(--v-gutter) * 2), var(--container-read)); }

.lab-section { padding-block: var(--space-section); position: relative; }
.lab-section--tight { padding-block: var(--space-5); }
.lab-section--flush { padding-block: var(--space-4) var(--space-5); }

/* Ground treatments. The builder pages already carry val-bg-* on every
   top-level container, so both naming systems resolve to the same colours. */
.lab-ink, .val-bg-ink { background: var(--ink-navy); color: rgba(255, 255, 255, .8); }
.lab-paper, .val-bg-paper { background: var(--paper); }
.lab-white, .val-bg-warm, .val-bg-white { background: var(--paper-white); }

.lab-ink h1, .lab-ink h2, .lab-ink h3, .lab-ink h4,
.val-bg-ink h1, .val-bg-ink h2, .val-bg-ink h3, .val-bg-ink h4 { color: #fff; }
.lab-ink p, .val-bg-ink p { color: rgba(255, 255, 255, .78); }

/* An ink section is cut, not filled: a dashed rule at each seam. */
.lab-ink, .val-bg-ink { position: relative; }
.lab-ink::before, .lab-ink::after,
.val-bg-ink::before, .val-bg-ink::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	height: 1px;
	pointer-events: none;
	z-index: 2;
	background: repeating-linear-gradient(90deg, var(--border-light) 0 8px, transparent 8px 16px);
}
.lab-ink::before, .val-bg-ink::before { top: 0; }
.lab-ink::after,  .val-bg-ink::after  { bottom: 0; }

/* ---- typography ---- */

h1, h2, h3, h4 {
	font-family: var(--v-sans);
	color: var(--ink-navy);
	letter-spacing: -.024em;
	line-height: 1.05;
	text-wrap: balance;
}
h1 { font-size: var(--v-fs-h1); font-weight: 700; }
h2 { font-size: var(--v-fs-h2); font-weight: 700; }
h3 { font-size: var(--v-fs-h3); font-weight: 650; line-height: 1.15; }
h4 { font-size: var(--v-fs-h4); font-weight: 650; }
p  { line-height: 1.62; }

.lab-lead, .val-lead, .v-lead {
	font-size: var(--v-fs-lead);
	line-height: 1.5;
	color: var(--v-muted);
	max-width: 56ch;
}
.lab-ink .lab-lead, .val-bg-ink .val-lead, .val-bg-ink .v-lead { color: rgba(255, 255, 255, .78); }

/* Eyebrow — a panel label on a press sheet. */
.lab-eyebrow, .val-eyebrow, .v-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--v-fs-eyebrow);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue-text);
	margin-bottom: var(--space-2);
}
.lab-eyebrow::before, .val-eyebrow::before, .v-eyebrow::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	flex: none;
}
.lab-eyebrow--light, .val-bg-ink .val-eyebrow, .val-bg-ink .v-eyebrow,
.lab-ink .lab-eyebrow { color: var(--v-accent-dim); }

/* Section head: eyebrow, heading, lead. */
.lab-head { max-width: 62ch; margin-bottom: var(--space-4); }
.lab-head--wide { max-width: none; }

/* ---- arrow ---- */
.lab-arrow {
	display: inline-block;
	width: 18px;
	height: 8px;
	margin-left: .45rem;
	background: currentColor;
	clip-path: polygon(0 3px, 11px 3px, 8px 0, 11px 0, 16px 4px, 11px 8px, 8px 8px, 11px 5px, 0 5px);
	transition: transform var(--dur-base) var(--ease);
	flex: none;
}
.lab-textlink {
	display: inline-flex;
	align-items: center;
	font-weight: 650;
	font-size: .95rem;
	color: var(--blue-text);
	text-decoration: none;
	min-height: 44px;
}
.lab-textlink:hover .lab-arrow { transform: translateX(5px); }
.lab-ink .lab-textlink, .val-bg-ink .lab-textlink { color: var(--v-accent-dim); }

/* ---- registration mark + control strip ---- */

.lab-reg {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px currentColor;
	color: var(--process-blue);
}
.lab-reg::before, .lab-reg::after { content: ''; position: absolute; background: currentColor; }
.lab-reg::before { inset-inline: -3px; top: 50%; height: 1px; }
.lab-reg::after  { inset-block: -3px; left: 50%; width: 1px; }

.lab-controlstrip { display: flex; height: 5px; border-radius: 999px; overflow: hidden; }
.lab-controlstrip span { flex: 1; }
.lab-controlstrip span:nth-child(1) { background: var(--process-cyan); }
.lab-controlstrip span:nth-child(2) { background: var(--process-magenta); }
.lab-controlstrip span:nth-child(3) { background: var(--process-yellow); }
.lab-controlstrip span:nth-child(4) { background: var(--ink-navy-2); }
.lab-controlstrip span:nth-child(5) { background: var(--process-blue); }
.lab-controlstrip span:nth-child(6) { background: var(--process-orange); }
.lab-controlstrip span:nth-child(7) { background: var(--paper); }
.lab-controlstrip span:nth-child(8) { background: var(--charcoal); }

/* ==========================================================================
   3. BUTTONS
   Signature: three ink layers sit offset behind the button and register into
   alignment on hover. It is a box-shadow, so nothing in the layout moves.
   ========================================================================== */

.v-btn, a.val-cta, .val-cta .elementor-button, .elementor .elementor-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.5rem;
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--v-sans);
	font-size: .975rem;
	font-weight: 650;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-base) var(--ease),
	            color var(--dur-base) var(--ease),
	            border-color var(--dur-base) var(--ease),
	            box-shadow var(--dur-base) var(--ease);
}

.v-btn--primary, .val-cta-primary .elementor-button, .elementor .elementor-button {
	background: var(--process-blue);
	border-color: var(--process-blue);
	color: #fff;
	box-shadow: 0 0 0 0 var(--process-cyan), 0 0 0 0 rgba(231, 60, 135, .6);
}
.v-btn--primary:hover, .val-cta-primary .elementor-button:hover, .elementor .elementor-button:hover {
	background: #0B4FD8;
	border-color: #0B4FD8;
	color: #fff;
	box-shadow: 3px 3px 0 0 var(--process-cyan), 6px 6px 0 0 rgba(231, 60, 135, .55);
}

.v-btn--ghost, .val-cta-secondary .elementor-button {
	background: transparent;
	border-color: var(--border-dark);
	color: var(--ink-navy);
}
.v-btn--ghost:hover, .val-cta-secondary .elementor-button:hover {
	border-color: var(--ink-navy);
	box-shadow: 3px 3px 0 0 var(--process-orange);
}
/* Dark-context secondary button.
   The light-ground ghost carries a border of --border-dark (Ink Navy at 14%),
   which is invisible on navy: on the category and service heroes the primary
   Get a Quote lost its shape entirely and read as bare text next to a solid
   green WhatsApp button. The dark variant existed but was scoped only to
   .lab-ink/.val-bg-ink, and the page heroes use .v-page-hero. Listing every
   dark ground here keeps the light-background ghost untouched. */
.lab-ink .v-btn--ghost, .val-bg-ink .v-btn--ghost,
.v-page-hero .v-btn--ghost, .lab-prefooter__card .v-btn--ghost,
body .v-page-hero a.v-btn--ghost, body .lab-ink a.v-btn--ghost, body .val-bg-ink a.v-btn--ghost,
.lab-ink .val-cta-secondary .elementor-button,
.val-bg-ink .val-cta-secondary .elementor-button,
.lab-prefooter__card .val-cta-secondary .elementor-button,
.v-page-hero .val-cta-secondary .elementor-button {
	color: var(--paper-white);
	border-color: rgba(255, 255, 255, .55);
	background: transparent;
}
.lab-ink .v-btn--ghost:hover, .val-bg-ink .v-btn--ghost:hover,
.v-page-hero .v-btn--ghost:hover, .lab-prefooter__card .v-btn--ghost:hover,
body .v-page-hero a.v-btn--ghost:hover, body .lab-ink a.v-btn--ghost:hover, body .val-bg-ink a.v-btn--ghost:hover,
.val-bg-ink .val-cta-secondary .elementor-button:hover,
.v-page-hero .val-cta-secondary .elementor-button:hover {
	background: var(--paper-white);
	border-color: var(--paper-white);
	color: var(--ink-navy);
	box-shadow: 3px 3px 0 0 var(--process-cyan);
}
.lab-ink .v-btn--ghost:focus-visible, .val-bg-ink .v-btn--ghost:focus-visible,
.v-page-hero .v-btn--ghost:focus-visible, .lab-prefooter__card .v-btn--ghost:focus-visible {
	outline: 3px solid var(--paper-white);
	outline-offset: 3px;
}

.v-btn--dark  { background: var(--ink-navy); border-color: var(--ink-navy); color: #fff; }
.v-btn--dark:hover { background: var(--charcoal); border-color: var(--charcoal); box-shadow: 3px 3px 0 0 var(--process-yellow); }

.v-btn--light { background: var(--paper-white); border-color: var(--paper-white); color: var(--ink-navy); }
.v-btn--light:hover { box-shadow: 3px 3px 0 0 var(--process-cyan), 6px 6px 0 0 var(--process-magenta); color: var(--ink-navy); }

.v-btn--wa, .v-btn--wa-soft { background: var(--vp-whatsapp); border-color: var(--vp-whatsapp); color: #06251A; }
.v-btn--wa:hover, .v-btn--wa-soft:hover { filter: brightness(1.06); box-shadow: 3px 3px 0 0 rgba(7, 26, 47, .3); color: #06251A; }

.v-btn--sm { padding: .65rem 1.05rem; min-height: 44px; font-size: .9rem; }
.v-btn--block { width: 100%; }

.v-btn:focus-visible, .val-cta .elementor-button:focus-visible {
	outline: 3px solid var(--process-blue);
	outline-offset: 3px;
}
.lab-ink .v-btn:focus-visible, .val-bg-ink .v-btn:focus-visible { outline-color: var(--v-accent-dim); }

.lab-btnrow { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.v-topbar {
	background: var(--ink-navy);
	color: rgba(255, 255, 255, .72);
	font-size: .8rem;
	border-bottom: 1px solid var(--border-light);
}
.v-topbar a { color: inherit; }
.v-topbar a:hover { color: var(--v-accent-dim); }

.lab-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--paper-white);
	border-bottom: 1px solid var(--border-dark);
	transition: box-shadow var(--dur-base) var(--ease);
}
.lab-header::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg,
		var(--process-cyan) 0 20%, var(--process-magenta) 20% 40%,
		var(--process-yellow) 40% 60%, var(--ink-navy) 60% 80%, var(--process-blue) 80% 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-slow) var(--ease);
}
.lab-header.is-stuck::after { transform: scaleX(1); }
.lab-header.is-stuck { box-shadow: 0 10px 34px -22px rgba(7, 26, 47, .5); }

.lab-header__bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 78px;
	transition: min-height var(--dur-base) var(--ease);
}
.lab-header.is-stuck .lab-header__bar { min-height: 60px; }

.lab-header__brand { flex: none; }
.lab-header__brand img { max-height: 46px; width: auto; transition: max-height var(--dur-base) var(--ease); }
.lab-header.is-stuck .lab-header__brand img { max-height: 36px; }

.lab-header__actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex: none; }

.lab-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-dark);
	background: transparent;
	color: var(--ink-navy);
	cursor: pointer;
	transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.lab-iconbtn:hover { background: var(--paper); border-color: var(--ink-navy); }

/* ---- desktop nav ---- */

.lab-nav { margin-inline: auto; }
.lab-nav__list { display: flex; align-items: center; gap: clamp(.2rem, 1.1vw, 1.1rem); list-style: none; margin: 0; padding: 0; }

.lab-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 44px;
	padding: .8rem .55rem;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink-navy);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}
/* Registration underline: draws out from the left. */
.lab-nav__link::after {
	content: '';
	position: absolute;
	left: .55rem;
	right: .55rem;
	bottom: .35rem;
	height: 2px;
	background: var(--process-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease);
}
.lab-nav__link:hover::after,
.lab-nav__link[aria-expanded='true']::after,
.lab-nav__item.is-active .lab-nav__link::after { transform: scaleX(1); }

.lab-nav__caret {
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--dur-base) var(--ease);
}
.lab-nav__link[aria-expanded='true'] .lab-nav__caret { transform: rotate(-135deg) translateY(-2px); }

/* ==========================================================================
   5. MOBILE — burger, printed sheet, conversion bar
   ========================================================================== */

.lab-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-dark);
	background: transparent;
	cursor: pointer;
}
.lab-burger__box { display: grid; gap: 5px; }
.lab-burger__box span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--ink-navy);
	transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast);
}
.lab-burger[aria-expanded='true'] .lab-burger__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lab-burger[aria-expanded='true'] .lab-burger__box span:nth-child(2) { opacity: 0; }
.lab-burger[aria-expanded='true'] .lab-burger__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The printed sheet. A paper panel that folds down over the page. */
.lab-sheet {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--paper-white);
	padding: 0 var(--v-gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	transform-origin: top center;
	animation: lab-sheet-in var(--dur-base) var(--ease-out);
}
@keyframes lab-sheet-in {
	from { opacity: 0; transform: translateY(-14px) scaleY(.985); }
}
.lab-sheet[hidden] { display: none; }

.lab-sheet__strip {
	height: 5px;
	margin-inline: calc(var(--v-gutter) * -1);
	background: linear-gradient(90deg,
		var(--process-cyan) 0 20%, var(--process-magenta) 20% 40%,
		var(--process-yellow) 40% 60%, var(--ink-navy) 60% 80%, var(--process-blue) 80% 100%);
	flex: none;
}

/* Sheet header: brand on the left, close on the right, both inside the safe
   area. 44px minimum so it is a real touch target. */
.lab-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	/* Clear of the status bar / notch: the sheet itself has no top padding. */
	padding: calc(.7rem + env(safe-area-inset-top, 0px)) 0 .6rem;
	border-bottom: 1px solid var(--border-dark);
}
.lab-sheet__head img, .lab-sheet__head svg { max-height: 30px; width: auto; }
.lab-sheet__close,
body button.lab-sheet__close {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--border-dark);
	border-radius: 50%;
	background: var(--paper-white);
	color: var(--ink-navy);
	cursor: pointer;
	transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
body button.lab-sheet__close:hover { border-color: var(--process-blue); background: var(--paper-grey); }
.lab-sheet__close:focus-visible { outline: 3px solid var(--process-blue); outline-offset: 2px; }
.lab-sheet__close span { position: relative; display: block; width: 17px; height: 17px; }
.lab-sheet__close span::before,
.lab-sheet__close span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.lab-sheet__close span::before { transform: rotate(45deg); }
.lab-sheet__close span::after { transform: rotate(-45deg); }

.lab-sheet__nav { padding-top: var(--space-3); }
.lab-sheet__list { list-style: none; margin: 0; padding: 0; }
.lab-sheet__list > li { border-bottom: 1px dashed var(--border-dark); }

.lab-sheet__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 56px;
	padding: .5rem 0;
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 650;
	color: var(--ink-navy);
	background: none;
	border: 0;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.lab-sheet__plus {
	position: relative;
	width: 16px;
	height: 16px;
	flex: none;
}
.lab-sheet__plus::before,
.lab-sheet__plus::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--process-blue);
	transition: transform var(--dur-base) var(--ease);
}
.lab-sheet__plus::after { transform: rotate(90deg); }
.lab-sheet__link[aria-expanded='true'] .lab-sheet__plus::after { transform: rotate(0deg); }

.lab-sheet__sub { list-style: none; margin: 0 0 .6rem; padding: 0; }
.lab-sheet__sub[hidden] { display: none; }
.lab-sheet__sub a {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 48px;
	padding-left: .2rem;
	font-size: 1.02rem;
	font-weight: 550;
	color: var(--v-muted);
	text-decoration: none;
}
.lab-sheet__sub a::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--cat-accent, var(--process-blue));
	flex: none;
}
.lab-sheet__all { font-weight: 700; color: var(--blue-text) !important; }
.lab-sheet__all::before { background: var(--ink-navy) !important; }

/* Previously margin-top:auto, which pushed the CTAs to the bottom of the
   fixed-height flex column and left a large empty middle on tall phones.
   The content now flows naturally and scrolls when it needs to. */
.lab-sheet__actions { display: grid; gap: .6rem; margin-top: var(--space-4); padding-top: 0; }
.lab-sheet__contact {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.2rem;
	padding-top: var(--space-3);
	font-size: .9rem;
}
.lab-sheet__contact a { color: var(--v-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

body.lab-locked { overflow: hidden; }

/* Mobile conversion bar. */
.lab-mobilebar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	gap: .5rem;
	padding: .6rem var(--v-gutter) calc(.6rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 253, 248, .96);
	border-top: 1px solid var(--border-dark);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.lab-mobilebar .v-btn { flex: 1; }

/* ==========================================================================
   6. CARD SYSTEM
   One architecture. The fold is the signature: a dieline crease that appears
   across the corner of the image, with the photograph easing up behind it.
   ========================================================================== */

.lab-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--paper-white);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.lab-card:hover { border-color: var(--cat-accent, var(--process-blue)); box-shadow: 0 28px 50px -32px rgba(7, 26, 47, .45); }
.lab-card:focus-within { outline: 3px solid var(--process-blue); outline-offset: 3px; }

.lab-card__media {
	position: relative;
	overflow: hidden;
	background: var(--paper-grey);
	aspect-ratio: var(--ratio-product);
}
.lab-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease);
}
.lab-card:hover .lab-card__media img { transform: scale(1.025); }

/* The fold: a crease across the top-right corner that opens on hover. */
.lab-card__fold {
	position: absolute;
	top: 0;
	right: 0;
	width: 54px;
	height: 54px;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(225deg, var(--paper-white) 0 50%, transparent 50%);
	opacity: 0;
	transform: translate(6px, -6px);
	transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.lab-card__fold::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 76px;
	height: 1px;
	transform-origin: top right;
	transform: rotate(45deg);
	background: repeating-linear-gradient(90deg, var(--cat-accent, var(--process-blue)) 0 4px, transparent 4px 8px);
}
.lab-card:hover .lab-card__fold { opacity: 1; transform: none; }

/* The family accent registers along the top edge. */
.lab-card__media::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 4px;
	z-index: 2;
	background: var(--cat-accent, var(--process-blue));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease);
}
.lab-card:hover .lab-card__media::after { transform: scaleX(1); }

.lab-card__index {
	position: absolute;
	left: .85rem;
	bottom: .7rem;
	z-index: 2;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: #fff;
	text-shadow: 0 1px 6px rgba(7, 26, 47, .6);
}

.lab-card__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: var(--space-3);
	flex: 1;
}
.lab-card__family {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cat-text, var(--blue-text));
}
.lab-card__title { font-size: var(--v-fs-h4); font-weight: 700; line-height: 1.2; }
.lab-card__title a { color: var(--ink-navy); text-decoration: none; }
.lab-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.lab-card__desc { font-size: .93rem; color: var(--v-muted); line-height: 1.5; }
.lab-card__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.lab-card__cta {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding-top: .5rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--cat-text, var(--blue-text));
}
.lab-card__foot .lab-card__cta { margin: 0; padding: 0; }
.lab-card:hover .lab-arrow { transform: translateX(5px); }
.lab-card__count { font-size: .8rem; color: var(--v-muted); }

.lab-card--category .lab-card__media { aspect-ratio: var(--ratio-category); }

/* ==========================================================================
   7. RAILS
   Horizontal scroll-snap on phones, grid on larger screens. Native scrolling:
   no carousel library, and the whole list is in the DOM either way.
   ========================================================================== */

.lab-rail { position: relative; }
.lab-rail__track {
	display: grid;
	grid-auto-flow: column;
	/* Sized against the track, not the viewport. At 84vw the card was wider
	   than the track's content box, so the second card began past the right
	   edge and nothing peeked — eight featured products looked like one, with
	   no cue that the rail scrolls. Reserving a strip keeps the next card
	   visible at every width. */
	grid-auto-columns: min(var(--rail-card), calc(100% - 2.25rem));
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--v-gutter);
	padding-bottom: .6rem;
	margin-inline: calc(var(--v-gutter) * -1);
	padding-inline: var(--v-gutter);
	scrollbar-width: none;
}
.lab-rail__track::-webkit-scrollbar { display: none; }

/* Phones: the featured rail becomes the same two-column grid as every other
   product collection. Swiping one card at a time hid seven of the eight, which
   is what the owner asked to change. Desktop keeps its row. */
@media (max-width: 767.98px) {
	.lab-rail__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: auto;
		gap: 12px;
		overflow-x: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 0;
	}
	.lab-rail__item { scroll-snap-align: none; }
}
.lab-rail__item { scroll-snap-align: start; }
.lab-rail__more { margin-top: var(--space-2); }

/* ==========================================================================
   8. BENTO — packaging families (legacy card layout)
   Retained for [valentino_packaging_categories layout="cards"]. The default is
   now the circular component in section 36.
   ========================================================================== */

.lab-bento { display: grid; gap: var(--space-3); }

/* ==========================================================================
   9. PROCESS
   Six stages as a plain card grid — unnumbered, no connector rule.
   ========================================================================== */

.lab-process {
	position: relative;
	display: grid;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lab-process__step {
	position: relative;
	padding: var(--space-3);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-md);
	background: var(--paper-white);
	transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.lab-process__step:hover { border-color: var(--process-blue); transform: translateY(-3px); }
.lab-process__title { font-size: 1.05rem; margin-bottom: .25rem; }
.lab-process__text { font-size: .9rem; color: var(--v-muted); line-height: 1.5; margin: 0; }

.lab-ink .lab-process__step, .val-bg-ink .lab-process__step {
	background: rgba(255, 255, 255, .05);
	border-color: var(--border-light);
}
.lab-ink .lab-process__title, .val-bg-ink .lab-process__title { color: #fff; }
.lab-ink .lab-process__text, .val-bg-ink .lab-process__text { color: rgba(255, 255, 255, .72); }

/* No connector rule between the stages: the owner asked for a plain card grid,
   so there is no ::before dieline, no scroll-drawn progress line and nothing
   left behind to reinstate one. */

/* ==========================================================================
   9b. MANUFACTURING — the factory photograph pair
   One centred photograph under four cards read as a small floating object, so
   the media is now two equal frames spanning the same width as the card row.
   Each frame is its own Elementor widget ("Factory photograph 1" and "2"), so
   the owner replaces either one on its own; a slot with no image assigned
   simply does not render rather than showing a placeholder.
   ========================================================================== */

/* Elementor styles every .e-con as flex and its stylesheet loads after this
   file, so a grid here was overridden and both frames collapsed to zero width.
   The pair works with flex instead of against it; the body prefix outranks the
   kit without !important, the same shield the other components use. */
body .e-con.val-media-pair,
.val-media-pair {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--space-3);
	width: 100%;
	align-items: stretch;
}
body .e-con.val-media-pair > *,
.val-media-pair > * { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
.val-media-pair .v-media,
.val-media-pair .val-photo,
.val-media-pair figure { height: 100%; margin: 0; }
.elementor .val-media-pair img,
body .val-media-pair img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
	.val-media-pair { min-height: 300px; }
}
/* Phones: the two frames stack, each kept to a readable band. */
@media (max-width: 767.98px) {
	body .e-con.val-media-pair,
	.val-media-pair { flex-direction: column; gap: var(--space-3); }
	/* Stacked the container is a column, so the desktop `flex: 1 1 0` was
	   sizing the frames' HEIGHT to zero rather than sharing a row width. Each
	   frame sizes from its own ratio instead. */
	body .e-con.val-media-pair > *,
	.val-media-pair > * { flex: 0 0 auto; width: 100%; }
	.val-media-pair .v-photo,
	.val-media-pair figure { height: auto; aspect-ratio: 4 / 3; max-height: 240px; }
	.elementor .val-media-pair img,
	body .val-media-pair img { height: 100%; max-height: 240px; }
}
/* An unassigned slot renders nothing at all — never a visible placeholder. */
.val-media-pair > :empty { display: none; }

/* ==========================================================================
   10. SERVICE ROWS
   ========================================================================== */

.lab-svcrows { display: grid; gap: var(--space-5); }
.lab-svcrow { display: grid; gap: var(--space-3); align-items: center; }
.lab-svcrow__media {
	position: relative;
	aspect-ratio: var(--ratio-service);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper-grey);
	border: 1px solid var(--border-dark);
}
.lab-svcrow__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-slow) var(--ease);
}
.lab-svcrow:hover .lab-svcrow__media img { transform: scale(1.02); }
.lab-svcrow:hover .lab-card__fold { opacity: 1; transform: none; }
.lab-svcrow__n {
	display: block;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--blue-text);
	margin-bottom: .35rem;
}
.lab-svcrow__title { margin-bottom: .5rem; }
.lab-svcrow__title a { color: var(--ink-navy); text-decoration: none; }
.lab-svcrow__title a:hover { color: var(--blue-text); }
.lab-svcrow__summary { color: var(--v-muted); margin-bottom: .9rem; max-width: 52ch; }

.lab-ink .lab-svcrow__title a, .val-bg-ink .lab-svcrow__title a { color: #fff; }
.lab-ink .lab-svcrow__summary, .val-bg-ink .lab-svcrow__summary { color: rgba(255, 255, 255, .76); }
.lab-ink .lab-svcrow__n, .val-bg-ink .lab-svcrow__n { color: var(--v-accent-dim); }

/* ==========================================================================
   11. CHECKLIST — die-cut ticks
   ========================================================================== */

.v-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.v-checklist li { position: relative; padding-left: 1.6rem; line-height: 1.5; font-size: .95rem; }
.v-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .42em;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--process-blue);
	border-bottom: 2px solid var(--process-blue);
	transform: rotate(-45deg);
}
.lab-ink .v-checklist li::before, .val-bg-ink .v-checklist li::before { border-color: var(--v-accent-dim); }

/* ==========================================================================
   13. HERO
   ========================================================================== */

.lab-hero {
	position: relative;
	overflow: hidden;
	background: var(--ink-navy);
	color: rgba(255, 255, 255, .82);
}
/* Dieline grid over the board. */
.lab-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .55;
	background-image:
		linear-gradient(90deg, var(--border-light) 1px, transparent 1px),
		linear-gradient(var(--border-light) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 18% 22%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 75% 80% at 18% 22%, #000, transparent 72%);
}
.lab-hero > * { position: relative; z-index: 1; }
.lab-hero h1 { color: #fff; letter-spacing: -.032em; }

/* Page heroes on interior templates. */
.v-page-hero { position: relative; overflow: hidden; background: var(--ink-navy); color: rgba(255, 255, 255, .8); }
.v-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .5;
	background-image:
		linear-gradient(90deg, var(--border-light) 1px, transparent 1px),
		linear-gradient(var(--border-light) 1px, transparent 1px);
	background-size: 88px 88px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 28%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 70% 80% at 80% 28%, #000, transparent 72%);
}
.v-page-hero::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 5px;
	width: min(260px, 36%);
	z-index: 3;
	background: var(--cat-accent, var(--process-blue));
}
.v-page-hero__inner { position: relative; z-index: 2; padding-block: var(--space-6); }
.v-page-hero h1 { color: #fff; }
.v-page-hero__media { position: absolute; inset: 0; }
.v-page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.v-page-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(7, 26, 47, .94), rgba(7, 26, 47, .66));
}

/* ==========================================================================
   14. PRODUCT
   ========================================================================== */

.lab-product { display: grid; gap: var(--space-4); }
.lab-gallery__stage {
	position: relative;
	aspect-ratio: var(--ratio-product);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-dark);
	background: var(--paper-white);
}
.lab-gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-gallery__counter {
	position: absolute;
	right: .8rem;
	bottom: .8rem;
	z-index: 2;
	padding: .3rem .6rem;
	border-radius: var(--radius-sm);
	background: rgba(7, 26, 47, .78);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
}
.lab-gallery__strip { display: none; }
.lab-gallery__thumbs { display: flex; gap: .55rem; margin: .7rem 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.lab-gallery__thumb {
	width: 82px;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--paper-white);
	cursor: pointer;
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lab-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-gallery__thumb[aria-current='true'], .lab-gallery__thumb:hover {
	border-color: var(--process-blue);
	box-shadow: 0 0 0 2px rgba(20, 99, 255, .25);
}

.lab-pill {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: .3rem .8rem;
	border-radius: var(--radius-pill);
	background: var(--cat-accent, var(--process-blue));
	color: #fff;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}
.lab-product__title { margin: .7rem 0 .5rem; }
.lab-product__tagline { font-size: var(--v-fs-lead); color: var(--v-muted); margin-bottom: 1rem; }
.lab-specline { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0 0 1.2rem; padding: 0; }
.lab-specline li {
	padding: .35rem .75rem;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-pill);
	font-size: .84rem;
	color: var(--v-muted);
	background: var(--paper-white);
}
.lab-product__feats { margin-top: 1.3rem; }
.lab-product__note { font-size: .88rem; color: var(--v-muted); margin-top: 1rem; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.lab-footer { background: var(--ink-navy); color: rgba(255, 255, 255, .74); padding-block: var(--space-5) var(--space-4); }

/* Pre-footer. The CTA card used to sit inside the footer and share its navy,
   so the two read as one continuous dark block. The card now sits on paper as
   the last thing inside <main>, and the footer's solid navy starts beneath it
   — three distinct bands instead of one. */
.lab-prefooter {
	background: var(--paper);
	padding-block: var(--space-5) var(--space-6);
}
.lab-prefooter__body { position: relative; z-index: 1; max-width: 60ch; }

.lab-prefooter__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-feature);
	/* Ink Navy into Process Blue. The flat Process Blue panel carried a blurred
	   magenta glow that mixed to lilac over the blue and read as a colour from
	   another system; the ramp keeps the panel inside the palette. */
	background: linear-gradient(135deg, var(--ink-navy) 0%, var(--process-blue) 82%);
	color: #fff;
	padding: var(--space-5) var(--space-4);
}
.lab-prefooter__card::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .3;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 62% 90% at 88% 16%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 62% 90% at 88% 16%, #000, transparent 72%);
}
.lab-prefooter__card > * { position: relative; z-index: 1; }
.lab-prefooter__card h2 { color: #fff; max-width: 18ch; margin-bottom: .6rem; }
.lab-prefooter__card p { color: #fff; max-width: 56ch; margin-bottom: var(--space-3); }
@media (min-width: 900px) {
	/* Copy on the left, the registration mark on the right, so the card is not
	   mostly empty space at desktop. */
	.lab-prefooter__card {
		display: grid;
		grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
		align-items: center;
		gap: var(--space-4);
	}
	.lab-prefooter__card h2 { font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.6rem); }
}

.lab-prefooter__mark {
	position: absolute;
	right: -60px;
	bottom: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	z-index: 0;
	/* A single restrained cyan registration accent. Magenta and yellow blurred
	   into the blue behind them and produced the lilac cast. */
	background: radial-gradient(circle at 46% 44%, rgba(0, 184, 217, .38), transparent 62%);
	filter: blur(16px);
}

.lab-footer__deck { display: grid; gap: var(--space-4); }
.lab-footer__brand img { max-height: 50px; width: auto; filter: brightness(0) invert(1); }
.lab-footer__blurb { color: rgba(255, 255, 255, .66); font-size: .93rem; line-height: 1.6; max-width: 42ch; margin-top: var(--space-2); }
.lab-footer__title {
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}
.lab-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lab-footer__list a, .lab-footer a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
	font-size: .93rem;
}
.lab-footer__list a:hover, .lab-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.lab-footer__list > li[class*='v-acc-'] > a::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--cat-accent, var(--process-blue));
	flex: none;
}
.lab-footer__address { font-style: normal; font-size: .93rem; line-height: 1.6; color: rgba(255, 255, 255, .7); margin-bottom: .5rem; }

.lab-footer .lab-controlstrip { margin-block: var(--space-4) var(--space-3); }

.lab-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem var(--space-3);
	align-items: center;
	font-size: .84rem;
	color: rgba(255, 255, 255, .58);
}
.lab-footer__legal { display: flex; gap: var(--space-3); }
.lab-footer__made { margin-left: auto; }

/* ==========================================================================
   16. FORMS
   ========================================================================== */

.v-field { display: block; margin-bottom: var(--space-3); }
.v-field label { display: block; font-weight: 650; font-size: .95rem; color: var(--ink-navy); margin-bottom: .4rem; }
.v-field__hint { display: block; font-size: .84rem; color: var(--v-muted); margin-top: .35rem; }

.v-input, .v-select, .v-file, textarea.v-input,
input[type='text'], input[type='email'], input[type='tel'], input[type='number'],
input[type='search'], input[type='url'], input[type='date'], select, textarea {
	width: 100%;
	min-height: 52px;
	padding: .85rem 1rem;
	font-family: inherit;
	/* 16px minimum: anything smaller makes iOS zoom the page on focus. */
	font-size: 1rem;
	color: var(--v-body);
	background: var(--paper-white);
	border: 1px solid var(--v-line-ui);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea, textarea.v-input { min-height: 140px; resize: vertical; }

/* The markup has carried .v-field-grid since the forms were built but the
   class was never defined, so every field stacked full width — the quote
   form's Length / Width / Height / Unit row became four separate rows and the
   unit ended up far below the measurements it applies to. Phones pair the
   fields so the unit stays beside them. */
.v-field-grid { display: grid; grid-template-columns: 1fr; column-gap: 1rem; }
.v-field-grid > .v-field { margin-bottom: var(--space-3); }

@media (min-width: 460px) {
	.v-field-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 620px) {
	.v-field-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.v-field-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* The select kept the platform's own arrow, which read as unstyled beside the
   theme's inputs. Native behaviour and the native picker are untouched. */
.v-select, select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-navy) 50%), linear-gradient(135deg, var(--ink-navy) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-inline-end: 2.75rem;
}
.v-select::-ms-expand, select::-ms-expand { display: none; }
input[type='date'] { padding-inline-end: .75rem; }
.v-input:focus, .v-select:focus, .v-file:focus, input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--process-blue);
	box-shadow: 0 0 0 3px rgba(20, 99, 255, .22);
}

.v-check {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 48px;
	padding: .6rem 1rem;
	border: 1px solid var(--v-line-ui);
	border-radius: var(--radius-sm);
	background: var(--paper-white);
	font-size: .95rem;
	cursor: pointer;
	transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.v-check input { width: 20px; height: 20px; flex: none; accent-color: var(--process-blue); }
.v-check:hover { border-color: var(--process-blue); }
.v-check:has(input:checked) {
	border-color: var(--process-blue);
	background: rgba(20, 99, 255, .07);
	box-shadow: inset 0 0 0 1px var(--process-blue);
}
.v-check:focus-within { outline: 3px solid var(--process-blue); outline-offset: 2px; }

.v-step {
	position: relative;
	background: var(--paper-white);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	margin-bottom: var(--space-3);
}
.v-step::before {
	content: '';
	position: absolute;
	top: -1px;
	left: var(--space-4);
	width: 56px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--process-blue);
}
.v-step__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	min-height: 48px;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.v-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--process-blue);
	color: var(--blue-text);
	font-size: .82rem;
	font-weight: 800;
}
.v-error-text { color: var(--v-error); font-size: .88rem; font-weight: 600; margin-top: .35rem; }

/* ==========================================================================
   17. EMPTY STATES
   ========================================================================== */

.v-empty-state {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
	max-width: 62ch;
	padding: var(--space-5);
	border: 1px dashed var(--v-line-ui);
	border-radius: var(--radius-lg);
	background:
		repeating-linear-gradient(45deg, rgba(7, 26, 47, .02) 0 12px, transparent 12px 24px),
		var(--paper-white);
}
.v-empty-state p { color: var(--v-muted); margin: 0; }

/* The seven leadership slots stay empty on purpose. They are dressed as
   reserved paper panels so the section reads as deliberate, never broken, and
   nothing here implies a photograph exists. */
.v-ph--person {
	background:
		repeating-linear-gradient(45deg, rgba(7, 26, 47, .035) 0 10px, transparent 10px 20px),
		var(--paper-grey) !important;
	border: 1px dashed var(--v-line-ui) !important;
}

/* ==========================================================================
   18. REVEAL — printed sheet sliding out from under paper
   ========================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal='sheet'] {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--dur-slow) var(--ease-out);
}
[data-reveal='sheet'].is-in { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   19. BREADCRUMBS + PAGINATION + MISC
   ========================================================================== */

.v-breadcrumbs {
	font-size: .84rem;
	color: var(--v-muted);
	padding-block: .6rem;
	background: var(--paper);
	border-bottom: 1px dashed var(--border-dark);
}
.v-breadcrumbs a { color: var(--v-muted); text-decoration: none; }
.v-breadcrumbs a:hover { color: var(--blue-text); text-decoration: underline; }

.v-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .6rem;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-sm);
	background: var(--paper-white);
	color: var(--ink-navy);
	font-weight: 600;
	text-decoration: none;
}
.v-pagination .page-numbers.current, .v-pagination .page-numbers:hover {
	border-color: var(--process-blue);
	color: var(--blue-text);
}

/* Catalogue mode: nothing a plugin update introduces can show a price. */
.woocommerce .price,
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce .quantity,
.woocommerce-Price-amount { display: none !important; }

/* ==========================================================================
   20. CATEGORY ACCENTS
   Six families, six process inks — the same colour wherever a family appears.
   The photographs are never recoloured; the accent is only ever a rule, a tab
   or a border.
   ========================================================================== */

.v-acc-rigid-boxes      { --cat-accent: var(--process-blue);    --cat-text: var(--blue-text); }
.v-acc-folding-cartons  { --cat-accent: var(--process-cyan);    --cat-text: var(--cyan-text); }
.v-acc-corrugated-boxes { --cat-accent: var(--process-orange);  --cat-text: var(--orange-text); }
.v-acc-food-packaging   { --cat-accent: var(--process-yellow);  --cat-text: var(--yellow-text); }
.v-acc-paper-bags       { --cat-accent: var(--ink-navy-2);      --cat-text: var(--ink-navy); }

/* The paper-bags family is navy, which disappears against a navy ground: in
   the footer its marker sat at #0B2440 on #071A2F — about 1.1:1, invisible.
   On dark grounds only, the family shows as paper instead. */
.lab-footer .v-acc-paper-bags,
.lab-ink .v-acc-paper-bags,
.val-bg-ink .v-acc-paper-bags { --cat-accent: var(--paper-grey); --cat-text: var(--paper-white); }
.v-acc-labels-stickers  { --cat-accent: var(--process-magenta); --cat-text: var(--magenta-text); }

/* ==========================================================================
   21. RESPONSIVE
   Mobile is composed, not inherited. Phones get rails and single columns;
   the bento, the mega panel and the sticky product panel start at 1024.
   ========================================================================== */

/* ---- phones ---- */
/* .98 rather than a whole pixel: a viewport can report a fractional width
   (a scrollbar, or fractional zoom), and `max-width: 767px` paired with
   `min-width: 768px` leaves 767.x matching neither — the phone rules dropped
   out and the desktop bar rendered at 768, pushing the page 128px wide. */
@media (max-width: 767.98px) {
	:root { --space-section: clamp(3rem, 2.2rem + 3vw, 4.5rem); }

	.lab-burger { display: inline-flex; }
	/* The printed sheet carries navigation on phones; the desktop bar and its
	   absolutely positioned panels must not render, or they push the page wide. */
	.lab-nav, .lab-panel { display: none !important; }

	/* The quote CTA stays in the bar; the sheet carries the rest. */
	.lab-header__quote { padding: .55rem .8rem; font-size: .85rem; }

	.lab-svcrows { gap: var(--space-4); }

	/* Product: swipe the images, drop the thumbnail rail. */
	.lab-gallery__stage, .lab-gallery__thumbs { display: none; }
	.lab-gallery__strip {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 88%;
		gap: .6rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		list-style: none;
		margin: 0 calc(var(--v-gutter) * -1);
		padding: 0 var(--v-gutter);
		scrollbar-width: none;
	}
	.lab-gallery__strip::-webkit-scrollbar { display: none; }
	.lab-gallery__strip li { scroll-snap-align: center; }
	.lab-gallery__strip img {
		width: 100%;
		aspect-ratio: var(--ratio-product);
		object-fit: cover;
		border-radius: var(--radius-md);
		border: 1px solid var(--border-dark);
		display: block;
	}

	/* Conversion bar, and room for it at the end of the page. */
	.lab-mobilebar { display: flex; }
	body.single-product, body.single-valentino_service { padding-bottom: 76px; }

	/* The sticky bar already carries Get a Quote and WhatsApp for this exact
	   product, so the inline pair directly above it put four competing calls
	   to action in one screen. Desktop, which has no sticky bar, keeps them. */
	.lab-product__cta { display: none; }

	/* Services on a phone: photograph, title, summary, Read more. Five rows of
	   four ticked capabilities each ran the section to 3,311px — a third of the
	   whole page — and every one of those points is on the service page itself.
	   Desktop keeps the full row. */
	.lab-svcrows { gap: var(--space-4); }
	.lab-svcrow .v-checklist { display: none; }
	.lab-svcrow__media { aspect-ratio: 16 / 9; }
	.lab-svcrow__summary { margin-bottom: .7rem; }

	/* Footer: the three link columns stacked into one long ribbon. Two columns
	   each halves the run without hiding a single link. */
	.lab-footer { padding-block: var(--space-4) var(--space-3); }
	.lab-footer__deck { gap: var(--space-3); }
	.lab-footer__col nav > .lab-footer__list,
	.lab-footer__col > .lab-footer__list:not(.lab-footer__list--contact):not(.lab-footer__list--utility) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .1rem 1rem;
	}

	.lab-footer__made { margin-left: 0; width: 100%; }
	.lab-prefooter__card { padding: var(--space-4) var(--space-3); }
}

/* Phones: product collections are a two-column grid, not a rail.
   The owner asked to see products two-up rather than swiping one card at a
   time, so the shared card grids stack into two columns and the card itself
   is trimmed for half a phone width — the excerpt goes, the media squares up
   and the title is capped. The featured rail and the category circles keep
   their own horizontal behaviour; this is only the standard card grid. */
@media (max-width: 767.98px) {
	.lab-bento, .v-grid--2, .v-grid--3, .v-grid--4 {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
		gap: 12px;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 0;
	}
	.lab-bento > *, .v-grid--2 > *, .v-grid--3 > *, .v-grid--4 > * { scroll-snap-align: none; }

	/* Compact card for half a phone width. */
	.lab-card__media, .lab-card--category .lab-card__media { aspect-ratio: 4 / 3; }
	.lab-card__body { padding: .7rem .75rem .8rem; gap: .3rem; }
	.lab-card__family { font-size: .62rem; letter-spacing: .09em; }
	.lab-card__title { font-size: .95rem; line-height: 1.25; }
	.lab-card__desc { display: none; }
	.lab-card__foot { padding-top: .35rem; }
	.lab-card__cta { font-size: .78rem; }
	.lab-card__cta .lab-arrow { width: 14px; }
	/* The decorative corner fold has no room at this size. */
	.lab-card__fold { display: none; }

	/* Editorial blocks are not product cards. Two-up they ran to 422px of
	   half-width text, so they span the row and keep their copy intact —
	   the two-column request is about product cards. */
	.v-block { grid-column: 1 / -1; }

	/* Search results mix article cards into the product grid. An article card
	   carries an excerpt, so half-width it ran to 574px and stretched the
	   product beside it to match. It takes the whole row instead, and the
	   cards in a row are topped rather than stretched. */
	.v-grid--2 > .v-card, .v-grid--3 > .v-card, .v-grid--4 > .v-card { grid-column: 1 / -1; }
	.lab-bento, .v-grid--2, .v-grid--3, .v-grid--4 { align-items: start; }
}

/* ---- tablet ---- */
@media (min-width: 768px) {
	.lab-bento, .v-grid--2, .v-grid--3, .v-grid--4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
	.lab-process { grid-template-columns: repeat(2, 1fr); }
	.lab-rail__track { grid-auto-columns: 46%; }
	.lab-svcrow { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
	.lab-svcrow:nth-child(even) .lab-svcrow__media { order: 2; }
	.lab-footer__deck { grid-template-columns: 1fr 1fr; }
	.lab-product { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	/* The bar is tight here: the sheet still carries navigation. */
	.lab-burger { display: inline-flex; }
	.lab-nav, .lab-panel { display: none !important; }
}

/* ---- desktop ---- */
@media (min-width: 1024px) {

	/* Three across, not six. At 1440 six tracks were 181px wide and the step
	   copy (87-128 characters) broke to 6-9 lines of roughly 15 characters —
	   unreadable as a measure. Two rows of three give ~386px and a normal
	   line, and the route through the factory still reads in order. */
	.lab-process { grid-template-columns: repeat(3, 1fr); }
	.lab-rail__track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }

	.v-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.v-grid--4 { grid-template-columns: repeat(4, 1fr); }

	/* Bento: two leads, four supporting. */
	.lab-bento { grid-template-columns: repeat(6, 1fr); }
	.lab-bento > * { grid-column: span 2; }
	.lab-bento > *:nth-child(1), .lab-bento > *:nth-child(2) { grid-column: span 3; }
	.lab-bento > *:nth-child(1) .lab-card__media,
	.lab-bento > *:nth-child(2) .lab-card__media { aspect-ratio: var(--ratio-hero); }

	/* Product: gallery leads, panel follows and sticks. */
	.lab-product { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
	.lab-product__panel-inner { position: sticky; top: calc(78px + var(--space-3)); }

	.lab-footer__deck { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-5); }
	.lab-prefooter__card { padding: var(--space-6) var(--space-5); }
}

@media (min-width: 1440px) {
	.lab-rail__track { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   22. MOTION ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.lab-card__fold { opacity: 1; transform: none; }
	.lab-hero { --mx: 0; --my: 0; }
}

/* ==========================================================================
   23. ELEMENTOR KIT SHIELD
   Elementor's kit paints global button styles at `.elementor-kit-N button`,
   which repaints every <button> the theme renders — the nav trigger, the icon
   button, the burger, the gallery thumbs and the sheet toggles all came out as
   blue pills. Prefixing with `body` out-ranks the kit selector without
   resorting to !important. Same pattern main.css already uses for the older
   controls; these are the rebuilt ones.
   ========================================================================== */

body button.lab-nav__link,
body button.lab-nav__link:hover {
	background: none;
	color: var(--ink-navy);
	padding: .8rem .55rem;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: .95rem;
	font-weight: 600;
	border: 0;
}
body button.lab-iconbtn,
body button.lab-iconbtn:hover {
	background: none;
	color: var(--ink-navy);
	padding: 0;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-sm);
	text-transform: none;
	letter-spacing: normal;
}
body button.lab-iconbtn:hover { background: var(--paper); border-color: var(--ink-navy); }

body button.lab-burger,
body button.lab-burger:hover {
	background: none;
	padding: 0;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-sm);
}
body button.lab-gallery__thumb { background: var(--paper-white); padding: 0; border-radius: var(--radius-sm); }
body button.lab-sheet__link,
body button.lab-sheet__link:hover {
	background: none;
	color: var(--ink-navy);
	padding: .5rem 0;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: 1.2rem;
	font-weight: 650;
	border: 0;
}

/* ==========================================================================
   24. HEADER DISTRIBUTION
   Brand left, navigation centred, actions right. Both the nav and the actions
   had auto margins, which fought each other and pushed the bar left.
   ========================================================================== */

.lab-header__actions { margin-left: 0; }
.lab-nav { margin-inline: auto; }

/* ==========================================================================
   25. HOME HERO — one composition
   The previous hero laid the copy on a paper card that overlapped the
   photograph. The owner read that as two unrelated blocks — a UI card next to
   a picture — so the card is gone. The type now sits directly on the navy
   board, the photograph carries the right-hand side at a cinematic crop, and
   the proof points are a compact inline strip under the actions. Selectors are
   structural, not Elementor ids, so the composition survives copy edits.
   ========================================================================== */

body.home #hero {
	position: relative;
	overflow: hidden;
	background: var(--ink-navy);
	padding-block: 0;
}
/* Dieline grid — the board the composition is printed on. */
body.home #hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .45;
	background-image:
		linear-gradient(90deg, var(--border-light) 1px, transparent 1px),
		linear-gradient(var(--border-light) 1px, transparent 1px);
	background-size: 92px 92px;
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 18% 30%, #000, transparent 76%);
	mask-image: radial-gradient(ellipse 70% 90% at 18% 30%, #000, transparent 76%);
}
/* Registration glow, nudged by --mx/--my from lab.js. Never behind text. */
body.home #hero::after {
	content: '';
	position: absolute;
	left: -90px;
	bottom: -120px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 38% 38%, rgba(0, 184, 217, .30), transparent 56%),
		radial-gradient(circle at 62% 42%, rgba(231, 60, 135, .22), transparent 56%);
	filter: blur(18px);
	transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
	transition: transform var(--dur-slow) var(--ease);
}

body.home #hero .e-con-inner { position: relative; z-index: 1; }

/* Elementor sizes every .e-con from its own --width, so grid children keep an
   intrinsic width unless this is set alongside width. */
body.home #hero .e-con-inner > .e-con {
	--width: 100%;
	width: 100%;
	max-width: none;
	justify-self: stretch;
}

/* Type sits on the board. No panel, no plate, no shadow. */
body.home #hero .e-con-inner > .e-con:first-child {
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}
body.home #hero .e-con-inner > .e-con:first-child::before { content: none; }

body.home #hero h1 { color: var(--paper-white); letter-spacing: -.032em; margin-bottom: .6rem; }
body.home #hero .val-eyebrow { color: var(--v-accent-dim); margin-bottom: .7rem; }
body.home #hero .val-lead,
body.home #hero p { color: rgba(255, 253, 248, .74); }
body.home #hero .val-lead { max-width: 34ch; margin-bottom: var(--space-3); }
body.home #hero h1 {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

/* Proof points: a compact inline strip, cyan registration bullets. */
body.home #hero .v-hero__meta {
	border-top: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem 1.1rem;
	margin: var(--space-3) 0 0;
	padding: 0;
	font-size: .84rem;
	font-weight: 600;
	color: rgba(255, 253, 248, .78);
}
body.home #hero .v-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
}
body.home #hero .v-hero__meta span::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--process-cyan);
	flex: none;
}

/* Secondary action on the board. A 1px 55% border alone is easy to lose
   against a photograph-adjacent navy, so the hero's secondary carries a faint
   fill as well — still clearly secondary to the solid blue primary. */
body.home #hero .val-cta-secondary .elementor-button,
body.home #hero .v-btn--ghost {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .62);
	color: var(--paper-white);
}
body.home #hero .val-cta-secondary .elementor-button:hover,
body.home #hero .v-btn--ghost:hover {
	background: var(--paper-white);
	border-color: var(--paper-white);
	color: var(--ink-navy);
}

/* The photograph carries the composition.
   main.css styles .v-hero__photo as a background-image panel: a 4/3 ratio, its
   own border and a gradient rule pinned to the bottom edge. The frame now holds
   the slider widget instead, and as a flex parent with a 320px min-height it was
   squeezing that widget to two pixels while the stage overflowed it. The legacy
   panel treatment is stood down here — main.css keeps it for the templates that
   still paint a background — and the stage supplies ratio, rounding and frame. */
body.home #hero .e-con-inner > .e-con:last-child { position: relative; z-index: 1; }
body.home #hero .v-hero__photo {
	display: block;
	aspect-ratio: auto;
	min-height: 0;
	height: auto;
	padding-block: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
body.home #hero .v-hero__photo::after { content: none; }
body.home #hero .lab-hero-slider__stage {
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8);
}
body.home #hero .e-con-inner > .e-con:last-child img { border-radius: 27px; }

/* ---- desktop: 43 / 57, type centred against the photograph ---- */
@media (min-width: 1024px) {
	body.home #hero .e-con-inner {
		display: grid;
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
		align-items: center;
		gap: var(--space-5);
		padding-block: var(--space-5);
		min-height: 600px;
	}
	body.home #hero h1 { font-size: clamp(2.4rem, 1.4rem + 1.7vw, 3.2rem); }
	body.home #hero .val-lead { font-size: 1.05rem; max-width: 36ch; }
	body.home #hero .lab-hero-slider__stage { aspect-ratio: 16 / 10; max-height: 460px; }
}

/* ---- mobile: copy, actions, photograph, proof ----
   display:contents on the text column lifts its children into the same flex
   flow as the photograph, so the image can sit between the buttons and the
   proof strip without moving anything in Elementor. */
@media (max-width: 1023.98px) {
	body.home #hero .e-con-inner {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding-block: var(--space-4) var(--space-5);
		padding-inline: var(--v-gutter);
	}
	body.home #hero .e-con-inner > .e-con:first-child { display: contents; }
	body.home #hero .elementor-widget-heading:first-child { order: 1; }
	body.home #hero .v-hero__title, body.home #hero .elementor-widget-heading { order: 2; }
	body.home #hero .val-lead, body.home #hero .elementor-widget-text-editor { order: 3; }
	body.home #hero .e-con-inner .e-con:has(.val-cta) { order: 4; width: 100%; }
	body.home #hero .e-con-inner > .e-con:last-child { order: 5; margin-top: var(--space-3); }
	/* The proof strip is a text editor too, so the generic order:3 above caught
	   it and floated it above the buttons. It carries its own class instead. */
	body.home #hero .elementor-widget.v-hero__proof { order: 6; }
	body.home #hero .v-hero__meta { margin-top: var(--space-3); }

	body.home #hero h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 2.75rem); }
	body.home #hero .val-lead { font-size: 1rem; max-width: none; }
	body.home #hero .lab-hero-slider__stage { aspect-ratio: 16 / 11; }
	body.home #hero .v-btn, body.home #hero .val-cta .elementor-button { width: 100%; }
}
@media (min-width: 560px) and (max-width: 1023.98px) {
	/* Actions sit side by side once there is room for both. */
	body.home #hero .v-btn, body.home #hero .val-cta .elementor-button { width: auto; }
}

/* ==========================================================================
   26. NARROW PHONES
   At 390 the bar carries brand, search, the quote CTA and the burger, and the
   row came out 5px wider than the viewport. The space comes out of the logo
   and the label padding — every control keeps a 44px target, and search is not
   dropped because the sheet carries navigation, not a search field.
   ========================================================================== */

@media (max-width: 480px) {
	/* "PACKAGING MANUFACTURER · AJMAN, UAE" broke with UAE alone on line two.
	   The room comes out of the tracking and the rule-mark gap, not the type
	   size, so the label stays legible. */
	.lab-eyebrow, .val-eyebrow, .v-eyebrow {
		letter-spacing: .06em;
		gap: .4rem;
		/* Balanced so the label splits into even lines instead of dropping a
		   single orphaned word; tightening alone still left "UAE" alone at 390. */
		text-wrap: balance;
	}
	.lab-eyebrow::before, .val-eyebrow::before, .v-eyebrow::before { width: 16px; }

	.lab-header__bar { gap: .4rem; min-height: 68px; }
	.lab-header__brand img { max-height: 32px; }
	.lab-header__actions { gap: .3rem; }
	.lab-header__quote { padding: .5rem .7rem; font-size: .8rem; min-height: 44px; }
	.lab-iconbtn { width: 44px; height: 44px; }
}
@media (max-width: 360px) {
	/* Below 360 the label alone will not fit beside three controls. */
	.lab-header__quote { padding: .5rem .55rem; font-size: .75rem; }
	.lab-header__brand img { max-height: 28px; }
}

/* Mobile hero tuning lives with the hero composition in section 25; the panel
   this block used to tighten no longer exists. */

/* Breadcrumbs. The trail is an <ol> for the crawler and for assistive tech, so
   the list styling has to be reset here — the CSS consolidation removed the
   old rule that used to do it. */
.v-breadcrumbs .v-container { width: min(100% - (var(--v-gutter) * 2), var(--container)); margin-inline: auto; }
.v-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.v-breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }
/* The rule trails its own item rather than leading the next one. It was
   already generated rather than literal text, but as a leading mark it landed
   at the start of the wrapped line on deep product trails, reading as a
   dangling dash before the product name. */
.v-breadcrumbs li:not(:last-child)::after {
	content: '';
	width: 10px;
	height: 1px;
	background: var(--v-line-ui);
	flex: none;
}
.v-breadcrumbs [aria-current='page'] { color: var(--ink-navy); font-weight: 600; }

/* ==========================================================================
   27. CONTRAST CORRECTIONS
   Both found by measuring, not by eye.
   ========================================================================== */

/* Elementor's kit paints .elementor-button backgrounds and its stylesheet
   loads after this file, so the secondary button kept the primary's blue fill
   behind its navy label — 3.56:1, under AA. The body prefix outranks the kit
   without !important, the same shield main.css uses for <button> controls. */
body .val-cta-secondary .elementor-button,
body .val-cta-secondary .elementor-button:visited {
	background: transparent;
	border-color: var(--border-dark);
	color: var(--ink-navy);
}
body .val-cta-secondary .elementor-button:hover {
	background: transparent;
	border-color: var(--ink-navy);
	color: var(--ink-navy);
	box-shadow: 3px 3px 0 0 var(--process-orange);
}

/* On the blue CTA panel the light eyebrow was cyan on blue at 2.93:1. White
   reads at 5.3:1 there; the cyan tint is only for eyebrows on ink navy. */
.lab-prefooter__card .lab-eyebrow, .lab-prefooter__card .lab-eyebrow--light { color: #fff; }

/* The index sits over an arbitrary photograph, so it carries its own plate
   rather than relying on a text shadow to stay legible. */
.lab-card__index {
	padding: .2rem .45rem;
	border-radius: var(--radius-sm);
	background: rgba(7, 26, 47, .72);
	text-shadow: none;
}

/* Elementor's kit sets `.elementor-kit-N a { color: ink navy }` and its
   stylesheet loads after this file, so every link on a dark ground came out
   navy-on-navy — invisible. main.css used to carry this shield for the old
   class names; the consolidation removed it with them. The body prefix
   outranks the kit at the same specificity without !important. */
body .lab-footer a,
body .lab-footer__list a,
body .lab-ink a,
body .val-bg-ink a,
body .lab-prefooter__card a,
body .v-page-hero a,
body .lab-sheet__all { color: #fff; }

body .lab-footer a:hover, body .lab-footer__list a:hover { color: #fff; }
body .lab-ink .lab-textlink, body .val-bg-ink .lab-textlink { color: var(--v-accent-dim); }
/* Buttons keep their own colours on those grounds. */
body .lab-footer a.v-btn--light, body .lab-prefooter__card a.v-btn--light { color: var(--ink-navy); }
body .lab-footer a.v-btn--wa, body .lab-prefooter__card a.v-btn--wa { color: #06251A; }
body .val-bg-ink a.v-btn--primary, body .lab-ink a.v-btn--primary { color: #fff; }

/* The sample sits beside its description on wider screens; stacked full-width
   the swatch alone stood 640px tall. */
@media (min-width: 768px) {
	.lab-finishes__panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
	.lab-finishes__stage { min-height: 300px; }
}

/* ==========================================================================
   28. NAVIGATION — colour states
   Stated once, centrally. WordPress's current-menu classes and Elementor's kit
   both try to colour these controls; the kit paints bare <button> white, which
   is what made Packaging unreadable on the paper header. The body prefix
   outranks the kit at the same specificity without !important.
   ========================================================================== */

body .lab-nav__link,
body button.lab-nav__link,
body .lab-nav__item .lab-nav__link,
body .lab-nav__item.current-menu-item > .lab-nav__link,
body .lab-nav__item.current_page_item > .lab-nav__link {
	color: var(--ink-navy);
	background: none;
	border: 0;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: .95rem;
	font-weight: 600;
	padding: .8rem .55rem;
}
body .lab-nav__link:hover,
body button.lab-nav__link:hover,
body .lab-nav__link[aria-expanded='true'],
body .lab-nav__item.is-active > .lab-nav__link,
body .lab-nav__item.current-menu-item > .lab-nav__link,
body .lab-nav__item.current_page_item > .lab-nav__link {
	color: var(--blue-text);
	background: none;
}
.lab-nav__link:focus-visible { outline: 3px solid var(--process-blue); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   29. NAVIGATION PANELS
   One panel component, two densities. Packaging restores the product
   shortlist the earlier menu carried; Services is a plain list, because five
   items do not need a mega menu.
   ========================================================================== */

.lab-panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 90;
	background: var(--paper-white);
	border-top: 1px solid var(--border-dark);
	border-bottom: 1px solid var(--border-dark);
	box-shadow: 0 28px 56px -34px rgba(7, 26, 47, .5);
	animation: lab-panel-in var(--dur-base) var(--ease-out);
}
.lab-panel[hidden] { display: none; }
@keyframes lab-panel-in { from { opacity: 0; transform: translateY(-6px); } }

.lab-panel__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	padding-block: var(--space-4);
}
.lab-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-4); }

.lab-panel__catlink {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-height: 44px;
	text-decoration: none;
	color: var(--ink-navy);
}
.lab-panel__catlink:hover .lab-arrow { transform: translateX(4px); }
.lab-panel__catlink:hover .lab-circle { border-color: var(--cat-accent, var(--process-blue)); }
.lab-panel__name { font-weight: 700; font-size: .95rem; line-height: 1.2; flex: 1; }
.lab-panel__catlink .lab-arrow { color: var(--cat-text, var(--blue-text)); }

/* Circular category thumbnail with the family accent as its ring. */
.lab-circle {
	position: relative;
	display: block;
	width: 76px;
	aspect-ratio: 1;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--paper-grey);
	border: 2px solid var(--border-dark);
	transition: border-color var(--dur-fast);
}
.lab-circle img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.lab-circle--sm { width: 56px; border-width: 2px; }

.lab-panel__list { list-style: none; margin: .45rem 0 0; padding: 0 0 0 calc(76px + .7rem); display: grid; gap: .1rem; }
.lab-panel__list a {
	display: block;
	min-height: 30px;
	padding: .15rem 0;
	font-size: .86rem;
	color: var(--v-muted);
	text-decoration: none;
	line-height: 1.35;
}
.lab-panel__list a:hover { color: var(--blue-text); }

.lab-panel__aside {
	border-top: 1px dashed var(--border-dark);
	padding-top: var(--space-3);
	display: grid;
	gap: .6rem;
	justify-items: start;
	align-content: start;
}
.lab-panel__aside-title { font-weight: 700; color: var(--ink-navy); margin: 0; }
.lab-panel__aside p { margin: 0; font-size: .9rem; color: var(--v-muted); max-width: 42ch; }

/* ---- services panel ---- */
.lab-panel__services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .3rem var(--space-4);
	padding-block: var(--space-4);
}
.lab-svclink {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 56px;
	padding: .5rem .6rem;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--ink-navy);
	transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.lab-svclink:hover { background: var(--paper); border-color: var(--process-blue); }
.lab-svclink:hover .lab-arrow { transform: translateX(4px); }
.lab-svclink__body { flex: 1; min-width: 0; }
.lab-svclink__name { display: block; font-weight: 650; font-size: .93rem; line-height: 1.25; }
.lab-svclink__desc { display: block; font-size: .8rem; color: var(--v-muted); margin-top: .1rem; }
.lab-svclink .lab-arrow { color: var(--blue-text); }
.lab-svclink--all { grid-column: 1 / -1; justify-content: space-between; font-weight: 700; color: var(--blue-text); border-top: 1px dashed var(--border-dark); border-radius: 0; }
.lab-svclink--all .lab-svclink__name { color: var(--blue-text); }

@media (min-width: 1024px) {
	.lab-panel__inner { grid-template-columns: minmax(0, 2.4fr) minmax(230px, .8fr); }
	.lab-panel__aside { border-top: 0; border-left: 1px dashed var(--border-dark); padding: 0 0 0 var(--space-4); }
}

/* The panel carries six families and eighteen products, so it cannot reach the
   260px a plain link list would. These bring it down to roughly 420px without
   dropping the shortlist, which is the part of the earlier menu that made it
   useful. */
.lab-circle { width: 64px; }
.lab-panel__list { padding-left: calc(64px + .7rem); }
.lab-panel__grid { gap: var(--space-2) var(--space-4); }
.lab-panel__inner { padding-block: var(--space-3); }
.lab-panel__name { font-size: .9rem; }
.lab-panel__list a { min-height: 28px; font-size: .84rem; }
.lab-panel__catlink { gap: .65rem; min-height: 40px; }

/* ==========================================================================
   30. HERO SLIDER
   Only the photography rotates; the copy layer beside it never moves. Slides
   crossfade rather than slide, so nothing shifts and there is no CLS — the
   stage reserves its own aspect ratio before any image arrives.
   ========================================================================== */

.lab-hero-slider { position: relative; width: 100%; }
.lab-hero-slider__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-feature);
	overflow: hidden;
	background: var(--ink-navy-2);
	box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .75);
}
.lab-hero-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .9s var(--ease);
}
.lab-hero-slide.is-active { opacity: 1; }
.lab-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.lab-hero-slider__dots {
	position: absolute;
	left: 50%;
	bottom: .85rem;
	transform: translateX(-50%);
	display: flex;
	gap: .4rem;
	padding: .4rem .55rem;
	border-radius: 999px;
	background: rgba(7, 26, 47, .5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	z-index: 2;
}
/* The visible indicator is a 4px bar, but the control itself is a full 44px
   target — a 4px-tall button is not tappable. The bar is drawn inside it.
   Square rather than 34px wide: the height already met the 44px minimum and
   the width did not, and widening the hit area leaves the drawn bar alone. */
.lab-hero-dot {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lab-hero-dot::after {
	content: '';
	display: block;
	width: 26px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	transition: background-color var(--dur-base) var(--ease), width var(--dur-base) var(--ease);
}
.lab-hero-dot.is-active::after { background: #fff; width: 34px; }
.lab-hero-dot:focus-visible { outline: 3px solid #fff; outline-offset: -4px; border-radius: 6px; }

body button.lab-hero-dot,
body button.lab-hero-dot:hover { background: none; padding: 0; border: 0; border-radius: 0; }

.lab-hero-slider__dots { padding: .2rem .4rem; }

@media (prefers-reduced-motion: reduce) {
	.lab-hero-slide { transition: none; }
	.lab-hero-slide:not(.is-active) { display: none; }
}

/* The stage proportions now live with the hero composition in section 25: the
   row is no longer sized by a copy panel, so there is nothing to stretch to. */

/* Elementor ships `.elementor img{height:auto}` and its stylesheet loads after
   this file, so at equal specificity the slide image kept its intrinsic height
   and sat in the top of the stretched stage. Naming .elementor here outranks
   it — the same shield the other media components use. */
.elementor .lab-hero-slide img,
body .lab-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Per-slide framing. A wide hero crops a 16:9 source vertically, and in all
   three photographs the packaging sits below the centre line — a default
   centre crop showed ceilings and windows. Each slide is pulled down to its
   own subject. */
.lab-hero-slide:nth-child(1) img { object-position: center 68%; }
.lab-hero-slide:nth-child(2) img { object-position: center 58%; }
.lab-hero-slide:nth-child(3) img { object-position: center 62%; }

/* On phones the frame is close to the source ratio, so less correction is
   needed and the subject should sit slightly higher than on desktop. */
@media (max-width: 1023.98px) {
	.lab-hero-slide:nth-child(1) img { object-position: center 60%; }
	.lab-hero-slide:nth-child(2) img { object-position: center 50%; }
	.lab-hero-slide:nth-child(3) img { object-position: center 55%; }
}

/* ==========================================================================
   32. FINISHES — photographic
   The five surfaces are now macro photographs rather than CSS gradients, and
   the controls are pill chips. Selection is still radio-driven, so it works by
   tap and by keyboard with no script.
   ========================================================================== */

/* The component owns a single track that is explicitly capped at the container
   width. Without minmax(0, …) the auto track was sized to the chip strip's
   max-content — the phone rule below sets the chips to nowrap with a negative
   inline margin, so their max-content ran to ~618px — and the stage, sharing
   that track, was dragged to ~577px inside a 292px column and clipped by the
   body. min-width:0 on the children stops the same thing happening from the
   image and caption. */
.lab-finishes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}
.lab-finishes > *,
.lab-finishes__stage,
.lab-finishes__panel,
.lab-finishes__panel > *,
.lab-finishes__shot,
.lab-finishes__panel figcaption { min-width: 0; max-width: 100%; }

.lab-finishes__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	border: 0;
	margin: 0 0 var(--space-3);
	padding: 0;
}
.lab-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: .6rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--v-line-ui);
	background: var(--paper-white);
	font-size: .92rem;
	font-weight: 650;
	color: var(--ink-navy);
	cursor: pointer;
	transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.lab-chip:hover { border-color: var(--process-blue); box-shadow: 2px 2px 0 0 var(--process-cyan); }
.lab-chip[aria-selected='true'],
body button.lab-chip[aria-selected='true'] {
	background: var(--ink-navy);
	border-color: var(--ink-navy);
	color: #fff;
	box-shadow: none;
}
.lab-chip:focus-visible { outline: 3px solid var(--process-blue); outline-offset: 2px; }

.lab-finishes__stage {
	position: relative;
	display: grid;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper-white);
}
.lab-finishes__panel {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-base) var(--ease);
}
.lab-finishes__shot { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-grey); }
.elementor .lab-finishes__shot img,
body .lab-finishes__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-finishes__panel figcaption { padding: var(--space-3); }
.lab-finishes__name { display: block; font-weight: 700; font-size: 1.1rem; color: var(--ink-navy); margin-bottom: .3rem; }
.lab-finishes__desc { display: block; font-size: .95rem; color: var(--v-muted); line-height: 1.55; }

/* One panel is shown at a time by the tablist: the others carry [hidden], so
   there is no selector dependency on an input at all and no :has() fallback to
   maintain. With no script the first panel is still the one without [hidden]. */
.lab-finishes__panel[hidden] { display: none; }
.lab-finishes__panel { opacity: 1; visibility: visible; }

@media (min-width: 768px) {
	.lab-finishes__panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
	.lab-finishes__shot { height: 100%; aspect-ratio: 3 / 2; }
	.lab-finishes__panel figcaption { padding: var(--space-4); }
}

/* Phones: the chips scroll rather than wrapping into four rows. */
@media (max-width: 599.98px) {
	.lab-finishes__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		margin-inline: calc(var(--v-gutter) * -1);
		padding-inline: var(--v-gutter);
		scrollbar-width: none;
	}
	.lab-finishes__chips::-webkit-scrollbar { display: none; }
	.lab-chip { flex: none; scroll-snap-align: start; }
}

/* ==========================================================================
   33. CARD NUMBERING
   Decorative numbers are removed from cards. A number on a category or
   capability card tells the reader nothing the name does not, and it competed
   with the icon in the same corner. The production process keeps its numbers:
   there the order is the information.
   ========================================================================== */

.v-cap::before,
body .e-con.v-cap::before { content: none; }
.lab-card__index { display: none; }
.lab-svcrow__n { display: none; }

/* With the number gone the capability card's icon takes the corner on its own
   and the body no longer needs to clear a number that is not there. */
.v-cap { padding-top: clamp(1.4rem, 1.1rem + .6vw, 1.75rem); }

/* ==========================================================================
   34. FOOTER BRAND
   The mark is a transparent dark logo, so on the ink footer it is inverted to
   white rather than sat on a plate. The old plate rule is gone from main.css —
   with the logo also inverted it produced a white box with nothing in it.
   ========================================================================== */

.lab-footer__brand img,
.lab-footer__brand .v-brand__img {
	background: none;
	padding: 0;
	border-radius: 0;
	max-height: 52px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
}
@media (max-width: 767.98px) {
	.lab-footer__brand img, .lab-footer__brand .v-brand__img { max-height: 44px; }
}

/* ==========================================================================
   35. HTML SITEMAP
   ========================================================================== */

.lab-sitemap { display: grid; gap: var(--space-4); }
.lab-sitemap__block { break-inside: avoid; }
.lab-sitemap__title {
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--blue-text);
	padding-bottom: .5rem;
	margin-bottom: .6rem;
	border-bottom: 1px dashed var(--border-dark);
}
.lab-sitemap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lab-sitemap__list a {
	display: block;
	min-height: 40px;
	padding: .5rem 0;
	color: var(--ink-navy);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.35;
}
.lab-sitemap__list a:hover { color: var(--blue-text); text-decoration: underline; text-underline-offset: .18em; }

@media (min-width: 768px) { .lab-sitemap { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); } }
@media (min-width: 1024px) { .lab-sitemap { grid-template-columns: repeat(3, 1fr); } }

/* Five footer columns at desktop: brand, packaging, services, company,
   factory. The brand column keeps the extra width; the link columns share the
   rest evenly. Below 1024 they fall to two columns rather than five cramped
   ones, and to one on phones so nothing wraps mid-word. */
@media (min-width: 1024px) {
	.lab-footer__deck { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: var(--space-4); }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
	.lab-footer__deck { grid-template-columns: repeat(2, 1fr); }
}
.lab-footer__list--utility { margin-top: .2rem; }

/* ==========================================================================
   36. PACKAGING FAMILIES — the circular component
   One component, used on Home and on the Packaging hub. The circle is the
   object; there is no card around it, so the section reads as navigation
   rather than as another grid of cards. No JavaScript is involved: the layout
   is a plain grid and the whole tile is a single anchor.

   This language belongs to packaging families only. Products, services,
   articles and projects stay rectangular.
   ========================================================================== */

.lab-circles {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-4) var(--space-3);
	justify-items: center;
}

.lab-cat { position: relative; display: flex; width: 100%; max-width: 175px; }

.lab-cat__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: .85rem;
	text-decoration: none;
	color: var(--ink-navy);
}

/* True circle: a square box clipped to a disc, with the photograph filling it.
   Not a rounded rectangle with an image inside. */
.lab-cat__disc {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--paper-grey);
	transition: box-shadow var(--dur-base) var(--ease);
}
/* The ring is an overlay, not an inset shadow: the image is content and sits
   above an inset shadow, so the ring was invisible at rest. */
.lab-cat__disc::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--cat-accent, var(--process-blue));
	pointer-events: none;
	z-index: 1;
}
.elementor .lab-cat__disc img,
body .lab-cat__disc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Per family — see the .v-acc-* block below. */
	object-position: var(--cat-pos, center);
	display: block;
	border-radius: 50%;
	transition: transform var(--dur-slow) var(--ease);
}

/* The accent ring steps out on hover, like a second ink coming into
   register. It is a shadow, so nothing in the layout moves. */
@media (hover: hover) and (pointer: fine) {
	.lab-cat__link:hover .lab-cat__disc {
		box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--cat-accent, var(--process-blue));
	}
	.lab-cat__link:hover .lab-cat__disc img { transform: scale(1.03); }
	.lab-cat__link:hover .lab-arrow { transform: translateX(5px); }
}

.lab-cat__link:focus-visible { outline: none; }
.lab-cat__link:focus-visible .lab-cat__disc {
	box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--process-blue);
}
.lab-cat__link:focus-visible .lab-cat__name { text-decoration: underline; text-underline-offset: .2em; }

.lab-cat__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Takes the leftover height of the tile so .lab-cat__cta's auto top margin
	   has free space to consume; without it the margin resolved to 0 and a
	   three-line name pushed its Explore below its row neighbour's. */
	flex: 1 1 auto;
	width: 100%;
	gap: .3rem;
	text-align: center;
}
.lab-cat__name {
	font-size: clamp(1rem, .95rem + .25vw, 1.2rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink-navy);
	max-width: 18ch;      /* 16ch broke "Corrugated Boxes" onto a third line */
	min-height: 2.5em;    /* reserve two lines so bodies start level */
	text-wrap: balance;
}
.lab-cat__desc { font-size: .88rem; color: var(--v-muted); line-height: 1.5; max-width: 30ch; }
.lab-cat__cta {
	/* Pushed to the bottom of the tile. Tiles in a row already stretch to a
	   common height, but the content sat top-aligned, so a three-line name
	   dropped its Explore ~19px below its neighbour's. */
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--cat-text, var(--blue-text));
}
.lab-cat__count { font-size: .78rem; color: var(--v-muted); }

/* ---- per-family framing -------------------------------------------------
   All six photographs were shot for a landscape card. A circle crops them
   square and then clips the corners, so each is nudged to keep its subject
   whole rather than sharing one global centre. */
.v-acc-rigid-boxes      { --cat-pos: 50% 56%; }
.v-acc-folding-cartons  { --cat-pos: 50% 50%; }
.v-acc-corrugated-boxes { --cat-pos: 50% 54%; }
.v-acc-paper-bags       { --cat-pos: 50% 48%; }
.v-acc-food-packaging   { --cat-pos: 50% 54%; }
.v-acc-labels-stickers  { --cat-pos: 50% 46%; }

/* ---- responsive ---- */

/* Phones: two columns, three rows. The circle stays substantial rather than
   shrinking to an icon, and the description is dropped so each tile is a
   picture and a name. */
/* ---- one row at every width -------------------------------------------
   The owner asked for all six families on a single line. Desktop and tablet
   fit six columns with the circle stepping down; phones keep the same single
   row and scroll it, because six circles inside 390px would be too small to
   read. Nothing wraps to a second row at any width. */

@media (min-width: 1024px) {
	.lab-circles { gap: var(--space-4) var(--space-3); }
	.lab-cat { max-width: 175px; }
}
@media (min-width: 700px) and (max-width: 1023.98px) {
	.lab-circles { gap: var(--space-3) var(--space-2); }
	.lab-cat { max-width: 145px; }
}
@media (min-width: 600px) and (max-width: 699.98px) {
	.lab-circles { gap: var(--space-3) .6rem; }
	.lab-cat { max-width: 118px; }
}
/* Six columns share the track, so the column is about 137px at 1024 and 103px
   at 767 - a full sentence there ran to 190px of stacked words on /packaging/.
   The description appears only once the column reaches roughly 170px; below
   that the name, the action and the product count carry the card. */
@media (max-width: 1199.98px) {
	.lab-cat__desc { display: none; }
}

/* Phones: the same single row, scrolled. grid-auto-flow keeps one line and the
   track width decides how much of the next circle peeks. */
@media (max-width: 599.98px) {
	.lab-circles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(105px, 33vw, 125px);
		gap: .75rem;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--v-gutter);
		margin-inline: calc(var(--v-gutter) * -1);
		padding-inline: var(--v-gutter);
		padding-bottom: .4rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		justify-items: stretch;
	}
	.lab-circles::-webkit-scrollbar { display: none; }
	.lab-cat { max-width: none; scroll-snap-align: start; }
	.lab-cat__desc, .lab-cat__count { display: none; }
	.lab-cat__link { gap: .55rem; }
	.lab-cat__name { font-size: .86rem; max-width: 100%; min-height: 2.4em; }
	.lab-cat__cta { min-height: 36px; font-size: .8rem; }
}

/* ==========================================================================
   37. ABOUT — narrow-phone corrections
   Scoped to the About page and to phone widths only, so the approved desktop
   composition and every other page are untouched.
   ========================================================================== */

/* The global h1 token is clamp(2.8rem, 2rem + 3.1vw, 6rem); its 2.8rem floor
   never yields, so "A Packaging Manufacturer in Ajman, UAE" broke to four
   lines at 345px and five at 320 — 224px of heading, about a third of a small
   phone screen, against the 134px it occupies from 355px upward. The floor is
   lowered for this page's hero only, to the largest size that still sets the
   line in three: measured 3 lines at 320, 335 and 345 where the token gave 5,
   4 and 4. Everything from 360 up keeps the approved 44.8px untouched. */
@media (max-width: 359.98px) {
	body.page-id-15 .val-bg-ink h1 {
		font-size: clamp(2.35rem, 1.1rem + 6vw, 2.8rem);
	}
}