/* ==========================================================================
   Coffee Roasting
   Every rule below is a lift of an inline style="" from CoffeeRoasting.dc.html,
   including the thirty bean positions the source emitted from JavaScript.
   Values are unchanged; only their location moved.
   ========================================================================== */

body { background: #DFD6C8; padding: 0; overflow-x: hidden; }

.bb-screen { background: #DFD6C8; }

/* Source helmet block. .bb-split / .bb-g3 / .bb-nav / .bb-hide-sm at this
   breakpoint are already in site.css; only the two type sizes differ per page
   (this page authors .bb-h1 at 44px, Home at 46px). */
@media (max-width: 900px) {
	.bb-h1 { font-size: 44px !important; }
	.bb-h2 { font-size: 30px !important; }
}

/* --------------------------------------------------------------------------
   Buttons
   The page authors two padding/size pairs that components.css does not carry,
   and an ink button whose label is #DFD6C8 rather than the shared #FBF8F1.
   Both stay page-local rather than being flattened onto an existing modifier.
   -------------------------------------------------------------------------- */
.bb-cr-btn--hero { padding: 15px 32px; font-size: 15px; }
.bb-cr-btn--exp  { padding: 14px 30px; font-size: 15px; }

/* site.css sets a{color:#E47245} and a:hover{color:#C4552B}; the hover state
   has to be restated or it out-specifies a plain class. */
.bb-cr-btn--ink,
.bb-cr-btn--ink:link,
.bb-cr-btn--ink:visited,
.bb-cr-btn--ink:hover {
	background: #231F20;
	color: #DFD6C8;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bb-cr-hero {
	position: relative;
	background: #DCB99D;
	border-bottom: 1.5px solid #231F20;
	overflow: visible;
}

/* Round 2: the gap below the fixed header is measured from the live header
   height rather than an authored constant, so it is the same on every page and
   survives the header growing or shrinking. 64px desktop / 48 at 900 / 40 at
   400; --bb-header-h is published by site.js, the fallback covers no-JS. */
.bb-cr-hero__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(var(--bb-header-h, 101px) + 64px) 24px 110px;
}

.bb-cr-hero__copy {
	max-width: 680px;
	color: #231F20;
	padding: 0;
}

.bb-cr-hero__heading {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-weight: 700;
	-webkit-text-stroke: 1px #231F20;
	font-size: 66px;
	line-height: 1.04;
	letter-spacing: .02em;
	text-transform: uppercase;
	/* Round 2: the authored 48px top margin is gone. The gap under the header
	   is now the inner's padding-top alone, which is what keeps it equal to
	   the other pages' — a per-page h1 margin on top of it was the reason the
	   spacing read differently from one page to the next. */
	margin: 0 0 16px;
}

/* Source authors the second paragraph at margin-bottom:30px and the first at
   14px; the wrapper carries the extra so a WYSIWYG edit cannot lose it. */
.bb-cr-hero__body { margin: 0 0 30px; }

.bb-cr-hero__body p {
	font-size: 18px;
	line-height: 1.6;
	margin: 0 0 14px;
	max-width: 54ch;
}

.bb-cr-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Bottom trim: the tan band is the section colour showing through a
   repeat-x PNG mask, not a background image. */
.bb-cr-hero__trim {
	position: absolute;
	bottom: -38px;
	left: 0;
	right: 0;
	height: 39px;
	background-color: #DCB99D;
	-webkit-mask-image: url("../../images/trim-triangles-flip-mask.png");
	mask-image: url("../../images/trim-triangles-flip-mask.png");
	-webkit-mask-size: auto 39px;
	mask-size: auto 39px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	pointer-events: none;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Hero bean scatter
   The source looped a 30-entry array and wrote one inline
   style per bean. Artwork, position, size, rotation and entry delay are all
   index-derived, so they are :nth-child() here and the markup is bare divs.

   The source also set cursor:grab and pointer-events:auto on each bean purely
   to serve a drag-to-reposition handler that was a design-editor affordance
   (see the template header). Without the handler a grab cursor would be a lie,
   so the beans stay pointer-events:none like their container.
   -------------------------------------------------------------------------- */
.bb-cr-scatter {
	position: absolute;
	top: 150px;
	left: 720px;
	right: -60px;
	bottom: 110px;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.bb-cr-bean {
	position: absolute;
	aspect-ratio: 1 / 1;
	background-size: contain;
	background-repeat: no-repeat;
	user-select: none;
	opacity: 0;
	transform: translateX(160px) rotate(var(--bb-bean-rot, 0deg));
	transition: opacity 500ms cubic-bezier(.22, .61, .36, 1), transform 500ms cubic-bezier(.22, .61, .36, 1);
}

/* coffee-roasting.js adds .is-in 250ms after load, as the source did. */
.bb-cr-scatter.is-in .bb-cr-bean {
	opacity: 1;
	transform: rotate(var(--bb-bean-rot, 0deg));
	transition-delay: var(--bb-bean-delay, 0ms);
}

/* Artwork cycles bean-1 … bean-7 in order — the source's beanNum is exactly
   index % 7 + 1. bean-8 … bean-11 exist in assets/images but the design never
   referenced them. */
.bb-cr-bean:nth-child(7n+1) { background-image: url("../../images/bean-1.png"); }
.bb-cr-bean:nth-child(7n+2) { background-image: url("../../images/bean-2.png"); }
.bb-cr-bean:nth-child(7n+3) { background-image: url("../../images/bean-3.png"); }
.bb-cr-bean:nth-child(7n+4) { background-image: url("../../images/bean-4.png"); }
.bb-cr-bean:nth-child(7n+5) { background-image: url("../../images/bean-5.png"); }
.bb-cr-bean:nth-child(7n+6) { background-image: url("../../images/bean-6.png"); }
.bb-cr-bean:nth-child(7n+7) { background-image: url("../../images/bean-7.png"); }

/* Authored scatter, verbatim from the source's beans array. Delay is index*35ms. */
.bb-cr-bean:nth-child(1) { top: 80.3%; left: 66.2%; width: 81px; --bb-bean-rot: 26deg; --bb-bean-delay: 0ms; }
.bb-cr-bean:nth-child(2) { top: 9.6%; left: 50.5%; width: 72px; --bb-bean-rot: 15deg; --bb-bean-delay: 35ms; }
.bb-cr-bean:nth-child(3) { top: -12.8%; left: 40.3%; width: 107px; --bb-bean-rot: 23deg; --bb-bean-delay: 70ms; }
.bb-cr-bean:nth-child(4) { top: 82%; left: 41.5%; width: 60px; --bb-bean-rot: 10deg; --bb-bean-delay: 105ms; }
.bb-cr-bean:nth-child(5) { top: 12.1%; left: 53.6%; width: 107px; --bb-bean-rot: -20deg; --bb-bean-delay: 140ms; }
.bb-cr-bean:nth-child(6) { top: 3.2%; left: 88.4%; width: 63px; --bb-bean-rot: 9deg; --bb-bean-delay: 175ms; }
.bb-cr-bean:nth-child(7) { top: 75.6%; left: 83.7%; width: 68px; --bb-bean-rot: -21deg; --bb-bean-delay: 210ms; }
.bb-cr-bean:nth-child(8) { top: 6.3%; left: 32.7%; width: 55px; --bb-bean-rot: 17deg; --bb-bean-delay: 245ms; }
.bb-cr-bean:nth-child(9) { top: 94.5%; left: 92.3%; width: 71px; --bb-bean-rot: 24deg; --bb-bean-delay: 280ms; }
.bb-cr-bean:nth-child(10) { top: 63.7%; left: 31.3%; width: 86px; --bb-bean-rot: 27deg; --bb-bean-delay: 315ms; }
.bb-cr-bean:nth-child(11) { top: 59.5%; left: 17.2%; width: 62px; --bb-bean-rot: -5deg; --bb-bean-delay: 350ms; }
.bb-cr-bean:nth-child(12) { top: 45.1%; left: 97.7%; width: 59px; --bb-bean-rot: -6deg; --bb-bean-delay: 385ms; }
.bb-cr-bean:nth-child(13) { top: 51.2%; left: 50.9%; width: 95px; --bb-bean-rot: 23deg; --bb-bean-delay: 420ms; }
.bb-cr-bean:nth-child(14) { top: 50.1%; left: 76.9%; width: 110px; --bb-bean-rot: 9deg; --bb-bean-delay: 455ms; }
.bb-cr-bean:nth-child(15) { top: 95.8%; left: 71%; width: 63px; --bb-bean-rot: 12deg; --bb-bean-delay: 490ms; }
.bb-cr-bean:nth-child(16) { top: 41.2%; left: 60%; width: 78px; --bb-bean-rot: 4deg; --bb-bean-delay: 525ms; }
.bb-cr-bean:nth-child(17) { top: 98.7%; left: 78.3%; width: 69px; --bb-bean-rot: -16deg; --bb-bean-delay: 560ms; }
.bb-cr-bean:nth-child(18) { top: 49.5%; left: 86.3%; width: 65px; --bb-bean-rot: 2deg; --bb-bean-delay: 595ms; }
.bb-cr-bean:nth-child(19) { top: 87.8%; left: 68.8%; width: 71px; --bb-bean-rot: 8deg; --bb-bean-delay: 630ms; }
.bb-cr-bean:nth-child(20) { top: 77.2%; left: 12.7%; width: 89px; --bb-bean-rot: 12deg; --bb-bean-delay: 665ms; }
.bb-cr-bean:nth-child(21) { top: -12%; left: 96.7%; width: 101px; --bb-bean-rot: 3deg; --bb-bean-delay: 700ms; }
.bb-cr-bean:nth-child(22) { top: 69.2%; left: 50.3%; width: 56px; --bb-bean-rot: 17deg; --bb-bean-delay: 735ms; }
.bb-cr-bean:nth-child(23) { top: 98.7%; left: 64.7%; width: 93px; --bb-bean-rot: 20deg; --bb-bean-delay: 770ms; }
.bb-cr-bean:nth-child(24) { top: 61.3%; left: 97.7%; width: 99px; --bb-bean-rot: -4deg; --bb-bean-delay: 805ms; }
.bb-cr-bean:nth-child(25) { top: 58.5%; left: 33.9%; width: 70px; --bb-bean-rot: 11deg; --bb-bean-delay: 840ms; }
.bb-cr-bean:nth-child(26) { top: 24.8%; left: 70.1%; width: 65px; --bb-bean-rot: -11deg; --bb-bean-delay: 875ms; }
.bb-cr-bean:nth-child(27) { top: 9.5%; left: 74.6%; width: 95px; --bb-bean-rot: 17deg; --bb-bean-delay: 910ms; }
.bb-cr-bean:nth-child(28) { top: 38.6%; left: 38.4%; width: 94px; --bb-bean-rot: 28deg; --bb-bean-delay: 945ms; }
.bb-cr-bean:nth-child(29) { top: 3.6%; left: 68.5%; width: 97px; --bb-bean-rot: 11deg; --bb-bean-delay: 980ms; }
.bb-cr-bean:nth-child(30) { top: -3.4%; left: 19.7%; width: 71px; --bb-bean-rot: 6deg; --bb-bean-delay: 1015ms; }

/* Reduced motion: land on the final state instead of flying in. */
@media (prefers-reduced-motion: reduce) {
	.bb-cr-bean {
		opacity: 1;
		transform: rotate(var(--bb-bean-rot, 0deg));
	}

	.bb-cr-scatter.is-in .bb-cr-bean { transition-delay: 0ms; }
}

/* --------------------------------------------------------------------------
   Roasted Fresh split
   -------------------------------------------------------------------------- */
.bb-cr-story { background: #DED7CA; }

.bb-cr-story__inner { max-width: 1240px; margin: 0 auto; padding: 130px 24px; }

.bb-cr-story__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* site.js's [data-reveal] adds .is-in. */
.bb-cr-story__card {
	position: relative;
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity 600ms cubic-bezier(.22, .61, .36, 1), transform 600ms cubic-bezier(.22, .61, .36, 1);
}

.bb-cr-story__card.is-in { opacity: 1; transform: translateX(0); }

/* Offset ink plate. Not the house octagon: the source authors it square and
   offset to the LEFT (-10px, 10px), with no clip-path. */
.bb-cr-story__shadow {
	position: absolute;
	inset: 0;
	transform: translate(-10px, 10px);
	background: #231F20;
	pointer-events: none;
}

.bb-cr-story__frame {
	position: relative;
	height: 520px;
	border: 1.5px solid #231F20;
	overflow: hidden;
	background: #231F20;
}

.bb-cr-story__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 1200ms ease;
}

/* coffee-roasting.js drives this: fade in on load, fade out over the final
   two seconds, restart 300ms after the video ends. */
.bb-cr-story__video.is-visible { opacity: 1; }

.bb-cr-story__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 12px 0 22px;
}

.bb-cr-story__body { margin: 0; }

.bb-cr-story__body p {
	font-size: 17px;
	line-height: 1.65;
	color: #231F20;
	margin: 0 0 18px;
	max-width: 60ch;
}

.bb-cr-story__origins {
	width: 100%;
	max-width: 340px;
	height: auto;
	margin-top: 24px;
	display: block;
}

/* --------------------------------------------------------------------------
   Small-batch band
   -------------------------------------------------------------------------- */
.bb-cr-batch {
	position: relative;
	background: #D2C082;
	border-top: 1.5px solid #231F20;
	border-bottom: 1.5px solid #231F20;
	overflow: visible;
}

/* Same masked-band technique as the hero trim, in the band's own gold. */
.bb-cr-batch__trim {
	position: absolute;
	top: -38px;
	left: 0;
	right: 0;
	height: 39px;
	background-color: #D2C082;
	-webkit-mask-image: url("../../images/trim-triangles-orange.png");
	mask-image: url("../../images/trim-triangles-orange.png");
	-webkit-mask-size: auto 39px;
	mask-size: auto 39px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	pointer-events: none;
	z-index: 2;
}

.bb-cr-batch__pattern {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1429 / 71;
	background-image: url("../../images/pattern-x-orange.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: left bottom;
	pointer-events: none;
	z-index: 1;
}

.bb-cr-batch__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 88px 24px;
	text-align: center;
}

.bb-cr-batch__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 46px;
	text-transform: uppercase;
	margin: 32px 0 22px;
}

.bb-cr-batch__rule {
	width: 100%;
	margin: 0 auto 26px;
	border-top: 5px double #E47245;
}

/* Wrapper carries the paragraph's 14px so components.css's
   .bb-rt > :last-child{margin-bottom:0} cannot swallow it. */
.bb-cr-batch__body { margin: 0 0 14px; }

.bb-cr-batch__body p {
	font-size: 17px;
	line-height: 1.65;
	color: #231F20;
	margin: 0 auto 14px;
	max-width: 70ch;
}

.bb-cr-batch__script {
	font-family: 'Fonseca Script', cursive;
	font-size: 44px;
	color: #E47245;
	margin: 0 auto 36px;
}

/* The source authors five columns on a row it also tags .bb-g3; the class is
   what site.css collapses to 1fr at 900px, so both stay. */
.bb-cr-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}

