/*
 * Bobmil hero: before/after comparison slider between the two businesses.
 * Colours, radii, shadows and UI text sizes come from design-tokens.css (load it first).
 * Brand colour #152379 = Flexible Packaging panel, CTAs, active states.
 */
.bm-hero, .bm-head, .bm-section {          /* tokens shared by the hero, the header and every page section */
	--brand: #152379;
	--ink: var(--text-primary);              /* #241F21 */
	--paper: var(--bg-primary);              /* #EBE7DF */
	--white: var(--bg-5);
	--muted: var(--text-4);                  /* #988F8B */
	--line-dark: rgba(36, 31, 33, .12);
	--frost: rgba(242, 239, 234, .82);
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-slide: cubic-bezier(.65, 0, .35, 1);
	--strip: 76px;                           /* the closed side shrinks to this edge strip */

	padding: 0;                              /* full-bleed: no outer frame */
	background: var(--paper);
	color: var(--ink);
	font-family: inherit;
	font-size: var(--text-xl);
	line-height: 1.5;
}
.bm-hero *, .bm-hero *::before, .bm-hero *::after, .bm-head *, .bm-head *::before, .bm-head *::after { box-sizing: border-box; }
.bm-hero :where(p, h1, h2, ul), .bm-head :where(ul) { margin: 0; padding: 0; }
.bm-hero :where(ul), .bm-head :where(ul) { list-style: none; }
.bm-hero a, .bm-head a { color: inherit; text-decoration: none; }
.bm-hero :focus-visible, .bm-head :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.bm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Card ---------- */
.bm-card {
	position: relative;
	height: max(600px, 100svh);              /* full width, full screen height */
	overflow: hidden;
	isolation: isolate;
	background: var(--white);
}

