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

   Shared classes are reused, never redeclared: .bb-btn, .bb-label,
   .bb-oct*, .bb-icon*, .bb-rt, .bb-field and .bb-select all come from
   components.css, and the header/footer/900px chrome from site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Anchor offset and sticky-bar top.

   --bb-anchor  the scroll-margin every jump target carries (~18px clearance
                under the bar). 199px below 1180px, where the nav wraps to two
                rows.
   --bb-bar-top where the jump bar pins. Catering uses this variable; Menu
                pins its own bar at a literal top:102px. The two pages
                genuinely use different mechanisms — see HANDOFF.md before
                touching either. The 139px value is what closed the 22px
                transparent strip that used to show between the main nav and
                this bar below 1180px; do not "round" it.
   -------------------------------------------------------------------------- */
html {
	--bb-anchor: 135px;
	--bb-bar-top: 78.5px;
}

/* ROUND 4 - the 139px/199px pair that used to live here is GONE.
   Client: "No transparent gap between the nav and the anchor bar below 1180px
   - this is still a problem."

   Measured: a 60px transparent strip from 1180 down (72px below 560), with
   page content scrolling through it between the header and the bar.

   Why the old value was wrong. 139px dates from when the main nav WRAPPED TO
   TWO ROWS below 1180, so the bar had to clear a taller header. The header now
   collapses to a burger at 1200 instead, so that second row no longer exists
   and 139px overshot by exactly its height. HANDOFF.md still says "do not
   round it" - that note is stale for this reason and has been corrected there.

   Below 1180 the header is the same height as at desktop, so the desktop
   values (78.5px / 135px) are simply inherited: no override at all. The bar
   pins flush under a header whose STUCK height is 79px - the header loses the
   logo's 22px margin-top when .is-stuck lands (site.css), which is where the
   0.5px hairline overlap in 78.5 comes from. */

/* At 560 the header itself gets shorter (site.css drops the logo to 46px and
   the inner padding to 10px/16px), taking the stuck header from 79px to 67px.
   The bar and the anchor offset both follow it down by that same 12px. */
@media (max-width: 560px) {
	html {
		--bb-anchor: 123px;
		--bb-bar-top: 66.5px;
	}
}

body { background: #DFD6C8; padding: 0; }

.bb-screen { background: #DFD6C8; }

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

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bb-cathero {
	position: relative;
	background: #DFD6C8;
	border-bottom: 1.5px solid #231F20;
}

/* Top padding is measured from the LIVE header height. site.js publishes
   --bb-header-h (~101px desktop, ~89px on phones); the fallback only applies
   before the script runs, and the header height is never hardcoded here
   (HANDOFF.md). The h1 carries its own 16px margin-top, so var + 48 + 16 is
   the 64px gap under the header the client asked for on desktop.

   Caveat: .bb-cathero__grid is align-items:center, so above ~1150px the copy
   column is vertically centred against a taller bag image and the h1 sits
   lower than 64px by however much the two differ. That vertical centring is
   part of the approved desktop composition and is left alone. */
.bb-cathero__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(var(--bb-header-h, 101px) + 48px) 24px 140px;
}

.bb-cathero__grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 24px;
	align-items: center;
}

.bb-cathero__col { max-width: 700px; }

.bb-cathero__heading {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1.08;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 16px 0 20px;
}

/* Two paragraphs, authored at two sizes and two measures. Both live in one
   WYSIWYG field, so the difference is expressed positionally rather than as
   two fields the client could get out of order. The wrapper carries the
   trailing 30px because .bb-rt zeroes the last child's margin. */
.bb-cathero__intro {
	margin-top: 0;
	margin-bottom: 30px;
}

.bb-cathero__intro p { margin-bottom: 14px; }
.bb-cathero__intro p:first-child { font-size: 18px; max-width: 56ch; }
.bb-cathero__intro p + p { font-size: 17px; max-width: 60ch; }

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

/* A sixth padding/size pair and a third fill, both used only here, so they
   stay page-local rather than joining the shared .bb-btn modifiers. The ink
   CTA's text is #DFD6C8, not the shared .bb-btn--ink's #FBF8F1. */
.bb-cathero__cta {
	padding: 15px 32px;
	font-size: 15px;
}