.bb-cr-card {
	position: relative;
	aspect-ratio: 1 / 1.55;
	border-radius: 999px;
	border: 2px solid #231F20;
	box-shadow: 0 0 0 1px #231F20 inset, 0 0 0 5px #DED7CA inset, 0 0 0 6px #231F20 inset;
	background: #DED7CA;
	opacity: 0;
	transform: translateY(-20px);
	transition: transform 200ms cubic-bezier(.22, .61, .36, 1), opacity 500ms cubic-bezier(.22, .61, .36, 1) 0ms;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 20px 16px;
}

/* Source stagger on the opacity leg: 0, 100, 200, 300, 400ms. Derived from
   position, so nth-child rather than a field or an inline style. Extra steps
   are listed so a sixth card still gets the cadence. */
.bb-cr-card:nth-child(2) { transition: transform 200ms cubic-bezier(.22, .61, .36, 1), opacity 500ms cubic-bezier(.22, .61, .36, 1) 100ms; }
.bb-cr-card:nth-child(3) { transition: transform 200ms cubic-bezier(.22, .61, .36, 1), opacity 500ms cubic-bezier(.22, .61, .36, 1) 200ms; }
.bb-cr-card:nth-child(4) { transition: transform 200ms cubic-bezier(.22, .61, .36, 1), opacity 500ms cubic-bezier(.22, .61, .36, 1) 300ms; }
.bb-cr-card:nth-child(5) { transition: transform 200ms cubic-bezier(.22, .61, .36, 1), opacity 500ms cubic-bezier(.22, .61, .36, 1) 400ms; }
.bb-cr-card:nth-child(6) { transition: transform 200ms cubic-bezier(.22, .61, .36, 1), opacity 500ms cubic-bezier(.22, .61, .36, 1) 500ms; }
.bb-cr-card:nth-child(7) { transition: transform 200ms cubic-bezier(.22, .61, .36, 1), opacity 500ms cubic-bezier(.22, .61, .36, 1) 600ms; }

