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

body { background: #DCD5C6; overflow-x: hidden; max-width: 100vw; }

.bb-screen { background: #DCD5C6; }

@media (max-width: 900px) {
	.bb-h1 { font-size: 46px !important; }
	.bb-h2 { font-size: 30px !important; }
	.bb-hero { aspect-ratio: auto !important; min-height: 600px !important; }
	.bb-ig { grid-template-columns: 1fr 1fr !important; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bb-hero {
	position: relative;
	aspect-ratio: 1920 / 1104;
	min-height: 560px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.bb-hero__bg { position: absolute; inset: 0; background: #DFD6C8; }

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

.bb-hero__fade-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 340px;
	background: linear-gradient(to bottom, #DCD5C6 0%, rgba(220, 213, 198, .78) 42%, rgba(220, 213, 198, 0) 100%);
	pointer-events: none;
}

.bb-hero__fade-corner {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 72%;
	height: 70%;
	background: radial-gradient(120% 100% at 0% 100%, #DFD6C8 0%, rgba(223, 214, 200, .72) 38%, rgba(223, 214, 200, 0) 78%);
	pointer-events: none;
}

.bb-hero__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 110px 24px 96px;
	width: 100%;
}

.bb-hero__lockup {
	width: 100%;
	max-width: 650px;
	height: auto;
	display: block;
	margin-left: -18px;
}

.bb-hero__ctas-wrap { max-width: 650px; margin-top: 0; }

.bb-hero__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0;
	transform: rotate(-6deg);
	transform-origin: center center;
}

/* Intro video sheet. Phases were inline opacity/display writes from JS;
   they are classes now. Phase 0 = playing, 1 = video faded, 2 = sheet faded,
   3 = sheet removed and the video source dropped. */
.bb-hero__intro {
	position: absolute;
	inset: 0;
	z-index: 20;
	background: #DCD5C6;
	overflow: hidden;
	opacity: 1;
	transition: opacity 900ms cubic-bezier(.22, .61, .36, 1);
}

.bb-hero__intro.is-faded { opacity: 0; pointer-events: none; }
.bb-hero__intro.is-gone { display: none; }

.bb-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	transition: opacity 600ms cubic-bezier(.22, .61, .36, 1);
}

.bb-hero__video.is-faded { opacity: 0; }

/* --------------------------------------------------------------------------
   Marquee band
   -------------------------------------------------------------------------- */
@keyframes bbMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.bb-marquee {
	position: relative;
	z-index: 30;
	margin-top: -2.1%;
	overflow: hidden;
	contain: paint;
	background: #D2C082;
	border-top: 2px solid #231F20;
	border-bottom: 2px solid #231F20;
	padding: 14px 0;
}

.bb-marquee__track {
	display: flex;
	width: max-content;
	animation: bbMarquee 90s linear infinite;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.bb-marquee__group {
	display: flex;
	align-items: center;
	flex: none;
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #231F20;
}

.bb-marquee__item { padding: 0 26px; white-space: nowrap; }

.bb-marquee__mark { height: 16px; width: auto; display: block; flex: none; }

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

/* --------------------------------------------------------------------------
   Made Fresh split
   -------------------------------------------------------------------------- */
.bb-fresh { background: #DCD5C6; }

.bb-fresh__inner { max-width: 1240px; margin: 0 auto; padding: 96px 24px; }

.bb-fresh__grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 72px;
	align-items: center;
	overflow: visible;
}

.bb-fresh__media { position: relative; }

.bb-fresh__badge {
	position: absolute;
	z-index: 0;
	width: 62%;
	height: auto;
	right: -6%;
	top: 0;
	display: block;
	pointer-events: none;
	will-change: transform;
	/* home.js writes --bb-parallax on scroll; the transform itself stays here. */
	transform: translateY(var(--bb-parallax, 0px));
}

.bb-fresh__img {
	z-index: 1;
	width: 150%;
	max-width: none;
	height: auto;
	display: block;
	margin: 64px 0 -18px -46%;
	position: relative;
}

.bb-fresh__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	text-transform: uppercase;
	/* The tagline now sits between this and the body, so the gap below is
	   smaller and .bb-fresh__tagline carries the rest. */
	margin: 12px 0 10px;
	text-wrap: balance;
}

/* Home's H1 subhead. Orange condensed uppercase is already the house pattern
   for a secondary heading (.bb-catmenu__heading, .bb-catering__heading), so
   this reads as part of the system rather than a new style.
   30px is the site's own --fs-h2 step: the H1 above is 44px, so a 44px
   subhead would have competed with it rather than sat under it.
   One colour, not the split dark/orange also floated - that would need the
   copy broken across two fields, which the client has ruled out for a single
   element. */
.bb-fresh__tagline {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.15;
	text-transform: uppercase;
	color: #E47245;
	margin: 0 0 22px;
	text-wrap: balance;
}

/* Source authored the last paragraph at margin-bottom:28px and the first two
   at 16px; the wrapper carries the extra 12px so a WYSIWYG edit cannot lose it. */
.bb-fresh__body { margin: 0 0 28px; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Featured Menu
   -------------------------------------------------------------------------- */
.bb-featured {
	position: relative;
	overflow: visible;
	background: #E47245;
	border-bottom: 2px solid #231F20;
}

.bb-featured__trim {
	position: absolute;
	top: -38px;
	left: 0;
	right: 0;
	height: 39px;
	background-image: url("../../images/trim-triangles-orange.png");
	background-size: auto 39px;
	background-repeat: repeat-x;
	background-position: left top;
	pointer-events: none;
	z-index: 1;
}

.bb-featured__inner { max-width: 1240px; margin: 0 auto; padding: 88px 24px 140px; }

.bb-featured__title {
	width: min(92%, 980px);
	height: auto;
	display: block;
	margin: 0 auto 44px;
}

.bb-featured__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* 0: the body already carries generous padding, and the 48px gap doubled it. */
	gap: 0;
	align-items: center;
	background: #DFD6C8;
	padding: 0;
	overflow: hidden;
}

.bb-featured__media {
	position: relative;
	height: 460px;
	border-right: 1.5px solid #231F20;
	overflow: hidden;
	align-self: stretch;
}

.bb-featured__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 400ms cubic-bezier(.22, .61, .36, 1);
	opacity: 0;
}

.bb-featured__img.is-active { opacity: 1; }

.bb-featured__body { position: relative; padding: 44px 46px 44px 20px; }

/* All three text panels are in the markup; JS swaps which one shows.
   Stacked so the card height never jumps between slides.

   align-items:center matters: the stack is as tall as the TALLEST slide, so a
   shorter active slide would sit at its top. The design rendered one panel and
   let the card's align-items:center centre it in the 460px row; centring each
   panel inside the stack reproduces that exactly. */
.bb-featured__panels { display: grid; align-items: center; }

.bb-featured__panel {
	grid-area: 1 / 1;
	transition: opacity 400ms cubic-bezier(.22, .61, .36, 1);
	opacity: 0;
	visibility: hidden;
}

.bb-featured__panel.is-active { opacity: 1; visibility: visible; }

.bb-featured__meta { display: flex; align-items: center; gap: 12px; }

.bb-featured__tag {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	background: #231F20;
	color: #FBF8F1;
	border-radius: 999px;
	padding: 6px 14px;
}

.bb-featured__price {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: #E47245;
}

.bb-featured__name {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 38px;
	line-height: 1.08;
	text-transform: uppercase;
	margin: 18px 0 16px;
}

.bb-featured__copy {
	font-size: 17px;
	line-height: 1.6;
	color: #231F20;
	margin: 0 0 28px;
	max-width: 52ch;
}

.bb-featured__ctas { display: flex; gap: 14px; flex-wrap: wrap; padding-right: 120px; }

/* Sibling of .bb-featured__body, not a child of it: the design closed the body
   div first, so these resolve against .bb-oct__stroke (the full 460px card).
   Nested inside the body they sat ~40px high, because that box is shorter. */
.bb-featured__nav {
	position: absolute;
	right: 38px;
	bottom: 34px;
	z-index: 3;
	display: flex;
	gap: 10px;
}

.bb-featured__arrow {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: none;
	background: #D2C082;
	color: #231F20;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.bb-featured__pattern {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	aspect-ratio: 1429 / 71;
	max-width: 100%;
	background-image: url("../../images/pattern-x-ink.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	pointer-events: none;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Catering callout
   -------------------------------------------------------------------------- */
.bb-catering {
	position: relative;
	border-bottom: 2px solid #231F20;
	overflow: visible;
	background: linear-gradient(to right, #DFD6C8 35%, #D2C082 35%);
}

.bb-catering__photo {
	position: absolute;
	inset: 0;
	width: 35%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.bb-catering__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 96px 24px;
}

.bb-catering__grid {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: 40px;
	align-items: stretch;
	position: relative;
}

/* Position values come from the source's authoring props (top -2px, left 44%,
   width 300px). The drag-to-reposition handler behind them was a design-editor
   affordance, not site behaviour, and is not ported — see README. */
.bb-catering__callout {
	position: absolute;
	top: -2px;
	left: 44%;
	width: 300px;
	height: auto;
	z-index: 5;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transition: opacity 500ms cubic-bezier(.22, .61, .36, 1);
}

.bb-catering__callout.is-in { opacity: 1; }

.bb-catering__panel { position: relative; display: flex; flex-direction: column; }

.bb-catering__panel .bb-oct__stroke { flex: 1; display: flex; }

.bb-catering__inner-panel {
	background: #E6E3D9;
	padding: 44px 46px 44px 96px;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
}

.bb-catering__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 56px;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 12px 0 20px;
	color: #E47245;
}

.bb-catering__body { margin: 0 0 24px; max-width: 58ch; }
.bb-catering__body p { margin: 0 0 14px; }

.bb-catering__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }

.bb-catering__mascot-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.bb-catering__mascot {
	max-height: 600px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	opacity: 0;
	transform: translateX(120px);
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}

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

/* --------------------------------------------------------------------------
   Instagram
   -------------------------------------------------------------------------- */
.bb-insta { background: #DCB99D; border-bottom: 2px solid #231F20; }

.bb-insta__inner { max-width: 1240px; margin: 0 auto; padding: 88px 24px; }

.bb-insta__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 34px;
	position: relative;
}

.bb-insta__headcol { flex: 1; min-width: 260px; }

.bb-insta__script {
	font-family: 'Fonseca Script', cursive;
	font-weight: 400;
	font-size: 72px;
	line-height: .75;
	text-transform: none;
	margin: 0 0 -12px;
	color: #231F20;
	display: inline-block;
	transform: translateY(28px);
}

.bb-insta__rule {
	position: relative;
	height: 66px;
	display: flex;
	align-items: center;
}

.bb-insta__rule::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 2px dotted #231F20;
}

.bb-insta__handle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 300px;
	padding: 17px 34px;
	font-size: 16px;
	z-index: 2;
}

.bb-insta__note {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #231F20;
	margin: 12px 0 0;
	white-space: nowrap;
}

.bb-ig { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }

.bb-ig__tile {
	display: block;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	border: 1.5px solid #231F20;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 6px 6px 0 #231F20;
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 450ms cubic-bezier(.22, .61, .36, 1), transform 450ms cubic-bezier(.22, .61, .36, 1);
	transition-delay: 0ms;
}

/* Source stagger: 0, 90, 180, 270, 360ms. 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 sixth tile still gets the cadence. */
.bb-ig__tile:nth-child(2) { transition-delay: 90ms; }
.bb-ig__tile:nth-child(3) { transition-delay: 180ms; }
.bb-ig__tile:nth-child(4) { transition-delay: 270ms; }
.bb-ig__tile:nth-child(5) { transition-delay: 360ms; }
.bb-ig__tile:nth-child(6) { transition-delay: 450ms; }
.bb-ig__tile:nth-child(7) { transition-delay: 540ms; }
.bb-ig__tile:nth-child(8) { transition-delay: 630ms; }

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

.bb-ig__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	transition: opacity 600ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Visit Us
   -------------------------------------------------------------------------- */
.bb-visit {
	position: relative;
	background: #DCD5C6;
	border-bottom: 2px solid #231F20;
	overflow: hidden;
}

.bb-visit__row { display: flex; align-items: stretch; }

.bb-visit__main {
	flex: 1;
	min-width: 0;
	padding: 96px 80px 96px max(24px, calc((100vw - 1240px) / 2 + 24px));
}

.bb-visit__title {
	width: min(100%, 560px);
	height: auto;
	display: block;
	margin: 12px 0 28px;
}

.bb-visit__intro { margin: 0 0 40px; max-width: 62ch; }

.bb-visit__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.bb-visit__card {
	background: #E6E3D9;
	padding: 30px 32px;
	position: relative;
}

.bb-visit__cardtitle {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 28px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.bb-visit__addr {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 16px;
	color: #231F20;
	text-decoration: none;
}

.bb-visit__addr:hover { color: #231F20; }

.bb-visit__dirwrap { display: flex; align-items: flex-end; }

.bb-visit__dirbtn { position: relative; z-index: 2; }

.bb-visit__arrow {
	position: absolute;
	right: 32px;
	bottom: 30px;
	width: 100px;
	height: auto;
	pointer-events: none;
	z-index: 1;
}

.bb-visit__side { display: flex; flex-direction: column; gap: 32px; }

.bb-visit__tile {
	background: #C8C89A;
	color: #231F20;
	border-radius: 0;
	padding: 24px 26px;
}

.bb-visit__tile--call { text-align: center; }

.bb-visit__tilelabel {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #231F20;
	margin-bottom: 10px;
}

.bb-visit__tilelabel--center { text-align: center; }

.bb-visit__phone {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #231F20;
	text-decoration: none;
}

.bb-visit__phone:hover { color: #231F20; }

.bb-visit__hours {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 15px;
	padding: 3px 0;
	color: #231F20;
}

.bb-visit__hoursdots { flex: 1; border-bottom: 1.5px dotted #231F20; }

.bb-visit__hoursval { font-weight: 700; }

/* Loyalty panel */
.bb-loyalty {
	position: relative;
	flex: 0 0 380px;
	background: #E47245;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 64px 40px;
}

.bb-loyalty__trim {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -22px;
	width: 25px;
	pointer-events: none;
	/* 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-orange-vertical.png"), linear-gradient(#E57245, #E57245);
	background-size: 22px auto, 3px 100%;
	background-position: right 3px center, right center;
	background-repeat: repeat-y, no-repeat;
}

.bb-loyalty__badge {
	width: 100%;
	max-width: 220px;
	height: auto;
	display: block;
	margin-bottom: 24px;
}

.bb-loyalty__heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 36px;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: #231F20;
}

.bb-loyalty__script {
	font-family: 'Fonseca Script', cursive;
	font-size: 26px;
	color: #FBF8F1;
	margin-bottom: 16px;
}

.bb-loyalty__body { margin: 0 0 24px; max-width: 40ch; font-size: 16px; }
.bb-loyalty__body p { font-size: 16px; }


/* ==========================================================================
   Home — responsive
   Desktop above 900px is client-approved and untouched.
   ========================================================================== */

/* The curved arrow points at Get Directions; it drifts right of the button as
   the card narrows, so it is pulled back in before anything stacks. */
@media (max-width: 1305px) {
	.bb-visit__arrow { right: 10px; }
}

/* Explore/featured tightening before the stack. */
@media (max-width: 1200px) {
	/* ---- Visit Us: the address card takes a full-width row of its own, with
	       the call / hours tiles beneath. Side by side it was too narrow and
	       the arrow sat on the button and ran across the zip code. ---- */
	.bb-visit__cards { grid-template-columns: 1fr; gap: 26px; }

	/* The section head centres with the cards below it. The title is an image
	   with its own max-width and the intro has a ch measure, so both need
	   margin-inline rather than text-align alone. */
	.bb-visit__title { margin-inline: auto; }

	.bb-visit__intro {
		margin-inline: auto;
		text-align: center;
	}

	/* Full width now, so the address block and Get Directions centre.
	   margin-inline:auto on the button as well as justify-content on the
	   wrapper: the button centres either way, whichever the flex container
	   resolves to. */
	.bb-visit__card { text-align: center; }
	.bb-visit__addr { text-align: center; }

	.bb-visit__dirwrap {
		justify-content: center;
		width: 100%;
	}

	.bb-visit__dirbtn { margin-inline: auto; }

	/* The measure is set in ch, so it needs centring in its own right once the
	   panel is full width - the max-width was holding it off-centre. */
	.bb-loyalty__body {
		margin-inline: auto;
		text-align: center;
	}

	.bb-loyalty__heading,
	.bb-loyalty__script { text-align: center; }

	/* The callout graphic was overlapping the H2: pull the panel's left inset
	   back so the heading is not sitting under the artwork. */
	.bb-catering__inner-panel { padding: 44px 40px 44px 44px; }
	.bb-catering__callout { width: 270px; left: 43%; top: -30px; }
}

@media (max-width: 1024px) {
	.bb-catering__inner-panel { padding: 80px 34px 40px; }

	/* ---- Instagram: stacked and centred well before the main break. The
	       handle button was absolutely positioned over the script heading and
	       began colliding with it long before 900. ---- */
	.bb-insta__head {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
	}

	.bb-insta__headcol {
		min-width: 0;
		width: 100%;
		text-align: center;
	}

	.bb-insta__script {
		transform: none;
		display: block;
		margin: 0 0 14px;
	}

	.bb-insta__rule {
		height: auto;
		display: flex;
		justify-content: center;
	}

	.bb-insta__rule::before { display: none; }

	.bb-insta__handle {
		position: static;
		transform: none;
		min-width: 0;
	}

	.bb-insta__note {
		white-space: normal;
		text-align: center;
		margin: 16px 0 0;
	}
	.bb-catering__callout { width: 250px; left: 40%; top: -20px; }
}

@media (max-width: 900px) {
	/* ---- Hero: everything centred ---- */
	.bb-hero__inner {
		padding: 96px 24px 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.bb-hero__lockup { margin-left: 0; margin-inline: auto; }
	.bb-hero__ctas-wrap { max-width: 100%; width: 100%; }
	.bb-hero__ctas { justify-content: center; }

	/* ---- Made Fresh: keep the donut/badge composition at desktop scale
	       instead of letting a full-width column blow it up. ---- */
	.bb-fresh__inner { padding: 72px 24px; }
	.bb-fresh__grid { gap: 24px; justify-items: center; }

	.bb-fresh__media {
		width: min(420px, 86%);
		margin: 0 auto;
	}

	.bb-fresh__img {
		width: 118%;
		margin: 34px 0 -10px -9%;
	}

	.bb-fresh__badge { width: 52%; right: -2%; }

	/* Centre the copy column to match the centred media above it. */
	.bb-fresh__grid > div:last-child { text-align: center; }
	.bb-fresh__heading { text-align: center; }
	.bb-fresh__body { margin-inline: auto; text-align: center; }

	/* ---- Featured ---- */
	.bb-featured__inner { padding: 60px 25px 100px 15px; }
	.bb-featured__title { width: 100%; margin-bottom: 30px; }

	.bb-featured__card { grid-template-columns: 1fr; }

	.bb-featured__media {
		height: 350px;
		border-right: 0;
		border-bottom: 1.5px solid #231F20;
	}

	/* Left gets more than right: the octagon's offset shadow sits along the
	   right edge, and extra bottom keeps the buttons off it. */
	.bb-featured__body { padding: 20px 20px 30px 28px; }
	.bb-featured__ctas { padding-right: 0; }

	/* In flow at this width, so it needs its own inset: with no padding the
	   arrows landed on the octagon's angled bottom-right corner and its
	   offset shadow. */
	.bb-featured__nav {
		position: static;
		justify-content: flex-start;
		margin-top: 6px;
		padding: 0 26px 26px 28px;
	}

	/* ---- Catering: the callout stays top-right rather than drifting to the
	       middle of a stacked column and landing on the heading again. ---- */
	.bb-catering__grid { position: relative; }

	.bb-catering__callout {
		width: 250px;
		left: auto;
		right: -10px;
		top: -20px;
	}

	.bb-catering__inner-panel { padding: 56px 28px 36px; }

	/* No wash over the food photo: there is no text on that block, and the
	   overlay only made the photograph look muddy. */
	.bb-catering__mascot { max-height: 380px; }

	/* ---- Instagram: the head is already centred from 1024. ---- */
	.bb-insta__script { font-size: 56px; }
	/* Same content-box trap as .bb-loyalty. */
	.bb-insta__handle {
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
		padding: 15px 24px;
	}

	/* Two up, with the fifth spanning the full width rather than sitting alone
	   in a half-row. Nothing is hidden - all five photos still show. */
	.bb-ig { grid-template-columns: 1fr 1fr !important; gap: 18px; }

	.bb-ig__tile:nth-child(5) {
		grid-column: 1 / -1;
		aspect-ratio: 2 / 1;
	}

	/* ---- Visit Us: the loyalty panel was a fixed 380px flex item, so the row
	       never actually stacked and the content ran off-screen. ---- */
	.bb-visit__row { flex-direction: column; }

	.bb-visit__main {
		padding: 72px 24px 56px;
		min-width: 0;
	}

	.bb-visit__cards { grid-template-columns: 1fr; gap: 24px; }

	/* border-box is essential here: the site runs on content-box (the design
	   system's base.css is deliberately not loaded), so width:100% plus 28px
	   of side padding made this panel 56px WIDER than its column and pushed
	   it off the right edge. */
	.bb-loyalty {
		box-sizing: border-box;
		flex: 1 1 auto;
		width: 100%;
		padding: 56px 28px;
	}

	/* The vertical sawtooth belongs on a left edge; on a stacked column it
	   would hang off the side, so it moves to the top edge. */
	.bb-loyalty__trim {
		top: -22px;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 22px;
		background-image: url("../../images/trim-triangles-orange.png");
		background-size: auto 22px;
		background-repeat: repeat-x;
		/* Reset explicitly: the desktop rule now declares TWO background
		   layers, and this horizontal variant has only one. Without this the
		   desktop rule's first position value ("right 3px center") would carry
		   over and shift the tiling phase of the teeth. */
		background-position: left top;
	}

	/* The curved arrow points at Get Directions; at narrow widths it sat well
	   away from the button, so it shrinks and tucks back in. */
	.bb-visit__arrow { width: 74px; right: 20px; bottom: 22px; }
}

@media (max-width: 640px) {
	.bb-featured__media { height: 300px; }

	/* .bb-featured__inner and .bb-featured__body keep their 900px values on
	   purpose - overriding the sides here is what broke the padding. */

	.bb-catering__inner-panel { padding: 75px 20px 30px; }
	.bb-insta__script { font-size: 44px; }
	.bb-visit__arrow { display: none; }
}

@media (max-width: 400px) {
	.bb-hero__inner { padding: 84px 16px 64px; }
	.bb-fresh__inner { padding: 56px 16px; }
	.bb-featured__body { padding: 18px 16px 26px 22px; }
	.bb-catering__inner-panel { padding: 75px 16px 26px; }
	.bb-insta__inner { padding: 64px 16px; }
	.bb-insta__script { font-size: 38px; }
	.bb-ig { gap: 12px; }
	.bb-visit__main { padding: 56px 16px 44px; }
	.bb-loyalty { padding: 48px 18px; }
}

/* ==========================================================================
   Home — round 2 (client review)
   "ALL PAGES: center ALL content, everything."
   Everything else on Home already centres from the round-1 pass; the catering
   panel was the one block still anchored left once the grid stacked.
   ========================================================================== */

@media (max-width: 900px) {
	/* The panel is an octagon, so its offset ink plate sits along the right
	   and bottom edges. Equal OPTICAL padding therefore needs more on the
	   left than the right - the same treatment as .bb-featured__body above,
	   which is the example the client pointed at. */
	.bb-catering__inner-panel {
		padding: 56px 24px 40px 34px;
		align-items: center;
		text-align: center;
	}

	/* A ch measure will not centre on text-align alone; the max-width holds
	   the block itself off-centre until margin-inline lands. This is the
	   mistake that bit Visit Us and the loyalty panel in round 1. */
	.bb-catering__body { margin-inline: auto; }

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

@media (max-width: 640px) {
	.bb-catering__inner-panel { padding: 75px 18px 34px 26px; }
}

@media (max-width: 400px) {
	.bb-catering__inner-panel { padding: 75px 14px 30px 22px; }
}

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

/* Octagon optical gutter. Round 2 gave .bb-catering__inner-panel asymmetric
   PADDING so its contents sit optically centred, but the panel's own box was
   still square in the gutter - so the offset ink plate hung 10px further right
   than the left gap. The panel and the Visit Us loyalty octagon both need the
   box itself pulled left by the plate width. .bb-oct--18 uses an 8px plate. */
/* Featured is ALREADY even from 900 down - .bb-featured__inner carries the
   asymmetric 25/15 padding there, which does the same job. Applying the margin
   as well would tip it 15/25 the other way, so this one stops at 901. */
@media (max-width: 1024px) and (min-width: 901px) {
	.bb-featured__inner > .bb-oct { margin-right: 10px; }
}

@media (max-width: 1024px) {
	.bb-catering__panel { margin-right: 10px; }
	.bb-visit__card.bb-oct--18,
	.bb-visit__cards > .bb-oct--18 { margin-right: 8px; }
}

/* ==========================================================================
   Home — round 4 (client review)
   ========================================================================== */

/* ---- 1. Catering box now sits in the SAME gutter as the slider box ----
   Client: "you can see the side spacing isn't the same / the spacing on sides
   of the slider box is what we want."
   Measured at 400: the slider box sat at L15, the catering panel at L24 - nine
   pixels deeper. .bb-catering__inner carried 24px sides while
   .bb-featured__inner carries 15. With the panel's own 10px plate offset this
   lands the catering box at exactly the slider's L15 / R25. */
@media (max-width: 900px) {
	.bb-catering__inner { padding-left: 15px; padding-right: 15px; }
}

/* ---- 2. Inner padding is EQUAL again ----
   Client: "why would you not have equal inner left and right padding? that's
   weird."
   She is right and this was my error. Round 1 gave these boxes asymmetric
   INNER padding to compensate for the offset ink plate. Round 3 then pulled
   the BOX itself left by the plate width, which is the correct fix and the one
   the Visit Us box uses - so the inner padding was compensating a second time
   for something already handled. Equal inner padding, offset box: that is the
   whole rule. Scanned every page for this: three boxes had it, these two plus
   .bb-catfeat__body on Catering, which is fixed in catering.css. Note that
   .bb-featured__inner's 15/25 is NOT this bug - that is the section's gutter,
   and the 10px difference there is what seats the plate. */
@media (max-width: 900px) {
	.bb-featured__body { padding: 20px 24px 30px; }
	.bb-catering__inner-panel { padding: 56px 28px 40px; }
}

@media (max-width: 640px) {
	.bb-catering__inner-panel { padding: 75px 22px 34px; }
}

@media (max-width: 400px) {
	.bb-featured__body { padding: 18px 18px 26px; }
	.bb-catering__inner-panel { padding: 75px 18px 30px; }
}

/* ---- 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-loyalty__script { line-height: 1.688; }

/* ---- Made Fresh: clamp the badge's scroll drift on small screens ----
   Client: "looks like there's more space below the donuts image block than at
   top of the section/image block" (at 400px).

   It is not static spacing - measured, the gap BELOW is a fixed 47px while the
   gap above swings between 6px and 91px as you scroll, because home.js drives
   the badge with --bb-parallax over a 120px travel ((progress - 0.5) * 120).
   On a 400px screen the media block is a third of its desktop size, so that
   same 120px swing is proportionally enormous and the badge rides up until it
   nearly touches the marquee above - which is the frame her screenshot caught.

   The drift is client-approved, so it is kept, just bounded: clamp() caps the
   translate without touching home.js, so the motion still reads but the badge
   can no longer crowd the top of the section. Desktop is untouched - there the
   section is far taller and the full 120px travel is in proportion.

   Resulting badge top, relative to the section, vs the fixed 47px below:
     <=900  clamp 14px -> 42..70px
     <=400  clamp  8px -> 48..64px */
@media (max-width: 900px) {
	.bb-fresh__badge { transform: translateY(clamp(-14px, var(--bb-parallax, 0px), 14px)); }
}

@media (max-width: 400px) {
	.bb-fresh__badge { transform: translateY(clamp(-8px, var(--bb-parallax, 0px), 8px)); }
}

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

/* ==========================================================================
   Home — BugHerd
   ========================================================================== */

/* ---- BugHerd #2: hero lockup legibility on mobile ----
   "can we get a white dropshadow behind this text in mobile, or maybe a slight
   tan overlay, so that it is visible where it overlaps the image?"

   The dark "FRESH DAILY IN MURFREESBORO, TN" ink lands on the poppy-seed bagel
   once the lockup goes near-full-width. The lockup is a PNG, not live text, so
   text-shadow does nothing - drop-shadow() works off the image's alpha and
   haloes the letterforms themselves. Two passes: a tight opaque one to lift
   the ink off the photo, a wider soft one to blend the halo into the tan.
   Paper (#FBF8F1) rather than pure white; white is not in the palette. */
@media (max-width: 900px) {
	.bb-hero__lockup {
		filter:
			drop-shadow(0 0 3px rgba(251, 248, 241, .95))
			drop-shadow(0 0 10px rgba(251, 248, 241, .75));
	}
}

/* ---- BugHerd #3: catering section on mobile ----
   "i would remove this guy in mobile and make the image come across the full
   width of the page (remove yellow split)"

   The section paints a hard 35% photo / 65% gold split behind the card. On a
   phone that reads as a stray yellow block under the card once the mascot is
   gone, so the photo takes the full width and the gold goes with it. The card
   itself is opaque, so the copy is unaffected. */
@media (max-width: 900px) {
	.bb-catering { background: #DFD6C8; }
	.bb-catering__photo { width: 100%; }
	.bb-catering__mascot-wrap { display: none; }

	/* The callout's reveal is CHAINED TO THE MASCOT: home.js observes the
	   mascot and adds .is-in to the callout 650ms later. With the mascot
	   display:none that observer never fires and the "Catering Packages"
	   ribbon stays at opacity 0 - it disappeared entirely on a phone until
	   this was added. Shown outright here; it simply skips the fade. */
	.bb-catering__callout { opacity: 1; }
}

/* The H1 drops to 30px once stacked (.bb-h2 !important), so the tagline steps
   down with it and stays clearly subordinate. */
@media (max-width: 900px) {
	.bb-fresh__tagline { font-size: 22px; text-align: center; }
}

@media (max-width: 400px) {
	.bb-fresh__tagline { font-size: 20px; }
}