/* ---------- Layers (both full size, clipped at the seam) ---------- */
/* Seam position: 50/50 by default; hovering a side opens it to full width minus the other side's strip */
.bm-card { --pos: 50%; }
.bm-card.focus-sleep { --pos: calc(100% - var(--strip)); }
.bm-card.focus-pack { --pos: var(--strip); }
.bm-layer { position: absolute; inset: 0; z-index: 0; transition: clip-path .8s var(--ease-slide); }
.bm-layer--sleep { background: var(--white); color: var(--ink); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.bm-layer--pack { background: var(--brand); color: var(--white); clip-path: inset(0 0 0 var(--pos)); }
.bm-seam { transition: left .8s var(--ease-slide); }

/* Sleep campaign photo. Its light blue-grey studio background continues the panel colour. */
.bm-layer--sleep { background: linear-gradient(180deg, #b7c5d1 0%, #dde5eb 100%); } /* sampled from the cheetah photo's backdrop (layers photo: 90deg #f9f6ec → #e5ecee 35% → #b6d6eb) */
.bm-hero .bm-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: left center;            /* keeps the clean left side; the subject sits right */
	pointer-events: none;                    /* static: only the panel's clip moves, the photo never does */
}

/* Packaging campaign photo (giraffe + products): the giraffe's neck enters from the photo's LEFT edge and its body
   runs to the bottom; products bottom-left, clean navy right and top. Shown at its natural 16:9 ratio, anchored
   bottom-left, so the body meets the panel bottom; on screens taller than 16:9 the clean top fades into the panel. */
.bm-layer--pack { background: linear-gradient(90deg, #111f51 0%, #19306d 55%, #1c3777 100%); } /* sampled from the photo */
.bm-hero .bm-photo--pack {
	inset: 50% auto auto 0;                  /* desktop: centre-left */
	transform: translateY(-50%);
	/* Products end at 65% of the photo's width. Keep that 40px left of the copy (72px edge + 520px copy + 40px gap). */
	width: min(100%, calc((100% - 632px) / .65));
	height: auto;
	object-fit: fill;
	/* soft right, top and bottom edges blend into the panel colour when the photo is smaller than the panel */
	-webkit-mask-image: linear-gradient(270deg, transparent 0, #000 10%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(270deg, transparent 0, #000 10%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-composite: intersect;
}

/* Vertical edge label: shows on the closed side's strip so people know to hover it */
.bm-vlabel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--strip);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	writing-mode: vertical-rl;
	font-size: var(--text-base);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s var(--ease-out);
}
.bm-vlabel__n { font-size: var(--text-xs); opacity: .6; }
.bm-layer--sleep .bm-vlabel { left: 0; transform: rotate(180deg); } /* reads bottom-to-top on the left edge */
.bm-layer--pack .bm-vlabel { right: 0; }
.focus-pack .bm-layer--sleep .bm-vlabel, .focus-sleep .bm-layer--pack .bm-vlabel { opacity: 1; transition-delay: .35s; }
.bm-vlabel::after { /* small arrow pointing into the card */
	content: "\2192";
	writing-mode: horizontal-tb;
	font-size: var(--text-xl);
	letter-spacing: 0;
}
.bm-layer--pack .bm-vlabel::after { content: "\2190"; }
@media (prefers-reduced-motion: no-preference) {
	.bm-vlabel::after { animation: bm-nudge 1.8s ease-in-out infinite; }
}
@keyframes bm-nudge { 0%, 100% { translate: 0; } 50% { translate: 4px; } }
.bm-layer--pack .bm-vlabel::after { animation-direction: reverse; }

/* Copy blocks: Sleep anchored left, Packaging anchored right */
.bm-copy {
	position: absolute;
	top: 50%;
	width: min(520px, calc(50% - 96px));
	transform: translateY(-46%);
}
.bm-copy { transition: opacity .35s var(--ease-out); }
.focus-sleep .bm-layer--pack .bm-copy, .focus-pack .bm-layer--sleep .bm-copy { opacity: 0; pointer-events: none; }
.bm-layer--sleep .bm-copy { left: clamp(24px, 5vw, 72px); }
.bm-layer--pack .bm-copy { right: clamp(24px, 5vw, 72px); }
.bm-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .7;
}
.bm-kicker::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-xl); background: currentColor; }
.bm-layer--sleep .bm-kicker::before { background: var(--brand); }
.bm-title {
	font-size: clamp(36px, 4.2vw, 64px);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.04em;
	color: inherit;
	text-wrap: balance;
}
.bm-sub { max-width: 40ch; margin-top: 20px; font-size: var(--text-2xl); line-height: 1.45; opacity: .72; }
.bm-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Seam line ---------- */
.bm-seam {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 0;
}
/* No seam line: the colour change between the panels is the divider. */
/* ---------- Pills ---------- */
.bm-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--brand);
	color: var(--white) !important;
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.bm-pill:hover { background: var(--ink); }
.bm-pill:active { transform: scale(.96); }
.bm-pill--sm { min-height: 44px; padding: 10px 20px; font-size: var(--text-base); }
.bm-pill--ghost { background: transparent; border-color: rgba(36, 31, 33, .25); color: var(--ink) !important; }
.bm-pill--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white) !important; }
.bm-pill--light { background: var(--white); color: var(--brand) !important; }
.bm-pill--light:hover { background: var(--paper); }
.bm-pill--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .4); color: var(--white) !important; }
.bm-pill--ghost-light:hover { background: var(--white); border-color: var(--white); color: var(--brand) !important; }

/* ---------- Floating header (frosted pill inside the hero) ---------- */
.bm-head {
	position: absolute;
	z-index: 4;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: min(1180px, calc(100% - 32px));
	height: 64px;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 8px 0 22px;
	border: 1px solid var(--line-dark);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .7);      /* white glass */
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	backdrop-filter: blur(24px) saturate(1.4);
	color: var(--ink);
}
.bm-head a { display: flex; align-items: center; }
.bm-head__logo { flex: none; }
.bm-head__logo img { display: block; height: 34px; width: auto; filter: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(1200%) hue-rotate(290deg); } /* white logo → ink, bigger */
.bm-head__nav { flex: 1; display: flex; justify-content: center; }
.bm-head__nav ul { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.bm-head__nav a { font-size: var(--text-base); white-space: nowrap; opacity: .72; transition: opacity .2s var(--ease-out); }
.bm-head__nav a:hover, .bm-head__nav a:focus-visible { opacity: 1; }
.bm-head__cell { flex: none; transition: background-color .2s var(--ease-out), transform .2s var(--ease-out); }
.bm-head__cell:active { transform: scale(.95); }
.bm-head__cart {                               /* round white icon button */
	position: relative;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-xl);
	background: var(--white);
}
.bm-head__cart:hover { background: var(--paper); }
.bm-head .bm-head__cta {                        /* brand pill */
	order: 3;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--radius-md);
	background: var(--brand);
	color: var(--white);
	font-size: var(--text-base);
	font-weight: 500;
	white-space: nowrap;
}
.bm-head .bm-head__cta:hover { background: var(--ink); }
.bm-head__cart { order: 4; }
.bm-head__count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--radius-full);
	background: var(--brand);
	color: var(--white);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}