.bb-cr-cards.is-in .bb-cr-card { opacity: 1; transform: translateY(0); }

/* The source gated the hover lift on card.dataset.in, i.e. only after the
   row had revealed. The .is-in ancestor reproduces that gate exactly. */
.bb-cr-cards.is-in .bb-cr-card:hover { transform: translateY(-8px); }

.bb-cr-card__dot {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #231F20;
}

.bb-cr-card__dot--top { top: 22px; }
.bb-cr-card__dot--bottom { bottom: 22px; }

.bb-cr-card__title {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.05;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: center;
}

/* 44px is the only icon size on this page and components.css has no
   .bb-icon--44; kept page-local rather than editing a shared file. */
.bb-cr-card__icon {
	width: 44px;
	height: 44px;
	color: #231F20;
}

/* --------------------------------------------------------------------------
   Experience split
   -------------------------------------------------------------------------- */
.bb-cr-exp { position: relative; background: #DED7CA; }

.bb-cr-exp__bg {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.bb-cr-exp__bg-left { background: #DED7CA; }

.bb-cr-exp__bg-right { position: relative; overflow: hidden; }

/* The source painted this half as a background-image. It is an <img> here so
   the client can swap the photo in ACF; object-fit reproduces background-size:
   cover / background-position: center. */
.bb-cr-exp__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bb-cr-exp__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 88px 24px;
}

.bb-cr-exp__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 3px);
	width: 25px;
	pointer-events: none;
	z-index: 2;
	/* 3px LAP over the neighbouring panel so sub-pixel rounding on resize can
	   never open a hairline at the seam (client's colleague asked for ~3px).
	   Two background layers: the sawtooth PNG, offset 3px off the anchor edge
	   so it sits EXACTLY where it always did, plus a 3px solid strip in the
	   trim's own colour filling the lap. Widening the box alone does nothing -
	   the extra width is transparent - and it also drags the teeth 3px out of
	   place, which is the state this replaces. */
	background-image: url("../../images/trim-triangles-tan-vertical-flip.png"), linear-gradient(#DED7CA, #DED7CA);
	background-size: 22px auto, 3px 100%;
	background-position: left 3px center, left center;
	background-repeat: repeat-y, no-repeat;
}

.bb-cr-exp__copy { max-width: 520px; }

.bb-cr-exp__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 12px 0 22px;
}