.bb-cathero__cta--sage,
.bb-cathero__cta--sage:link,
.bb-cathero__cta--sage:visited,
.bb-cathero__cta--sage:hover { background: #C8C89A; color: #231F20; }

.bb-cathero__cta--ink,
.bb-cathero__cta--ink:link,
.bb-cathero__cta--ink:visited,
.bb-cathero__cta--ink:hover { background: #231F20; color: #DFD6C8; }

/* Bag artwork. Source held it at opacity 0 until the file decoded, then ran
   bbSlideInRight once. catering.js adds .is-in on load; the motion is CSS. */
@keyframes bbSlideInRight {
	from { opacity: 0; transform: translateX(60px); }
	to { opacity: 1; transform: translateX(0); }
}

.bb-cathero__bag {
	width: 100%;
	max-width: 900px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
}

.bb-cathero__bag.is-in {
	opacity: 1;
	animation: bbSlideInRight .7s ease-out;
}

/* --------------------------------------------------------------------------
   Featured catering carousel
   -------------------------------------------------------------------------- */
.bb-catfeat {
	position: relative;
	background: #E47245;
	border-bottom: 1.5px solid #231F20;
	overflow: visible;
	background-image: url("../../images/trim-peach-x.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	padding-bottom: 71px;
}

.bb-catfeat__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;
	pointer-events: none;
}

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

.bb-catfeat__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	background: #DFD6C8;
	padding: 0;
	overflow: hidden;
}

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

.bb-catfeat__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-catfeat__img.is-active { opacity: 1; }

/* Source re-rendered a single text block from a JS array. All three panels
   are in the markup now, stacked in one grid cell so the card height cannot
   jump between slides. */
/* All three panels are stacked in one grid cell so the card height cannot jump
   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 a single panel and let the card centre it; centring each panel
   inside the stack reproduces that. Same fix as Home's featured carousel. */
.bb-catfeat__body {
	position: relative;
	padding: 44px 46px 44px 8px;
	display: grid;
	align-items: center;
}

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

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

.bb-catfeat__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.bb-catfeat__p1,
.bb-catfeat__p2 {
	font-size: 16px;
	line-height: 1.6;
	color: #231F20;
	max-width: 52ch;
}

.bb-catfeat__p1 { margin: 0 0 12px; }
.bb-catfeat__p2 { margin: 0; padding-right: 100px; }

/* Absolute against .bb-oct__stroke, exactly as the source positioned it. */
.bb-catfeat__nav {
	position: absolute;
	right: 38px;
	bottom: 34px;
	display: flex;
	gap: 10px;
}

.bb-catfeat__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;
}

/* --------------------------------------------------------------------------
   Sticky section-jump bar + carousel
   Client-approved at all widths. See catering.js for the state machine.
   -------------------------------------------------------------------------- */
.bb-jump {
	position: sticky;
	top: var(--bb-bar-top, 78.5px);
	z-index: 50;
	background: #231F20;
	border-bottom: 1.5px solid #231F20;
}

.bb-jump__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
}

/* Hidden scrollbar, all three engines. */
.bb-jumpscroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bb-jumpscroll::-webkit-scrollbar { display: none; height: 0; }

/* scroll-behavior stays auto: the arrow handler drives its own smooth
   scrollTo() and needs an unmodified scrollLeft to fall back to. The source
   set this from JS as an inline !important; it is a stylesheet rule here. */
.bb-jump__track {
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 22px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: auto !important;
}

.bb-jump__link {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #DFD6C8;
	text-decoration: none;
	white-space: nowrap;
}

/* site.css sets a:hover{color:#C4552B}; the source's inline colour outranked
   it, so the links never changed colour on hover. Restated to match. */
