/* ==========================================================================
   About
   Every rule below is a lift of an inline style="" from the About source.
   Values are unchanged; only their location moved.

   Class names are namespaced .bb-about-* because About's last section is also
   called "Come Visit" and Home already owns an unprefixed .bb-visit.
   ========================================================================== */

body { background: #DFD6C8; }

.bb-screen { background: #DFD6C8; }

@media (max-width: 900px) {
	.bb-h1 { font-size: 46px !important; }
	.bb-h2 { font-size: 30px !important; }
}

/* --------------------------------------------------------------------------
   Hero — "About Us" + the rotating belief panel
   -------------------------------------------------------------------------- */
.bb-about-hero {
	position: relative;
	background: #C8C89A;
	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 the authored 170px, 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-about-hero__inner {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding: calc(var(--bb-header-h, 101px) + 64px) 24px 70px;
}

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

.bb-about-hero__col { padding-left: 64px; }

.bb-about-hero__title {
	font-family: 'Fonseca Script', cursive;
	font-weight: 400;
	font-size: 96px;
	line-height: 1;
	text-transform: none;
	margin: 32px 0 0;
	color: #231F20;
	display: inline-block;
	transform: rotate(-4deg);
	transform-origin: left center;
}

.bb-about-hero__art {
	position: relative;
	height: 100%;
	min-height: 340px;
}

/* The donut is only pinned by `bottom`, so height:auto is safe here.
   about.js adds .is-in on mount; the two end states live in CSS. */
.bb-about-hero__donut {
	position: absolute;
	bottom: -70px;
	left: 50%;
	transform: translateX(calc(-50% + 300px));
	width: 400px;
	max-width: 100%;
	height: auto;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.bb-about-hero__donut.is-in { opacity: 1; transform: translateX(-50%); }

/* Belief / mission / team rotator. The source drove opacity from state;
   it is a class now. All three slides are stacked on the same footprint. */
.bb-belief__slides {
	font-size: 17px; /* its <p> is 17px; keeps the 52ch measure honest */
	margin-top: 16px;
	max-width: 52ch;
	min-height: 190px;
	position: relative;
}

.bb-belief__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 400ms cubic-bezier(.22, .61, .36, 1);
	/* Not in the source: without it the last slide's invisible box sits over
	   slide 1 and swallows the "Brunch & Brew" link. Visual output unchanged. */
	pointer-events: none;
}

.bb-belief__slide.is-active { opacity: 1; pointer-events: auto; }

.bb-belief__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.bb-belief__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0;
	color: #E47245;
	white-space: nowrap;
}

.bb-belief__rule {
	flex: 1;
	height: 5px;
	border-top: 1.5px solid #231F20;
	border-bottom: 1.5px solid #231F20;
}

/* Source authors this as a single paragraph at margin:0; components.css
   already zeroes the last child, so a second paragraph added later still
   gets the standard 16px gap. */
.bb-belief__body p {
	font-size: 17px;
	line-height: 1.6;
	color: #231F20;
}

/* The source's inline link is ink text with an orange rule, not the orange
   text .bb-rt gives by default. */
.bb-belief__body a,
.bb-belief__body a:hover { color: #231F20; border-bottom-color: #E47245; }

.bb-belief__dots {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.bb-belief__dot {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	border: 1.5px solid #231F20;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.bb-belief__dot.is-active { background: #E47245; }

/* --------------------------------------------------------------------------
   Our Story
   -------------------------------------------------------------------------- */
.bb-about-story {
	background: #FBF8F1;
	border-bottom: 1.5px solid #231F20;
}

.bb-about-story__grid { display: grid; grid-template-columns: 1fr 1fr; }

.bb-about-story__media {
	min-height: 560px;
	border-right: 1.5px solid #231F20;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #231F20;
}

/* about.js adds .is-in on mount and toggles .is-fading over the last two
   seconds of the clip before it restarts. */
.bb-about-story__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 1200ms ease;
}

.bb-about-story__video.is-in { opacity: 1; }
.bb-about-story__video.is-fading { opacity: 0; }

.bb-about-story__panel {
	position: relative;
	background: #DFD6C8;
	padding: 88px max(24px, calc((100vw - 1240px) / 2 + 24px)) 88px 56px;
}

.bb-about-story__trim {
	position: absolute;
	top: 0;
	bottom: 0;
	/* 23px wide starting one pixel further left, anchored right: the media
	   column behind this has background:#231F20 plus a 1.5px border, and at
	   some widths sub-pixel rounding left a hairline of that dark edge showing
	   beside the sawtooth. The extra pixel covers the seam; the sawtooth still
	   sits exactly where it did because the background is right-anchored. */
	left: -23px;
	width: 26px;
	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-vertical3.png"), linear-gradient(#DED7CA, #DED7CA);
	background-size: 22px auto, 3px 100%;
	background-position: right 3px center, right center;
	background-repeat: repeat-y, no-repeat;
}

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

.bb-about-story__body { max-width: 60ch; }

.bb-about-story__body p {
	font-size: 17px;
	line-height: 1.65;
	margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   What Makes Us Different
   -------------------------------------------------------------------------- */
.bb-about-diff {
	position: relative;
	background: #E47245;
	border-bottom: 1.5px solid #231F20;
	overflow: hidden;
}

.bb-about-diff__trim {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background-image: url("../../images/trim-peach-x2.png");
	background-size: auto 80px;
	background-repeat: repeat-x;
	pointer-events: none;
}

.bb-about-diff__inner {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding: 88px 24px;
}

.bb-about-diff__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 68px;
	text-transform: uppercase;
	margin: 0 0 8px;
	text-align: center;
}

/* .bb-label supplies the family, 14px, tracking and case. */
.bb-about-diff__subtitle {
	text-align: center;
	margin-bottom: 52px;
}

.bb-about-diff__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
}

/* .bb-oct supplies position:relative and the three clip-path layers. */
.bb-about-diff__card {
	height: 100%;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 550ms cubic-bezier(.22, .61, .36, 1), transform 550ms cubic-bezier(.22, .61, .36, 1);
}

.bb-about-diff__card.is-in { opacity: 1; transform: translateY(0); }

/* Source stagger: index x 110ms. Derived from position, so it is nth-child
   rather than a field or an inline style. Extra steps are listed so an editor
   adding a seventh card still gets the cadence. */
.bb-about-diff__card:nth-child(2) { transition-delay: 110ms; }
.bb-about-diff__card:nth-child(3) { transition-delay: 220ms; }
.bb-about-diff__card:nth-child(4) { transition-delay: 330ms; }
.bb-about-diff__card:nth-child(5) { transition-delay: 440ms; }
.bb-about-diff__card:nth-child(6) { transition-delay: 550ms; }
.bb-about-diff__card:nth-child(7) { transition-delay: 660ms; }
.bb-about-diff__card:nth-child(8) { transition-delay: 770ms; }

.bb-about-diff__card .bb-oct__stroke {
	height: 100%;
	box-sizing: border-box;
}

.bb-about-diff__cardinner {
	background: #E5E2D9;
	padding: 32px 34px;
	height: 100%;
	box-sizing: border-box;
}

.bb-about-diff__cardtitle {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 26px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.bb-about-diff__cardbody {
	font-size: 16px;
	line-height: 1.6;
	color: #231F20;
	margin: 0;
}

/* Card 6 — Murfreesboro Coffee Roasters */
.bb-about-diff__roaster {
	background: #D2C082;
	color: #231F20;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bb-about-diff__roastertitle { max-width: 70%; }

.bb-about-diff__roasterbody {
	max-width: 70%;
	margin: 0 0 22px;
}

/* Pinned by `bottom` only, so height:auto is correct here.
   The 500ms setTimeout the source used is a transition-delay now. */
.bb-about-diff__mascot {
	position: absolute;
	bottom: 0;
	right: -10px;
	width: 175px;
	height: auto;
	pointer-events: none;
	opacity: 0;
	transform: translateX(60px);
	transition: opacity 600ms cubic-bezier(.22, .61, .36, 1), transform 600ms cubic-bezier(.22, .61, .36, 1);
	transition-delay: 500ms;
}

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

.bb-about-diff__roastercta {
	margin-top: auto;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Franchising band
   -------------------------------------------------------------------------- */
.bb-about-franchise {
	background: #C8C89A;
	border-bottom: 1.5px solid #231F20;
}

.bb-about-franchise__inner {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding: 56px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.bb-about-franchise__title {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	flex: 1;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Come Visit / Catering
   -------------------------------------------------------------------------- */
.bb-about-visit { background: #FBF8F1; }

.bb-about-visit__grid { display: grid; grid-template-columns: 1fr 1fr; }

.bb-about-visit__panel {
	position: relative;
	background: #DFD6C8;
	padding: 88px 56px 88px max(24px, calc((100vw - 1240px) / 2 + 24px));
}

.bb-about-visit__trim {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -22px;
	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-flip2.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-about-visit__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 44px;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.bb-about-visit__body {
	max-width: 58ch;
	margin: 0 0 40px;
}

.bb-about-visit__body p {
	font-size: 17px;
	line-height: 1.65;
}

.bb-about-visit__body a,
.bb-about-visit__body a:hover { color: #231F20; border-bottom-color: #E47245; }

.bb-about-visit__body--catering { margin-bottom: 28px; }

.bb-about-visit__divider {
	border-top: 3px dotted #E47245;
	max-width: 58ch;
	margin: 0 0 40px;
}

.bb-about-visit__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* A sixth padding/size pair the source introduces on this page only; it is
   page-scoped rather than added to components.css. */
.bb-about-visit__btn {
	padding: 14px 30px;
	font-size: 15px;
}

.bb-about-visit__btn--outline,
.bb-about-visit__btn--outline:hover,
.bb-about-visit__btn--outline:link,
.bb-about-visit__btn--outline:visited {
	background: transparent;
	color: #231F20;
}

.bb-about-visit__media {
	min-height: 640px;
	border-left: 1.5px solid #231F20;
}

.bb-about-visit__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ==========================================================================
   About — responsive
   Desktop above 900px is client-approved; only the progressive tightening at
   1305 / 1200 / 1024 touches it, and nothing above 1305 changes at all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal containment — applies at every width.

   Two elements on this page animate in from off to the right:
   .bb-about-hero__donut (translateX(calc(-50% + 300px))) and
   .bb-about-diff__mascot (translateX(60px)). While that start transform is
   applied the element sits outside its section and widens the document.
   The diff section is already overflow:hidden; the hero was overflow:visible,
   so it gets overflow-x:clip. `clip`, not `hidden`: hidden would make the
   section a scroll container. overflow-y stays visible so the donut can keep
   hanging past the hero's bottom border.
   -------------------------------------------------------------------------- */
.bb-about-hero { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Belief rotator — height comes from the tallest slide, not a fixed guess.

   The three slides are stacked on one footprint with position:absolute and
   the container carries min-height:190px. 190px is only enough while the
   column is at desktop width; once the measure narrows, slide 1 (the longest)
   runs past the box and lands on the dots. Stacking them in a single grid
   cell instead lets the container size itself to the tallest slide. The
   min-height stays, so nothing above 1024 moves.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.bb-belief__slides { display: grid; }

	.bb-belief__slide {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
	}
}

/* --------------------------------------------------------------------------
   1305 / 1200 / 1024 — tightening before the stack
   -------------------------------------------------------------------------- */
@media (max-width: 1305px) {
	.bb-about-hero__col { padding-left: 40px; }
	.bb-about-diff__heading { font-size: 60px; }
}

@media (max-width: 1200px) {
	/* The padding-top step that used to live here (170 -> 160 -> 150) is gone:
	   the header-derived calc above owns it at every width down to 900. */
	.bb-about-hero__grid { gap: 40px; }
	.bb-about-hero__col { padding-left: 24px; }
	.bb-about-hero__title { font-size: 82px; }
	.bb-about-hero__donut { width: 340px; }

	.bb-about-diff__heading { font-size: 54px; }
	.bb-about-story__heading { font-size: 40px; }
	.bb-about-visit__heading { font-size: 40px; }
}

@media (max-width: 1024px) {
	.bb-about-hero__grid { gap: 28px; }
	.bb-about-hero__col { padding-left: 0; }
	.bb-about-hero__title { font-size: 68px; margin-top: 16px; }
	.bb-about-hero__donut { width: 300px; }
	.bb-about-hero__art { min-height: 300px; }

	.bb-about-story__media { min-height: 460px; }
	.bb-about-story__panel { padding: 64px 32px 64px 44px; }
	.bb-about-story__heading { font-size: 36px; }

	.bb-about-diff__inner { padding: 88px 24px 72px; }
	.bb-about-diff__heading { font-size: 46px; }
	.bb-about-diff__grid { gap: 24px; }
	.bb-about-diff__cardinner { padding: 28px 30px; }

	.bb-about-visit__panel { padding: 64px 40px 64px 32px; }
	.bb-about-visit__heading { font-size: 36px; }
	.bb-about-visit__media { min-height: 520px; }

	/* The mascot's 175px is a big share of a half-width card once the grid
	   columns narrow; it was starting to crowd the 70% copy measure. */
	.bb-about-diff__mascot { width: 150px; }
}

/* --------------------------------------------------------------------------
   900 — the stack point. site.css collapses .bb-split / .bb-g2 to one column;
   everything below re-seats art that was designed for a side-by-side row.
   .bb-h1 / .bb-h2 are already forced to 46px / 30px at the top of this file.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

	/* ---- Hero ---------------------------------------------------------- */
	.bb-about-hero__inner { padding: calc(var(--bb-header-h, 101px) + 48px) 24px 40px; }
	.bb-about-hero__grid { gap: 16px; }

	/* ROUND 2 — "ALL PAGES: center ALL content" / "ALL HEROS center hero text".
	   The whole stacked hero column centres. The title is an inline-block, so
	   text-align on the column is what centres it; its -4deg rotation has to
	   pivot on its own centre instead of its left edge or the centred block
	   visibly hangs to one side. Its 8px top margin goes so the gap under the
	   header is exactly the calc above and matches the other pages. */
	.bb-about-hero__col { text-align: center; }

	.bb-about-hero__title {
		margin-top: 0;
		transform-origin: center center;
	}

	/* ---- The belief rotator — "slider and slider nav too, and make sure
	       slider is centered on the page, not shoved to the left" ----

	   This is the max-width-without-margin-inline trap the brief names: the
	   slides carry a 52ch measure, which in an 852px column is about 480px, so
	   the whole slider sat against the left edge with half the column empty
	   beside it. margin-inline centres the block; text-align centres its lines;
	   the dots are the slider nav and centre with it. */
	.bb-belief__slides {
		margin-inline: auto;
		text-align: center;
	}

	.bb-belief__dots { justify-content: center; }

	/* The head is TITLE + one flex rule, which reads as a left-anchored lockup.
	   A mirrored rule before the title balances it so the title sits in the
	   middle. It is a pseudo-element, so no markup changes and desktop is
	   untouched. min-width:0 lets both rules collapse rather than push the
	   nowrap title out of the column at 320. */
	.bb-belief__head::before {
		content: "";
		flex: 1 1 0;
		min-width: 0;
		height: 5px;
		border-top: 1.5px solid #231F20;
		border-bottom: 1.5px solid #231F20;
	}

	.bb-belief__rule { flex: 1 1 0; min-width: 0; }

	/* The art column was a 340px-tall stage for an absolutely positioned
	   donut. Stacked it has no height of its own to hang off, and the donut
	   is 838x1078 — at 400px wide it is 515px tall, so pinning it to the
	   bottom of a short box would throw it up over the belief copy. It goes
	   back into the flow instead, centred under the copy. It stays inside the
	   hero, which is where it sits at every desktop width: bottom:-70px lines
	   its base up with the inner's bottom padding, not past the border. */
	.bb-about-hero__art {
		min-height: 0;
		height: auto;
	}

	/* ROUND 2 — "hero image should be stuck to bottom of section since image
	   is cut off". The artwork is cropped in the PNG itself (the mug and the
	   left hand run off the bottom of mascot-tophat-donut-wink.png), so while
	   it floated 41px above the section's ink rule the crop read as a mistake.
	   Desktop already lands it exactly on that rule; stacked it did not,
	   because the hero inner's bottom padding sat under it.

	   The negative bottom margin is that padding, cancelled: the image stays
	   in flow (so it still cannot throw itself over the belief copy, which is
	   why round 1 put it there at 838x1078) and its bottom edge now meets the
	   section border. Every breakpoint below restates it to match its own
	   padding-bottom — 40 / 36 / 32. */
	.bb-about-hero__donut {
		position: relative;
		bottom: auto;
		left: auto;
		display: block;
		width: 280px;
		max-width: 62%;
		margin: 4px auto -40px;
		/* Same reveal, scaled to a stacked column: the desktop version slides
		   300px and is centred by translateX(-50%), neither of which means
		   anything once the image is in flow. */
		transform: translateX(48px);
	}

	.bb-about-hero__donut.is-in { transform: translateX(0); }

	/* ---- Our Story ----------------------------------------------------- */
	/* Video on top, copy panel below — the copy keeps its own tan surface, so
	   nothing ends up reading over the footage. */
	.bb-about-story__media {
		min-height: 0;
		height: 320px;
		border-right: 0;
		border-bottom: 1.5px solid #231F20;
	}

	.bb-about-story__panel { padding: 56px 24px; text-align: center; }

	/* ROUND 2 centring: the body carries a 60ch measure, so text-align alone
	   would centre the lines inside a block still pinned left. */
	.bb-about-story__body { margin-inline: auto; }

	/* The sawtooth belongs on whichever edge faces the video. Stacked that is
	   the panel's top edge, so the strip turns horizontal and the teeth point
	   up. There is no horizontal tan trim PNG, so this paints the panel's own
	   tan through the alpha of trim-triangles-flip-mask.png — the same
	   mask-image technique .bb-cr-hero__trim uses on Coffee Roasting. The
	   mask art reads solid-edge-at-top / teeth-down, so the element is
	   flipped on Y to put the solid edge against the panel.

	   Geometry: a 23px box offset 22px, which lands the solid edge 1px INSIDE
	   the panel. That is what keeps the media's 1.5px ink border-bottom from
	   showing as a hairline beside the teeth — the same seam the vertical
	   trim's 23px width guards against on desktop. */
	.bb-about-story__trim {
		top: -22px;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 23px;
		background-image: none;
		background-color: #DFD6C8;
		-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;
		-webkit-mask-position: left top;
		mask-position: left top;
		transform: scaleY(-1);
	}

	/* ---- What Makes Us Different --------------------------------------- */
	.bb-about-diff__trim {
		height: 60px;
		background-size: auto 60px;
	}

	.bb-about-diff__inner { padding: 76px 24px 64px; }
	.bb-about-diff__subtitle { margin-bottom: 36px; }
	.bb-about-diff__cardinner { padding: 26px 28px; text-align: center; }
	.bb-about-diff__mascot { width: 155px; }

	/* ROUND 2 centring. The grid is one column here, so each card is the full
	   width of the section: its copy centres with the heading above it. The
	   roaster card's title and body are held to 70% to stay clear of the
	   mascot, which is exactly a max-width needing margin-inline; the CTA is a
	   flex child, so it centres with align-self rather than text-align. */
	.bb-about-diff__roastertitle,
	.bb-about-diff__roasterbody { margin-inline: auto; }

	.bb-about-diff__roastercta { align-self: center; }

	/* ---- Franchising band ---------------------------------------------- */
	/* The title is a 1920x87 wordmark, so it wants every pixel of the column;
	   the CTA centres under it rather than sitting in a half-empty row. */
	.bb-about-franchise__inner {
		padding: 48px 24px;
		flex-direction: column;
		text-align: center;
		gap: 22px;
	}

	.bb-about-franchise__title {
		flex: 0 0 auto;
		width: 100%;
	}

	/* ---- Come Visit / Catering ----------------------------------------- */
	.bb-about-visit__panel { padding: 56px 24px 64px; text-align: center; }

	/* ROUND 2 centring. Both the body and the dotted divider carry a 58ch
	   measure; without margin-inline the divider in particular would stay a
	   left-anchored stub under centred copy. The button row is flex, so it
	   centres with justify-content. */
	.bb-about-visit__body { margin: 0 auto 32px; }
	.bb-about-visit__divider { margin: 0 auto 32px; }
	.bb-about-visit__ctas { justify-content: center; }

	/* THE PAGE-OVERFLOW BUG. right:-22px is fine while the panel is inset in
	   a two-column row; full width it hung 22px past the viewport and made
	   the document 22px too wide at every width from 900 down. Stacked, the
	   edge facing the photo is the panel's bottom, so the strip turns
	   horizontal there — same mask treatment as the story trim above, teeth
	   pointing down, no flip needed, nothing sticking out sideways. */
	.bb-about-visit__trim {
		top: auto;
		bottom: -22px;
		left: 0;
		right: 0;
		width: auto;
		height: 23px;
		background-image: none;
		background-color: #DFD6C8;
		-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;
		-webkit-mask-position: left top;
		mask-position: left top;
	}

	.bb-about-visit__media {
		min-height: 0;
		height: 340px;
		border-left: 0;
		border-top: 1.5px solid #231F20;
	}
}

/* --------------------------------------------------------------------------
   640 — small tablet / large phone
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.bb-about-hero__inner { padding: calc(var(--bb-header-h, 101px) + 48px) 20px 36px; }

	/* Matches this breakpoint's 36px padding-bottom — see the 900 block. */
	.bb-about-hero__donut { margin-bottom: -36px; }

	.bb-about-story__media { height: 260px; }
	.bb-about-story__panel { padding: 48px 20px; }

	.bb-about-diff__trim {
		height: 52px;
		background-size: auto 52px;
	}

	.bb-about-diff__inner { padding: 68px 20px 56px; }
	.bb-about-diff__cardinner { padding: 24px; }

	/* Reserve a band under the CTA for the mascot instead of letting it sit
	   across the button: margin-top:auto pins the CTA to the bottom of the
	   card, so the card's own bottom padding is what lifts it clear. 130px
	   wide is 140px tall at the artwork's 1920x2063. */
	.bb-about-diff__roaster { padding-bottom: 150px; }
	.bb-about-diff__mascot { width: 130px; }

	.bb-about-diff__roastertitle,
	.bb-about-diff__roasterbody { max-width: 100%; }

	.bb-about-franchise__inner { padding: 40px 20px; }

	.bb-about-visit__panel { padding: 48px 20px 56px; }
	.bb-about-visit__media { height: 280px; }
}

/* --------------------------------------------------------------------------
   400 — phone
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	.bb-about-hero__inner { padding: calc(var(--bb-header-h, 101px) + 40px) 16px 32px; }

	/* Matches this breakpoint's 32px padding-bottom — see the 900 block. */
	.bb-about-hero__donut { margin-bottom: -32px; }

	.bb-belief__title { font-size: 22px; }

	.bb-about-story__media { height: 220px; }
	.bb-about-story__panel { padding: 44px 16px; }

	.bb-about-diff__trim {
		height: 44px;
		background-size: auto 44px;
	}

	.bb-about-diff__inner { padding: 60px 16px 48px; }
	.bb-about-diff__cardinner { padding: 22px 20px; }
	.bb-about-diff__roaster { padding-bottom: 130px; }

	/* THE INTERSECTIONOBSERVER TRAP, found at 320 and fixed for both phone
	   widths. The mascot starts at translateX(60px) and sits at right:-10px
	   inside a card that is overflow:hidden, so its start position is mostly
	   outside the clip. site.js observes it at a 0.3 threshold, and the
	   intersection rect is clipped by that ancestor: at 320 only 26px of a
	   96px mascot was inside, i.e. 27%, so .is-in never landed and the roaster
	   mascot stayed at opacity 0 — invisible, on client-approved artwork.
	   A 24px start offset keeps the slide-in and leaves ~65% of the mascot
	   inside the clip at both widths. The .is-in end state is untouched. */
	.bb-about-diff__mascot { width: 110px; transform: translateX(24px); }

	.bb-about-franchise__inner { padding: 36px 16px; }

	.bb-about-visit__panel { padding: 44px 16px 52px; }
	.bb-about-visit__media { height: 230px; }

	.bb-about-visit__ctas { gap: 12px; }
	.bb-about-visit__btn { padding: 13px 24px; }
}

/* --------------------------------------------------------------------------
   320 — smallest supported width
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
	.bb-belief__title { font-size: 20px; }

	.bb-about-diff__cardinner { padding: 20px 18px; }
	.bb-about-diff__mascot { width: 96px; }
	.bb-about-diff__roaster { padding-bottom: 118px; }
}

/* ==========================================================================
   About — round 3 (client review)
   ========================================================================== */

/* Client: "About Us needs margin top like 15px" - she compares the gap from
   the bottom of the logo to the top of the H1 across pages, at responsive
   widths. Desktop keeps its authored 32px. */
@media (max-width: 1024px) {
	.bb-about-hero__title { margin-top: 15px; }
}

/* Octagon optical gutter. Client: "pages like About you just didn't [do the
   spacing on the sides of the boxes]". The card sat square in its gutter, so
   the offset ink plate hung 10px further right than the left gap - the cards
   looked shoved right. Pulling the box left by the plate width evens the
   OPTICAL gutters. Same correction already on Contact and Catering. */
@media (max-width: 900px) {
	.bb-about-diff__card { margin-right: 10px; }
}

/* ---- 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. */

/* ==========================================================================
   About — BugHerd #5
   "I wonder if theres a way to make it so the photo doesn't continue to grow
   in its aspect ratio and makes the height of the section too tall ... I'm
   seeing this on sections with videos too"
   ========================================================================== */

/* He is right, and it is both sections. The media elements are height:100%
   inside a container whose own height is AUTO. That is circular, so the
   browser falls back to the media's intrinsic aspect ratio scaled to the
   column width - the wider the screen, the taller the section:

       viewport   text needs   image forces   section
       1440           751px         704px       751   (text wins)
       1920           751px         938px       938
       2119           751px        1035px      1035
       2560           751px        1251px      1251

   Taking the media out of flow stops it contributing any height at all, so
   the row is driven by the copy and the min-height, as intended. Nothing
   changes at or below 1440 - there the text already wins - so the approved
   desktop rendering is untouched; this only stops the stretch above it. */
.bb-about-visit__media { position: relative; }

.bb-about-visit__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same fix for the Our Story video: .bb-about-story__media is already
   position:relative, and the video grew from 560px to 719px by 2560. */
.bb-about-story__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}