.bb-cr-exp__body { margin: 0 0 30px; }

.bb-cr-exp__body p {
	font-size: 17px;
	line-height: 1.65;
	color: #231F20;
	margin: 0 0 30px;
	max-width: 60ch;
}

.bb-cr-exp__ctas { display: flex; gap: 14px; flex-wrap: wrap; }


/* ==========================================================================
   Coffee Roasting — responsive
   Desktop above 1200px is client-approved and untouched apart from one
   containment rule on the hero (see immediately below).
   ========================================================================== */

/* The bean scatter is authored to bleed off the right edge (right: -60px, and
   several beans sit at left: 97.7%), so at EVERY width it extends the
   document's scroll box — 232px past the right edge even at 1440. Today only
   body{overflow-x:hidden} hides that, which is exactly the "decorative art
   driving layout" the brief rules out.

   overflow-x: clip on the section contains it at source. `clip`, not `hidden`,
   per the brief — and paired with overflow-y: visible, which is the one
   combination the spec allows, so .bb-cr-hero__trim can still hang 38px below
   the section on its mask. The scatter itself is untouched: same geometry,
   same :nth-child() positions, same 250ms reveal. */
.bb-cr-hero {
	overflow-x: clip;
	overflow-y: visible;
}

/* Same treatment for the story panel, which reveals from translateX(-60px).
   That is a left-hand overflow so it never scrolled the page, but the clip
   keeps it from painting over the section edge mid-transition. */