.bb-jump__link:hover,
.bb-jump__link:visited { color: #DFD6C8; }

/* Icon-only chevrons. Hidden until the row actually overflows — catering.js
   adds .bb-on. */
.bb-jump__btn {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	/* Matched to Menu's arrow - see BugHerd #4 there. */
	width: 32px;
	height: 32px;
	padding: 0;
	align-items: center;
	justify-content: center;
	background: #DFD6C8;
	color: #231F20;
	border: 1.5px solid #231F20;
	border-radius: 999px;
	cursor: pointer;
	line-height: 0;
}

.bb-jump__btn--left { left: 2px; }
.bb-jump__btn--right { right: 2px; }

.bb-jump__btn:hover { background: #E47245; color: #FBF8F1; }
.bb-jump__btn.bb-on { display: flex; }

/* Source drew these as hand-written 16px polylines at stroke-width 3.25.
   inc/icons.php supplies the same glyph; the size and weight are CSS, which
   overrides the SVG's stroke-width presentation attribute. */
.bb-jump__btn .bb-icon {
	width: 16px;
	height: 16px;
	stroke-width: 3.25;
	display: block;
}

.bb-jump__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 200ms ease;
}

.bb-jump__fade--left {
	left: 0;
	background: linear-gradient(to right, #231F20 20%, rgba(35, 31, 32, 0));
}

.bb-jump__fade--right {
	right: 0;
	background: linear-gradient(to left, #231F20 20%, rgba(35, 31, 32, 0));
}

.bb-jump__fade.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   Catering menu
   -------------------------------------------------------------------------- */
.bb-catmenu {
	position: relative;
	scroll-margin-top: var(--bb-anchor);
	background: #C8C89A;
	border-top: 1.5px solid #231F20;
	border-bottom: 1.5px solid #231F20;
	overflow: visible;
}

.bb-catmenu__trim {
	position: absolute;
	bottom: -38px;
	left: 0;
	right: 0;
	height: 39px;
	background-image: url("../../images/trim-triangles-sage.png");
	background-size: auto 39px;
	background-repeat: repeat-x;
	pointer-events: none;
}

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

.bb-catmenu__masthead {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 48px;
	align-items: center;
}

.bb-catmenu__headrow {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 12px 0 8px;
}

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

.bb-catmenu__pill {
	display: inline-block;
	background: #231F20;
	color: #FBF8F1;
	border-radius: 999px;
	padding: 10px 22px;
}

.bb-catmenu__script {
	font-family: 'Fonseca Script', cursive;
	font-size: 32px;
	color: #231F20;
	margin-bottom: 20px;
}

.bb-catmenu__note { max-width: 78ch; }

.bb-catmenu__badgewrap {
	display: flex;
	justify-content: center;
	align-self: center;
}

.bb-catmenu__badge {
	width: 100%;
	max-width: 280px;
	height: auto;
	display: block;
}

/* The source's <div style="height:52px"> spacer between the masthead and the
   first section rule. Kept as an element so no margin can collapse it away. */
.bb-catmenu__gap { height: 52px; }

/* Zero-height jump target. The id must stay here and never move onto the
   padded section wrapper — that reintroduces a 64px dead gap under the bar. */
.bb-catmenu__anchor {
	height: 0;
	scroll-margin-top: var(--bb-anchor);
}

.bb-catmenu__rule {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
}

.bb-catmenu__mark {
	height: 20px;
	width: auto;
	display: block;
}

.bb-catmenu__section {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0;
}

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

.bb-catmenu__subtitle {
	margin-top: 0;
	margin-bottom: 24px;
}

/* The source put a 16px spacer div between the rule (margin-bottom 8px) and
   this banner, giving 24px of clearance. Adjacent sibling margins collapse,
   so the equivalent here is margin-top:24px, NOT 16px. */
.bb-catmenu__banner {
	background: #E47245;
	color: #FBF8F1;
	border: 2px solid #231F20;
	border-radius: 12px;
	padding: 22px 26px;
	margin-top: 24px;
	margin-bottom: 32px;
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .03em;
}

/* Row 0 only: three grouped cards, each with its own priced lines. */
.bb-catmenu__groups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 52px;
}

.bb-catmenu__grouptitle {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 21px;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 8px;
}

.bb-catmenu__line-item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 3px 0;
}

.bb-catmenu__line-label {
	font-size: 15px;
	color: #231F20;
}

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

/* The source declares font-size twice on this span (20px then 19px). The
   later value wins in the browser, so 19px is the rendered size. */
.bb-catmenu__line-price {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: #231F20;
}

/* Rows 1+ : two-column item list. */
.bb-catmenu__cols {
	columns: 2;
	column-gap: 56px;
	margin-bottom: 52px;
}

.bb-catmenu__item {
	break-inside: avoid;
	margin-bottom: 28px;
}

.bb-catmenu__itemhead {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.bb-catmenu__itemname {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 21px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.bb-catmenu__itemprice {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #231F20;
}

.bb-catmenu__itemdesc {
	font-size: 15px;
	line-height: 1.55;
	color: #231F20;
	margin: 6px 0 0;
}

.bb-catmenu__foot {
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1.5px solid #231F20;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	align-items: center;
}

/* One WYSIWYG field with the phone number as an inline link, so the type is
   set on the paragraph the editor emits. */
.bb-catmenu__footnote p {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #231F20;
	margin: 0;
}

.bb-catmenu__footnote a,
.bb-catmenu__footnote a:hover,
.bb-catmenu__footnote a:visited {
	color: #231F20;
	text-decoration: none;
	border-bottom: 2px solid #E47245;
}

.bb-catmenu__x { color: #E47245; }

.bb-catmenu__pdf {
	padding: 14px 30px;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Request catering
   -------------------------------------------------------------------------- */
.bb-catreq {
	scroll-margin-top: var(--bb-anchor);
	background: #DFD6C8;
	border-bottom: 1.5px solid #231F20;
}

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

.bb-catreq__grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 56px;
}

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

.bb-catreq__intro {
	margin-top: 0;
	margin-bottom: 28px;
	max-width: 52ch;
}

.bb-catreq__intro p { line-height: 1.65; }

.bb-catreq__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Square offset shadow — this pair of cards is not the octagon treatment. */
.bb-catcard { position: relative; }

.bb-catcard__shadow {
	position: absolute;
	inset: 0;
	transform: translate(6px, 6px);
	background: #231F20;
	pointer-events: none;
}

.bb-catcard__inner {
	position: relative;
	background: #DFD6C8;
	color: #231F20;
	border: 1.5px solid #231F20;
	border-radius: 0;
	padding: 24px 26px;
	text-align: center;
}

.bb-catcard__label { margin-bottom: 10px; }

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

.bb-catcard__phone:hover,
.bb-catcard__phone:visited,
.bb-catcard__email:hover,
.bb-catcard__email:visited { color: #231F20; }

.bb-catcard__phone { font-size: 24px; }
.bb-catcard__email { font-size: 20px; }

.bb-catreq__script {
	font-family: 'Fonseca Script', cursive;
	font-size: 56px;
	line-height: .9;
	color: #E47245;
	margin-top: 90px;
	width: 100%;
	text-align: center;
	transform: rotate(-6deg);
	transform-origin: center center;
}

/* --------------------------------------------------------------------------
   Catering request form
   Markup and styling only — no handler, no endpoint, no validation. The
   Gravity Forms embed replaces the two state blocks; see the template.

   The source's sent / notSent conditional twins are ONE element with a
   state class here. .bb-catform shows the form;
   .bb-catform.is-sent shows the confirmation. Nothing on the page adds
   .is-sent, so the success state is unreachable until Gravity Forms is wired
   — it is styled so the confirmation is ready the day it is.
   -------------------------------------------------------------------------- */
.bb-catform {
	background: #E5E3DA;
	padding: 38px 40px;
}

.bb-catform__success {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
}

.bb-catform.is-sent .bb-catform__success { display: flex; }
.bb-catform.is-sent .bb-catform__form { display: none; }

.bb-catform__icon {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #E47245;
	border: 2px solid #231F20;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FBF8F1;
}

.bb-catform__icon .bb-icon { width: 26px; height: 26px; }

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

.bb-catform__successbody {
	font-size: 17px;
	line-height: 1.6;
	color: #231F20;
	margin: 0;
}

.bb-catform__again {
	background: transparent;
	color: #231F20;
	padding: 12px 26px;
	font-size: 14px;
}

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

.bb-catform__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* The source put the message field in its own block below the grid with
   margin-top:18px. Same gap, one fewer wrapper. */
.bb-catform__cell--full { grid-column: 1 / -1; }

.bb-catform__label {
	display: block;
	margin-bottom: 7px;
}

/* .bb-field and .bb-select carry the fill, border, type and dropdown arrow.
   padding-right is deliberately excluded from the shared rule below so
   .bb-select's 42px arrow clearance survives. */
.bb-catform__input {
	/* .bb-field carries fill, border, focus ring, family, size and box metrics. */
	display: block;
}

.bb-catform__input:not(.bb-select) { padding-right: 14px; }

.bb-catform__textarea { resize: vertical; }

.bb-catform__submit {
	margin-top: 24px;
	width: 100%;
	padding: 16px 32px;
	font-size: 16px;
}


/* ==========================================================================
   Catering — responsive
   Desktop above 900px is client-approved and untouched. The three rules in
   "Containment" below apply at every width because they are measurement
   fixes, not layout changes: each was verified with the harness to leave the
   1440/1305 rendering unchanged.

   The jump bar is deliberately absent from this block. It is a horizontal
   scroller, approved at all widths, and its --bb-bar-top / --bb-anchor
   pinning is load-bearing (HANDOFF.md). Nothing below touches it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Containment — all widths
   -------------------------------------------------------------------------- */

/* The bag runs bbSlideInRight, which holds it at translateX(60px) for the
   first 700ms. While that transform applies the image sits outside the
   viewport and extends the document — this is what produced the intermittent
   3-5px PAGE-OVERFLOW the audit caught at 1200/1100/1024/900/768/640/480/400
   while the reveal was still running. `clip`, not `hidden`, per the brief:
   `hidden` would turn this section into a scroll container. */
.bb-cathero { overflow-x: clip; }

/* The hero is a grid and both cells carry long unbreakable content — the H1's
   longest word ("Murfreesboro,") and a 1920px-wide image. A grid item's
   automatic minimum size is its min-content, so at 320 the 1fr track resolved
   to 286.5px inside a 272px container and dragged both cells — and 11-18px of
   page overflow — out with it. min-width:0 holds the track to the container.
   The H1 also steps down at <=400 so the word still fits rather than clip. */
.bb-cathero__col,
.bb-cathero__bag { min-width: 0; }

/* Rotated -6deg, so its painted box is width*cos6 + height*sin6: 3px wider
   than the column on one line, 9px on two. That is the WIDER-THAN-PARENT the
   audit reported at every width from 1440 down. Shrink-wrapping the box to
   the text removes the width term, and the calc() reserves room for the
   height term when the script wraps. text-align stays centre and the box is
   auto-centred, so the glyphs land exactly where they did. */
.bb-catreq__script {
	width: fit-content;
	max-width: calc(100% - 26px);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1024 — tightening before the stack
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* The nav arrows are absolute over the body's bottom-right and p2 reserves
	   100px for them. Both card columns are ~460px here, so that reserve eats
	   a fifth of the measure; it trims back with the arrows. */
	.bb-catfeat__body { padding: 36px 38px 36px 8px; }
	.bb-catfeat__p2 { padding-right: 76px; }
	.bb-catfeat__nav { right: 26px; bottom: 26px; }

	.bb-catmenu__cols { column-gap: 40px; }
	.bb-catreq__grid { gap: 40px; }
}

/* --------------------------------------------------------------------------
   900 — the stack point
   .bb-split in site.css takes all four grids (hero, featured card, menu
   masthead, request) to one column here; everything below is the tidy-up.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* ---- Hero ----
	   32px + the h1's own 16px margin-top = the 48px gap under the header the
	   client asked for at this width. */
	.bb-cathero__inner { padding: calc(var(--bb-header-h, 101px) + 32px) 24px 80px; }
	.bb-cathero__grid { gap: 34px; }

	/* ROUND 2: this OVERRULES round 1, which kept the hero copy left-aligned on
	   the reasoning that centred prose reads badly at this measure. The client
	   reviewed that and asked for "ALL PAGES: center ALL content" and "ALL
	   HEROS center hero text". Centring is both halves — the text, and the
	   block itself: the measures below go to 100% and the CTA row centres. */
	.bb-cathero__col { max-width: 100%; margin-inline: auto; text-align: center; }
	.bb-cathero__intro p:first-child,
	.bb-cathero__intro p + p { max-width: 100%; margin-inline: auto; }
	.bb-cathero__ctas { justify-content: center; }

	/* Full column width would render a 900px bag on a 900px screen. */
	.bb-cathero__bag { max-width: 460px; }

	/* ---- Featured carousel ----
	   Client: "this section should have that same left/right as home".

	   The octagon's offset ink plate is translate(10px, 10px), so it hangs 10px
	   past the card's right edge. Symmetric 24px sides therefore READ as 24
	   left / 14 right. Home's .bb-featured__inner solves it with 25px right and
	   15px left — the extra 10 on the right is exactly the plate — giving an
	   equal 15px optical gutter on both sides. Those are Home's own numbers,
	   lifted unchanged, and they carry through 640 and 400 the way Home's do
	   rather than stepping with this page's gutter. */
	.bb-catfeat { padding-bottom: 52px; }
	.bb-catfeat__inner { padding: 64px 25px 64px 15px; }

	/* The divider between the two cells has to move with the stack. */
	.bb-catfeat__media {
		height: 320px;
		border-right: 0;
		border-bottom: 1.5px solid #231F20;
	}

	/* The 8px left inset only existed to sit against the 48px grid gap. Left
	   and bottom get the extra, matching Home's featured card: the octagon's
	   offset plate sits along the right and bottom edges. */
	.bb-catfeat__body { padding: 26px 22px 28px 28px; text-align: center; }
	.bb-catfeat__p2 { padding-right: 0; }

	/* A ch measure needs margin-inline:auto as well as text-align, or it
	   centres its lines inside a block that is still hard left. */
	.bb-catfeat__p1,
	.bb-catfeat__p2 { margin-inline: auto; }

	/* In flow now — as a third item in the one-column card it lands under the
	   copy instead of over it. Its own inset keeps the arrows off the
	   octagon's angled bottom-right corner and its offset plate. ROUND 2: the
	   slider nav centres with everything else. */
	.bb-catfeat__nav {
		position: static;
		justify-content: center;
		margin-top: 4px;
		padding: 0 26px 26px 28px;
	}

	/* ---- Catering menu ----
	   The masthead is page copy, not menu listing, so it centres. The listings
	   themselves — the section rules, the grouped price cards and the
	   two-column item lists below — are the client's EXCEPTION ("the Food Menu
	   sections on the Menu and Catering pages can stay as is") and are not
	   touched. */
	.bb-catmenu__inner { padding: 64px 24px; }
	.bb-catmenu__masthead { gap: 32px; text-align: center; }
	.bb-catmenu__headrow { justify-content: center; }
	.bb-catmenu__script { font-size: 26px; }
	.bb-catmenu__note { max-width: 100%; margin-inline: auto; }

	/* Wrapped onto two rows from here down, not just at 640. */
	.bb-catmenu__foot { justify-content: center; text-align: center; }
	.bb-catmenu__gap { height: 36px; }
	.bb-catmenu__badge { max-width: 220px; }
	.bb-catmenu__groups { gap: 26px; margin-bottom: 40px; }
	.bb-catmenu__cols { margin-bottom: 40px; }
	.bb-catmenu__section { font-size: 28px; }
	.bb-catmenu__banner { font-size: 18px; padding: 18px 20px; }

	/* ---- Request ----
	   The copy column centres; the form itself keeps its labels above
	   left-aligned fields, because a centred label over a full-width input
	   reads as a mistake rather than as centring. Flagged in the handover. */
	.bb-catreq__inner { padding: 88px 24px 72px; }
	.bb-catreq__grid { gap: 40px; }
	.bb-catreq__col { text-align: center; }
	.bb-catreq__intro { max-width: 100%; margin-inline: auto; }
	.bb-catreq__script { margin-top: 56px; font-size: 46px; }
	.bb-catform { padding: 30px 26px; }

	/* Same octagon-offset correction as the featured card, applied where the
	   container cannot take it: this grid also holds the copy column, and
	   shifting .bb-catreq__inner would drag that off centre too. 10px of right
	   margin on the octagon itself pulls the card in by exactly the width of
	   its plate, so the form reads with an equal 24px gutter each side. This
	   is the client's own suggestion from the Contact note (".bb-oct with
	   margin right 10px") applied here. */
	.bb-catreq__grid > .bb-oct { margin-right: 10px; }
}

/* --------------------------------------------------------------------------
   640
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	/* 20px sides from here down, matching the menu and request sections so
	   every band shares one gutter. The featured carousel is the exception —
	   it keeps Home's 25/15 pair, see the 900 block. The top inset still comes
	   from --bb-header-h and still lands the h1 48px under the header. */
	.bb-cathero__inner { padding: calc(var(--bb-header-h, 101px) + 32px) 20px 68px; }
	.bb-cathero__bag { max-width: 380px; }

	/* The two hero CTAs are white-space:nowrap pills; side by side they no
	   longer fit, so they go full width and stack rather than overflow. */
	.bb-cathero__ctas { flex-direction: column; align-items: stretch; }
	.bb-cathero__cta { text-align: center; }

	.bb-catfeat__inner { padding: 52px 25px 52px 15px; }
	.bb-catfeat__media { height: 260px; }
	.bb-catfeat__title { font-size: 27px; }

	.bb-catmenu__inner { padding: 52px 20px; }
	.bb-catmenu__section { font-size: 25px; }
	.bb-catmenu__badge { max-width: 190px; }

	/* Wrapped onto two rows, so it centres rather than leaving the note hard
	   left and the button hard right. */
	.bb-catmenu__foot { justify-content: center; text-align: center; }
	.bb-catmenu__footnote p { font-size: 19px; }

	.bb-catreq__inner { padding: 72px 20px 60px; }
	.bb-catreq__script { margin-top: 44px; font-size: 40px; }
	.bb-catform { padding: 26px 20px; }
	.bb-catform__title { font-size: 24px; }

	/* The email is a single unbreakable token. */
	.bb-catcard__phone { font-size: 22px; }
	.bb-catcard__email { font-size: 18px; overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   400 — phone. Also covers 320; no separate 320 breakpoint is needed once the
   H1 steps down here.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	/* 24px + the h1's 16px margin-top = the 40px phone gap under the header.
	   The fallback is the 89px the header actually measures here; the live
	   variable is what the rule runs on. */
	.bb-cathero__inner { padding: calc(var(--bb-header-h, 89px) + 24px) 16px 60px; }

	/* 44px (the 900px .bb-h1 value) puts "Murfreesboro," at 286px, wider than
	   the 272px content box at 320. !important is required to outrank the
	   .bb-h1 rule at the top of this file, which carries its own. */
	.bb-cathero__heading { font-size: 36px !important; }
	.bb-cathero__bag { max-width: 300px; }

	.bb-catfeat__inner { padding: 44px 25px 44px 15px; }
	.bb-catfeat__media { height: 210px; }
	.bb-catfeat__title { font-size: 24px; }
	.bb-catfeat__body { padding: 20px 16px 24px 22px; }
	.bb-catfeat__nav { padding: 0 20px 22px 22px; }

	.bb-catmenu__inner { padding: 44px 16px; }
	.bb-catmenu__script { font-size: 23px; }
	.bb-catmenu__section { font-size: 22px; }
	.bb-catmenu__banner { font-size: 16px; padding: 16px 14px; }
	.bb-catmenu__grouptitle,
	.bb-catmenu__itemname { font-size: 19px; }
	.bb-catmenu__badge { max-width: 160px; }
	.bb-catmenu__footnote p { font-size: 17px; }

	/* .bb-btn is white-space:nowrap sitewide; this label is long enough to
	   exceed the content box on its own, so it is allowed to wrap here only. */
	.bb-catmenu__pdf { white-space: normal; padding: 13px 22px; }

	.bb-catreq__inner { padding: 60px 16px 52px; }
	.bb-catreq__script { margin-top: 36px; font-size: 34px; }
	.bb-catform { padding: 22px 16px; }
	.bb-catcard__inner { padding: 20px 16px; }
	.bb-catcard__email { font-size: 17px; }
}

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

/* The featured octagon is even from 900 down (asymmetric inner padding), but
   at 1024 it is still square in its gutter, so the offset plate hangs 10px
   further right than the left gap. */
@media (max-width: 1024px) and (min-width: 901px) {
	.bb-catfeat__inner > .bb-oct { margin-right: 10px; }
}

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

/* Equal inner padding. Same correction as .bb-featured__body on Home: round 1
   made this asymmetric to compensate for the offset ink plate, but the plate
   sits OUTSIDE the box, and round 3 already seats it by offsetting the box
   itself. Compensating twice is what made the inner padding look lopsided.
   .bb-catfeat__inner's 15/25 above is the section gutter and stays as it is. */
@media (max-width: 900px) {
	.bb-catfeat__body { padding: 26px 26px 28px; }
}

@media (max-width: 400px) {
	.bb-catfeat__body { padding: 20px 20px 24px; }
}

/* ---- The octagon must never be taller than its own content ----
   Client, after the first real form submission: "on submit the bb-oct__shadow
   bg color does not keep the same height as the bb-oct."

   Cause: .bb-catreq__grid is a CSS grid, so the octagon is a grid ITEM and
   stretches to the row height, which the taller left column sets.
   .bb-oct__shadow is position:absolute inset:0 against .bb-oct, so it fills
   that stretched height - while .bb-oct__stroke (the cream face) only wraps
   its content. With the form in place the two matched by luck, because the
   form was the tallest thing in the row. Gravity Forms then replaces the form
   with a two-line confirmation and the mismatch appears as a dark slab.

   align-self:start makes the octagon height its own content at every state.
   It changes nothing before submission - measured, the octagon already sets
   the row height there, so stretch was already a no-op. */
.bb-catreq__grid > .bb-oct { align-self: start; }

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