.bm-head__menu { display: none; position: relative; order: 5; }
.bm-head__menu summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-xl); background: var(--white); cursor: pointer; list-style: none; }
.bm-head__menu summary::-webkit-details-marker { display: none; }
.bm-head__menu ul {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: min(300px, calc(100vw - 40px));
	border-radius: var(--radius-lg);
	display: grid;
	padding: 10px;
	background: var(--white);
	box-shadow: var(--shadow-md);
}
.bm-head__menu li + li:not(:last-child) { border-top: 1px solid var(--line-dark); }
.bm-head__menu li a:not(.bm-pill) { padding: 12px 14px; font-size: var(--text-xl); }
.bm-head__menu .bm-pill { width: 100%; margin-top: 8px; justify-content: center; }

/* ---------- First load ---------- */
@media (prefers-reduced-motion: no-preference) {
	.bm-card { animation: bm-in .7s var(--ease-out) both; }
	.bm-copy { animation: bm-up .7s .2s var(--ease-out) backwards; } /* backwards: releases opacity so the focus fade can work */
	.bm-head { animation: bm-fade .6s var(--ease-out) both; }
}
@keyframes bm-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-up { from { opacity: 0; transform: translateY(-36%); } to { opacity: 1; transform: translateY(-46%); } }
@keyframes bm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.bm-hero * { transition-duration: .01s !important; animation: none !important; }
}

/* ---------- Nav collapse ---------- */
@media (max-width: 1180px) { .bm-head__nav ul { gap: 16px; } }
@media (max-width: 960px) {
	.bm-head .bm-head__nav, .bm-head .bm-head__cta { display: none; } /* the CTA moves into the ☰ menu */
	.bm-head__logo { margin-right: auto; }
	.bm-layer--sleep { padding-top: 96px; }   /* room for the header */
	.bm-head__menu { display: block; }

	/* Tablet + phone: the two sections stack top to bottom, nothing moves */
	.bm-card { height: auto; }
	.bm-layer { position: relative; inset: auto; clip-path: none; transition: none; }
	.bm-copy { position: static; width: auto; max-width: 560px; transform: none; padding: 48px 32px 56px; animation: none; }
	.bm-seam, .bm-vlabel { display: none; }
	/* Text sits ON the photo: the photo is anchored to the bottom, 140% wide (cropped to the cheetah side),
	   and its plain sky (top ~31% of its height) fades up behind the copy. The cheetah starts where the copy ends.
	   (Layers photo would need padding-bottom 74% + 6% fade: its subject reaches the top edge.) */
	.bm-layer--sleep { padding-bottom: 47%; }  /* = photo height (78% of width) minus its sky band (31%) */
	.bm-layer--sleep .bm-copy { position: relative; left: auto; z-index: 1; }
	.bm-hero .bm-photo {
		inset: auto 0 0 auto;
		width: 140%;
		height: auto;
		object-fit: fill;
		transform: none;
		transition: none;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
	}
	/* Packaging: photo 120% wide anchored bottom-LEFT (giraffe + products side, 0–83% of the photo shows).
	   Its top 20% is clean navy (the neck starts below that), so that band fades up behind the copy. */
	.bm-layer--pack { padding-bottom: 54%; }   /* = photo height (67% of width) minus its clean band (13%) */
	.bm-layer--pack .bm-copy { position: relative; right: auto; z-index: 1; }
	.bm-hero .bm-photo--pack {
		inset: auto auto 0 0;
		width: 120%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
		-webkit-mask-composite: source-over;  /* one mask layer here: "intersect" would blank the image */
		mask-composite: add;
	}
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
	.bm-head { top: 10px; width: calc(100% - 20px); height: 58px; padding-left: 16px; gap: 8px; }
	.bm-head__logo img { height: 30px; }
	.bm-layer--sleep { padding-top: 76px; }
	.bm-copy { padding: 36px 20px 44px; }
	.bm-title { font-size: clamp(30px, 8.4vw, 38px); }
	.bm-sub { margin-top: 14px; font-size: var(--text-lg); }
	.bm-ctas { gap: 8px; margin-top: 20px; }  /* compact buttons, side by side */
	.bm-ctas .bm-pill { min-height: 40px; padding: 9px 16px; font-size: var(--text-base); }
}