.bb-cr-story {
	overflow-x: clip;
	overflow-y: visible;
}

@media (max-width: 1305px) {
	/* The scatter is pinned at left: 720px, an absolute value sized for the
	   1192px desktop inner. Below ~1240 the inner shrinks but 720 does not, so
	   the band the beans spread across collapses and they pile up at the right
	   edge — by 640 it is 0px wide and all thirty beans stack on the seam. A
	   percentage tracks the container instead; 60.4% is the ratio 720/1192
	   that the desktop design already resolves to, so 1305 looks like 1440. */
	.bb-cr-scatter { left: 60.4%; }
}

@media (max-width: 1200px) {
	/* ---- Small-batch cards: the row that ran off the page ----
	   Five `1fr` tracks are minmax(auto, 1fr), so each track's floor was the
	   card's min-content — "Consistency" set at 32px plus 32px of content-box
	   padding, about 201px. Five of those plus gaps need ~1076px, which is why
	   the row was 100px wider than its 976px inner at 1024 and pushed
	   .bb-cr-card, .bb-cr-card__title and the inline icon past the right edge.

	   minmax(0, 1fr) removes the floor, border-box stops the padding adding to
	   the track, min-width: 0 stops the title re-imposing it, and the type
	   steps down so the words still fit the narrower pill. The five-across
	   composition then survives all the way to the 900 stack point. */
	.bb-cr-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

	.bb-cr-card {
		box-sizing: border-box;
		min-width: 0;
		gap: 12px;
		padding: 18px 12px;
	}

	.bb-cr-card__title { font-size: 28px; }

	/* ---- Experience: keep the copy off the photograph ----
	   The background is a 50/50 split of the SECTION, but the copy is capped
	   at a flat 520px inside a 24px-padded inner, so below ~1088 its right
	   edge crossed the seam and the heading sat straight on the espresso
	   photo. 50% of the inner's content box minus 20px is the seam minus a
	   gutter at every width, and min() keeps the approved 520px cap above it. */
	.bb-cr-exp__copy { max-width: min(520px, calc(50% - 20px)); }
}

@media (max-width: 1024px) {
	.bb-cr-hero__inner { padding: calc(var(--bb-header-h, 101px) + 64px) 24px 96px; }
	.bb-cr-hero__heading { font-size: 56px; }

	.bb-cr-story__inner { padding: 100px 24px; }
	.bb-cr-story__grid { gap: 40px; }
	.bb-cr-story__frame { height: 440px; }

	.bb-cr-card { gap: 10px; padding: 16px 10px; }
	.bb-cr-card__title { font-size: 24px; }
	.bb-cr-card__icon { width: 38px; height: 38px; }
	.bb-cr-card__dot--top { top: 18px; }
	.bb-cr-card__dot--bottom { bottom: 18px; }
}

@media (max-width: 900px) {
	/* ---- Hero ----
	   ROUND 2 reverses round 1 here. Round 1 kept this copy left-aligned
	   because the scatter owned the right-hand 42% of the hero and centred
	   text would have run under the beans. The client's review asks for
	   centred hero text on every page, so the beans move instead: the scatter
	   becomes a band across the bottom of the hero — the same treatment round
	   1 already used at 640 — and the copy gets the full width to centre in.
	   Nothing is hidden; all thirty beans are still on screen. */
	.bb-cr-hero__inner {
		padding: calc(var(--bb-header-h, 101px) + 48px) 24px 264px;
		text-align: center;
	}

	.bb-cr-hero__copy { max-width: 100%; }

	/* The measure goes back up now the beans are out of the way, and it needs
	   margin-inline as well as text-align or the block stays pinned left. */
	.bb-cr-hero__body p { max-width: 60ch; margin-inline: auto; }

	.bb-cr-hero__ctas { justify-content: center; }

	/* Band across the bottom of the hero. The percentages the thirty beans are
	   positioned with resolve against this box, so moving the box is all it
	   takes — the :nth-child() geometry, the sizes and the staggered reveal are
	   untouched. scale(.6) from the bottom-left corner reads the authored bean
	   sizes down to phone scale; width:160% then makes the scaled band 96% of
	   the hero's width.

	   bottom:75px is the fix for "the beans are peeking down behind and below
	   the zig zag graphic". Several beans are positioned near top:98.7%, so
	   they hang below this box by their own height plus their rotation — 62px
	   once scaled, measured on bean 23 (93px wide, rotated 20deg, the lowest of
	   the thirty). At round 1's bottom:18px that put them 43px past the
	   section's edge, i.e. inside and below .bb-cr-hero__trim, showing through
	   the sawtooth's notches. 75px clears the section edge by ~13px, so the
	   trim is drawn against clean peach. Moving the beans rather than putting a
	   panel behind the trim: the palette has no white, and #FBF8F1 behind a
	   peach hero would read as a new surface colour. */
	.bb-cr-scatter {
		top: auto;
		bottom: 75px;
		left: 0;
		right: auto;
		width: 160%;
		height: 200px;
		transform: scale(.6);
		transform-origin: left bottom;
	}

	/* ---- Roasted Fresh: one column (site.css collapses .bb-split here) ---- */
	.bb-cr-story__inner { padding: 80px 24px; }
	.bb-cr-story__grid { gap: 32px; text-align: center; }
	.bb-cr-story__frame { height: 380px; }

	/* ROUND 2 centring. Both of these carry their own width cap — a 60ch
	   measure on the paragraphs and 340px on the origins wordmark — so each
	   needs margin-inline as well as the text-align above. */
	.bb-cr-story__body p { margin-inline: auto; }
	.bb-cr-story__origins { max-width: 300px; margin-inline: auto; }

	/* ---- Small-batch cards ----
	   site.css collapses .bb-g3 to a single 1fr !important at this width. On a
	   1/1.55 pill that made five cards roughly 850x1320 each and left about
	   4000px of empty gold band on the page. Switching the row to flex
	   sidesteps that !important cleanly (grid-template-columns does nothing on
	   a flex box) and lets the five pills wrap near their authored size: three
	   up here, two at 480, one at 320. Nothing is hidden, and the nth-child
	   stagger, the .is-in hover gate and the reveal are all unaffected. */
	.bb-cr-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px;
	}

	.bb-cr-card {
		flex: 1 1 210px;
		max-width: 230px;
		gap: 14px;
		padding: 20px 14px;
	}

	.bb-cr-card__title { font-size: 28px; }
	.bb-cr-card__icon { width: 42px; height: 42px; }
	.bb-cr-card__dot--top { top: 20px; }
	.bb-cr-card__dot--bottom { bottom: 20px; }

	.bb-cr-batch__inner { padding: 72px 24px; }
	.bb-cr-batch__script { font-size: 36px; margin-bottom: 30px; }

	/* ---- Experience: the photo comes out from behind the copy ----
	   The 50/50 background cannot survive a stacked column — either half the
	   text ends up on the espresso shot or the photograph is thrown away. So
	   the split turns from two columns into two rows: flat cream behind the
	   copy, the photo as a full-width band beneath it, with the inner's bottom
	   padding reserving exactly that band plus 48px of clearance. No copy
	   touches the image at any width from here down.

	   The vertical sawtooth seam becomes the horizontal seam above the band.
	   It is repainted with the page's own mask technique (cream showing
	   through trim-triangles-flip-mask.png) rather than a background image,
	   because assets/images has no tan horizontal sawtooth and this is how
	   .bb-cr-hero__trim and .bb-cr-batch__trim already draw theirs. Prefixed
	   and unprefixed mask properties are both set. */
	.bb-cr-exp { --bb-exp-band: 240px; }

	.bb-cr-exp__bg {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr var(--bb-exp-band);
	}

	.bb-cr-exp__inner { padding: 72px 24px calc(var(--bb-exp-band) + 48px); }

	/* ROUND 2 centring: copy centred over the flat cream half, the 56ch
	   measure centred with it, and the button row centred under both. */
	.bb-cr-exp__copy { max-width: 100%; text-align: center; }
	.bb-cr-exp__body p { max-width: 56ch; margin-inline: auto; }
	.bb-cr-exp__ctas { justify-content: center; }

	.bb-cr-exp__divider {
		top: auto;
		bottom: calc(var(--bb-exp-band) - 22px);
		left: 0;
		right: 0;
		width: auto;
		height: 22px;
		background-image: none;
		background-color: #DED7CA;
		-webkit-mask-image: url("../../images/trim-triangles-flip-mask.png");
		mask-image: url("../../images/trim-triangles-flip-mask.png");
		-webkit-mask-size: auto 22px;
		mask-size: auto 22px;
		-webkit-mask-repeat: repeat-x;
		mask-repeat: repeat-x;
	}
}

@media (max-width: 640px) {
	/* ---- Hero: the bean band, tightened for the phone ----
	   The band itself is set up in the 900 block now. Here it only loses 20px
	   of height; bottom stays at 75px, which is the clearance the lowest bean
	   needs above .bb-cr-hero__trim (see the 900 block for the arithmetic —
	   the overhang barely changes with the band's height, because it is the
	   bean's own size and rotation, not the band, that produces it). */
	.bb-cr-hero__inner { padding: calc(var(--bb-header-h, 101px) + 48px) 24px 250px; }
	.bb-cr-hero__heading { font-size: 44px; }
	.bb-cr-hero__body p { font-size: 16px; max-width: none; }

	.bb-cr-scatter { height: 180px; }

	.bb-cr-story__inner { padding: 64px 24px; }
	.bb-cr-story__frame { height: 300px; }
	.bb-cr-story__body p { font-size: 16px; }
	.bb-cr-story__origins { max-width: 260px; }

	.bb-cr-batch__inner { padding: 60px 24px; }
	.bb-cr-batch__body p { font-size: 16px; }
	.bb-cr-batch__script { font-size: 30px; margin-bottom: 26px; }

	/* Pills go two up; the basis drops so 480 and 400 both take a pair. */
	.bb-cr-cards { gap: 14px; }

	.bb-cr-card {
		flex: 1 1 168px;
		max-width: 210px;
		gap: 12px;
		padding: 16px 12px;
	}

	.bb-cr-card__title { font-size: 24px; }
	.bb-cr-card__icon { width: 36px; height: 36px; }
	.bb-cr-card__dot--top { top: 16px; }
	.bb-cr-card__dot--bottom { bottom: 16px; }

	.bb-cr-exp { --bb-exp-band: 200px; }
	.bb-cr-exp__inner { padding: 60px 24px calc(var(--bb-exp-band) + 40px); }
	.bb-cr-exp__body p { font-size: 16px; margin-bottom: 22px; }
}

@media (max-width: 400px) {
	/* 44px still set "MURFREESBORO" wider than a 368px content box. */
	.bb-cr-hero__inner { padding: calc(var(--bb-header-h, 101px) + 40px) 16px 200px; }
	.bb-cr-hero__heading { font-size: 36px !important; }
	.bb-cr-hero__ctas { gap: 10px; }

	.bb-cr-btn--hero { padding: 14px 24px; }
	.bb-cr-btn--exp { padding: 13px 22px; }

	/* scale(.5) shrinks the overhang below the band with everything else, so
	   the clearance above the sawtooth comes down from 75px to 63px. */
	.bb-cr-scatter { bottom: 63px; height: 160px; transform: scale(.5); }

	.bb-cr-story__inner { padding: 56px 16px; }
	.bb-cr-story__frame { height: 240px; }
	.bb-cr-story__origins { max-width: 220px; }

	.bb-cr-batch__inner { padding: 52px 16px; }
	.bb-cr-batch__script { font-size: 26px; }

	.bb-cr-exp { --bb-exp-band: 170px; }
	.bb-cr-exp__inner { padding: 52px 16px calc(var(--bb-exp-band) + 36px); }
}

@media (max-width: 320px) {
	/* Smallest supported width. One pill per row, grown to the column. */
	.bb-cr-hero__heading { font-size: 32px !important; }
	.bb-cr-card { max-width: 200px; }
	.bb-cr-card__title { font-size: 22px; }
}

/* ==========================================================================
   Coffee Roasting — round 4 (client review)
   ========================================================================== */

/* Client: "Compare the side padding on Locations screenshot VS Coffee Roasting
   which is not as good."
   Cause: this page's ink plate is the ONE on the site offset to the LEFT
   (.bb-cr-story__shadow is translate(-10px, 10px)), so it hangs off the left
   edge instead of the right. Measured optical gutters were 14/24 from 900 down
   and 6/16 at 400 - the plate was nearly touching the screen edge. Everywhere
   else the box is pulled LEFT to seat the plate; here it must be pushed RIGHT
   by the same 10px. Result matches Locations, which she called perfect. */
@media (max-width: 900px) {
	.bb-cr-story__card { margin-left: 10px; }
}

/* ---- Script font: line-height must be PINNED, never "normal" ----
   Found on Mac Safari (BrowserStack): the Catering masthead script ran up
   behind the pill above it. Cause is not the margin - it is that these script
   elements were left at line-height:normal, which every engine computes from
   the FONT'S OWN metrics. Fonseca Script is a slanted script with tall
   ascenders, and Safari and Chromium read its ascender metrics differently, so
   the line box is tighter on Safari and the ink overflows upward into the gap.

   1.688 is exactly what Chromium already resolves "normal" to for this face
   (measured: 54px at 32px), so the approved rendering does not move - it just
   stops being whatever each browser decides. */
.bb-cr-batch__script { line-height: 1.688; }

/* ---- Vertical sawtooth: 3px overlap onto the panel it joins ----
   Client: a hairline appears along the vertical zigzag while resizing.
   Cause: the strip was exactly as wide as its offset (22px at -22px), so its
   solid base edge landed EXACTLY on the panel edge. Sub-pixel rounding at
   fractional widths then let the dark layer behind show through as a line.
   Fix: the strip grows 3px on its SOLID side so it laps onto the panel, and
   the artwork is anchored to that side so the teeth keep their geometry. Which
   side is solid differs per PNG (measured from the alpha channel), so the
   direction is not the same on every page. */