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

   Reveal states: the source animated five elements from a JS observer that
   wrote element.style.opacity / element.style.transform. The hidden state and
   the .is-in end state are classes here; site.js's auto-wired [data-reveal]
   adds .is-in at the source's own 0.2 threshold, and jumps straight to it
   under prefers-reduced-motion.
   ========================================================================== */

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

.bb-screen { background: #DFD6C8; }

/* Page-specific heading sizes from the source's helmet block. The .bb-split /
   .bb-nav / .bb-hide-sm entries alongside them are already in site.css. */
@media (max-width: 900px) {
	.bb-h1 { font-size: 42px !important; }
	.bb-h2 { font-size: 30px !important; }
}

/* --------------------------------------------------------------------------
   Buttons
   This page authors its own body-CTA padding/size pair (14px 30px at 15px),
   which is not one of the five in components.css, plus two fill/ink
   combinations components.css does not carry. Base pill styling still comes
   from .bb-btn — only the deltas are here.
   -------------------------------------------------------------------------- */
.bb-loc-btn { padding: 14px 30px; font-size: 15px; }

/* Hero "Order Online": ink fill with TAN text, not the shared #FBF8F1. */
.bb-loc-btn--ink,
.bb-loc-btn--ink:link,
.bb-loc-btn--ink:visited,
.bb-loc-btn--ink:hover { background: #231F20; color: #DFD6C8; }

/* Coffee "Coffee Roasting": orange fill with INK text. */
.bb-loc-btn--orange-ink,
.bb-loc-btn--orange-ink:link,
.bb-loc-btn--orange-ink:visited,
.bb-loc-btn--orange-ink:hover { background: #E47245; color: #231F20; }

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

.bb-loc-hero__bagel {
	position: absolute;
	bottom: -160px;
	right: -160px;
	width: 520px;
	height: auto;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transform: translate(60px, 60px);
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.bb-loc-hero__bagel.is-in { opacity: 1; transform: translate(0, 0); }

/* Top padding is measured from the LIVE header height — site.js publishes
   --bb-header-h (~101px desktop, ~89px on phones) and HANDOFF.md is explicit
   that it must never be hardcoded; the fallback only covers the pre-script
   paint. The h1 carries its own 14px margin-top, so var + 50 + 14 is the 64px
   gap under the header the client asked for on desktop. */
.bb-loc-hero__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(var(--bb-header-h, 101px) + 50px) 24px 96px;
}

.bb-loc-hero__h1 {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 1.04;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-top: 14px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

.bb-loc-hero__script {
	font-family: 'Fonseca Script', cursive;
	font-weight: 400;
	font-size: 32px;
	text-transform: none;
	color: #231F20;
	margin-top: 16px;
	margin-right: 0;
	margin-bottom: 18px;
	margin-left: 0;
}

/* The paragraph's 28px trailing space rides on the wrapper so a WYSIWYG edit
   cannot lose it; components.css already zeroes the last child's margin. */
.bb-loc-hero__intro {
	font-size: 18px; /* its <p> is 18px; keeps the 70ch measure honest */
	margin-top: 0;
	margin-bottom: 28px;
	max-width: 70ch;
}

.bb-loc-hero__intro p { font-size: 18px; line-height: 1.6; color: #231F20; }

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

/* --------------------------------------------------------------------------
   Map + address card
   The iframe is map.html at the theme root: Leaflet + OpenStreetMap raster
   tiles, no API key. Its 640px frame height is the number the map's own
   -160px pan offset was tuned against — see HANDOFF.md before changing it.
   -------------------------------------------------------------------------- */
.bb-loc-map {
	position: relative;
	background: #E6E3D9;
	border-bottom: 1.5px solid #231F20;
}

.bb-loc-map__frame { height: 640px; position: relative; }

.bb-loc-map__iframe { width: 100%; height: 100%; border: 0; display: block; }

.bb-loc-map__cardwrap {
	position: absolute;
	top: 50%;
	left: max(24px, calc((100vw - 1240px) / 2 + 24px));
	transform: translateY(-50%);
	z-index: 5;
}

/* The 18px octagon variant from components.css (.bb-oct .bb-oct--18). */
.bb-loc-card { width: 33vw; max-width: 560px; }

/* #E5E3DB, as authored — a shade off the design system's cream (#E6E3D9). */
.bb-loc-card__inner { background: #E5E3DB; padding: 28px; }

.bb-loc-card__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

/* Bespoke two-tone pin, sized here rather than with width/height attributes. */
.bb-loc-card__pin { width: 18px; height: 18px; flex: none; display: block; }

/* .bb-label supplies the type; only the colour differs. */
.bb-loc-card__place { color: #E47245; }

.bb-loc-card__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 28px;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 14px;
}

.bb-loc-card__addr {
	display: block;
	font-size: 16px;
	line-height: 1.65;
	margin-top: 0;
	margin-bottom: 14px;
	color: #231F20;
	text-decoration: none;
}

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

.bb-loc-card__phone {
	display: inline-block;
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: #231F20;
	text-decoration: none;
	margin-bottom: 18px;
}

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

.bb-loc-card__rule {
	height: 5px;
	border-top: 1.5px solid #231F20;
	border-bottom: 1.5px solid #231F20;
	margin-bottom: 16px;
}

.bb-loc-card__hoursblock { margin-bottom: 22px; }

.bb-loc-card__hourslabel { margin-bottom: 10px; }

.bb-loc-card__hours {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 16px;
	padding: 4px 0;
}

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

.bb-loc-card__hoursval { font-weight: 700; }

/* --------------------------------------------------------------------------
   Shared shape of the four content bands
   -------------------------------------------------------------------------- */
.bb-loc-section__inner { max-width: 1240px; margin: 0 auto; padding: 88px 24px; }

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

.bb-loc-heading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.1;
	text-transform: uppercase;
	margin-top: 12px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
}

.bb-loc-copy p { font-size: 17px; line-height: 1.65; color: #231F20; }

/* Per-band measure and trailing space. Each wrapper carries the gap the
   source authored on its final paragraph. */
.bb-loc-brunch__body { margin-top: 0; margin-bottom: 0; max-width: 60ch; }
.bb-loc-coffee__body { margin-top: 0; margin-bottom: 28px; max-width: 60ch; }
.bb-loc-donuts__body { margin-top: 0; margin-bottom: 0; max-width: 60ch; }
.bb-loc-cater__body  { margin-top: 0; margin-bottom: 30px; max-width: 70ch; }

/* --------------------------------------------------------------------------
   Framed photo with its offset ink plate.
   Three instances: two enter from the right, one from the left, and the
   donuts frame is 40px shorter.
   -------------------------------------------------------------------------- */
.bb-loc-shot {
	position: relative;
	opacity: 0;
	transition: opacity 600ms cubic-bezier(.22, .61, .36, 1), transform 600ms cubic-bezier(.22, .61, .36, 1);
}

.bb-loc-shot--right { transform: translateX(60px); }
.bb-loc-shot--left { transform: translateX(-60px); }

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

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

/* The left-entering band offsets its plate to the left instead. */
.bb-loc-shot--left .bb-loc-shot__shadow { transform: translate(-10px, 10px); }

.bb-loc-shot__frame {
	position: relative;
	height: 440px;
	border: 1.5px solid #231F20;
	overflow: hidden;
}

.bb-loc-shot__frame--400 { height: 400px; }

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

/* --------------------------------------------------------------------------
   Your Local Spot for Brunch
   -------------------------------------------------------------------------- */
.bb-loc-brunch { position: relative; background: #E47245; }

/* --------------------------------------------------------------------------
   Fresh Coffee
   Sawtooth trims sit outside the band, so it must stay overflow:visible.
   -------------------------------------------------------------------------- */
.bb-loc-coffee {
	position: relative;
	background: #C8C89A;
	color: #231F20;
	overflow: visible;
}

.bb-loc-coffee__trim-top,
.bb-loc-coffee__trim-bottom {
	position: absolute;
	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-loc-coffee__trim-top { top: -38px; transform: scaleY(-1); }
.bb-loc-coffee__trim-bottom { bottom: -38px; }

/* --------------------------------------------------------------------------
   Fresh Donuts and Bagels
   -------------------------------------------------------------------------- */
.bb-loc-donuts {
	background: #DFD6C8;
	border-top: 1.5px solid #231F20;
	border-bottom: 1.5px solid #231F20;
}

/* --------------------------------------------------------------------------
   Breakfast Catering
   The grid is a bare two-column grid in the source — no .bb-split, so it does
   not collapse at 900px. Kept as authored.
   -------------------------------------------------------------------------- */
.bb-loc-cater { background: #DFD6C8; }

.bb-loc-cater__grid { display: grid; grid-template-columns: 1fr 1fr; }

.bb-loc-cater__art {
	position: relative;
	background: #E47245;
	min-height: 440px;
	overflow: visible;
	z-index: 0;
}

/* Explicit width AND height: an absolutely positioned img left at height:auto
   takes its intrinsic height and ignores the offsets around it. */
.bb-loc-cater__callout {
	position: absolute;
	top: 98px;
	right: -82px;
	left: auto;
	width: 465px;
	height: 190px;
	z-index: 3;
	opacity: 0;
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1);
}

.bb-loc-cater__callout.is-in { opacity: 1; }

.bb-loc-cater__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-orange-vertical-flip.png"), linear-gradient(#E47245, #E47245);
	background-size: 22px auto, 3px 100%;
	background-position: left 3px center, left center;
	background-repeat: repeat-y, no-repeat;
}

.bb-loc-cater__mascot {
	position: absolute;
	bottom: 0;
	top: 30px;
	right: 40px;
	left: auto;
	height: calc(100% - 30px);
	width: auto;
	max-width: calc(100% - 80px);
	max-height: calc(100% - 30px);
	object-fit: contain;
	object-position: right bottom;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transform: translateX(-80px);
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}

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

.bb-loc-cater__body-col {
	padding: 230px max(24px, calc((100vw - 1240px) / 2 + 24px)) 150px 56px;
}


/* ==========================================================================
   Locations — responsive
   Desktop above 900px is client-approved; the rules below only tighten what
   was already breaking, then stack at the shared 900px point.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal overflow — the page-wide bug, fixed once, for every width.

   .bb-loc-shot--right sits at translateX(60px) until site.js adds .is-in, and
   .bb-loc-shot__shadow adds another 10px on top of that. While the pre-reveal
   transform applies the framed photo is outside the viewport and widened the
   document by 38px at 1305 and 46px from 1200 all the way down to 320. Per
   the brief the fix belongs on the hosting SECTION as overflow-x: clip — not
   hidden, which would create a scroll container.

   Coffee's sawtooth trims sit 38px ABOVE and BELOW its band, so the vertical
   axis has to stay visible. overflow-x: clip paired with an explicit
   overflow-y: visible is the one combination CSS keeps as authored (visible
   alongside anything other than clip is forced to auto), so the trims still
   hang out of the band while the reveal is clipped horizontally.
   -------------------------------------------------------------------------- */
.bb-loc-brunch,
.bb-loc-coffee,
.bb-loc-donuts,
.bb-loc-cater {
	overflow-x: clip;
	overflow-y: visible;
}

/* --------------------------------------------------------------------------
   1305 / 1200 / 1024 — tightening before anything stacks
   -------------------------------------------------------------------------- */
@media (max-width: 1305px) {
	/* The card is 33vw. Below the 1240px container that starts eating the
	   measure its 16px address lines need, so it takes a floor instead. */
	.bb-loc-card { width: min(38vw, 460px); }
}

@media (max-width: 1200px) {
	/* Round 1 cut the top clearance here by hand. Round 2 asks for ONE
	   consistent gap across the pages, so the inset now comes from the live
	   header height at every width above the stack point and only the bottom
	   padding steps. (The header still measures 101px at 1200 and 1024, so the
	   hand-cut 132px was reading ~19px tighter than the desktop rule.) */
	.bb-loc-hero__inner { padding: calc(var(--bb-header-h, 101px) + 50px) 24px 84px; }

	/* First step of the bagel climb-down. It is z-index:1 over the copy, and
	   at 520px its left edge had reached the end of the intro's 70ch measure;
	   the paragraph's right-hand words were disappearing under it. */
	.bb-loc-hero__bagel { width: 420px; bottom: -140px; right: -140px; }
	.bb-loc-hero__intro { max-width: 62ch; }

	/* The script line is the widest thing in the hero — one unbroken 846px
	   line at 32px, and it has no measure of its own — so it, not the intro,
	   is what the bagel has to clear. Dropping it to 26px is what lets the
	   bagel keep enough of itself on screen to trip its own reveal (see the
	   note in the 900 block) instead of being pushed off the edge. This value
	   carries all the way down; the 900 block no longer restates it. */
	.bb-loc-hero__script { font-size: 26px; }

	.bb-loc-split { gap: 44px; }

	.bb-loc-card { width: min(42vw, 420px); }

	/* The callout is decorative art that overhangs the column boundary by
	   design. Past this width the overhang lands on the catering heading, so
	   it scales down with the column. 465x190 is its aspect ratio; both axes
	   stay explicit because an absolutely positioned img needs them. */
	.bb-loc-cater__callout { width: 380px; height: 155px; top: 84px; right: -64px; }

	/* 230px of top padding was holding the copy level with a callout that is
	   no longer sitting that far down. */
	.bb-loc-cater__body-col { padding: 170px 24px 110px 44px; }
}

@media (max-width: 1024px) {
	.bb-loc-section__inner { padding: 72px 24px; }

	/* Second step: the script line is the widest thing in the hero and has no
	   measure of its own, so the bagel has to clear it rather than the other
	   way round. */
	.bb-loc-hero__bagel { width: 380px; bottom: -110px; right: -110px; }
	.bb-loc-hero__intro { max-width: 50ch; }

	.bb-loc-shot__frame { height: 380px; }
	.bb-loc-shot__frame--400 { height: 350px; }

	.bb-loc-card { width: min(46vw, 400px); }
	.bb-loc-card__inner { padding: 22px; }

	.bb-loc-cater__art { min-height: 400px; }
	.bb-loc-cater__callout { width: 320px; height: 131px; top: 70px; right: -48px; }
	.bb-loc-cater__body-col { padding: 126px 24px 88px 40px; }
}

/* --------------------------------------------------------------------------
   900 — the shared stack point
   .bb-loc-split already collapses here through site.css's .bb-split rule. The
   map overlay and the catering grid are the two that do not, and both are
   handled explicitly below.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* ---- Hero ----
	   34px + the h1's own 14px margin-top = the 48px gap under the header the
	   client asked for at this width. The extra BOTTOM padding is not slack:
	   it is the corner the bagel sits in, see below. */
	/* ROUND 2: "ALL PAGES: center ALL content" / "ALL HEROS center hero text".
	   Both halves — the text centres AND the intro's ch measure gets
	   margin-inline:auto, without which it would centre its lines inside a
	   block still sitting hard left. */
	.bb-loc-hero__inner {
		padding: calc(var(--bb-header-h, 101px) + 34px) 24px 165px;
		text-align: center;
	}

	.bb-loc-hero__intro,
	.bb-loc-hero__intro p { font-size: 17px; }

	.bb-loc-hero__intro { margin-inline: auto; }
	.bb-loc-hero__ctas { justify-content: center; }

	/* Decoration does not get to drive the layout: at 520px the bagel reached
	   right across a narrow hero and the intro's last lines ran underneath it
	   (it is z-index:1, so it paints OVER the copy). It shrinks into its
	   corner and the intro takes a measure that clears what is left.

	   The size and the two offsets are a matched set, not free numbers. The
	   reveal is site.js's shared IntersectionObserver at a 0.2 threshold, and
	   the hero is overflow:hidden, so the observer only ever sees the part of
	   the bagel still inside the hero. Pull it too far into the corner and the
	   visible area drops under 20%, .is-in never lands and the bagel stays at
	   opacity:0 — silently, with no layout symptom. Roughly 70% on each axis
	   (~0.5 of the area) keeps a comfortable margin over the threshold. */
	.bb-loc-hero__bagel { width: 320px; bottom: -90px; right: -90px; }
	.bb-loc-hero__intro { max-width: 46ch; }

	/* ---- Map + address card ----
	   The card stops being an overlay and takes a row of its own under the
	   map. At 33-46vw it was down to about 300px and the address, the hours
	   rows and Get Directions no longer fitted; stacking here also matches
	   the rest of the site. The section's own #E6E3D9 is the surface it lands
	   on, so no copy ends up sitting directly on the map tiles.

	   map.html is untouched — the iframe only gets a shorter box. Its 640px
	   height is the number the map's internal -160px pan was tuned against,
	   and that pan is a HORIZONTAL offset, so height alone is safe. ---- */
	.bb-loc-map__frame { height: auto; }

	.bb-loc-map__iframe { height: 420px; }

	.bb-loc-map__cardwrap {
		position: static;
		transform: none;
		top: auto;
		left: auto;
		box-sizing: border-box; /* width:100% + side padding, on content-box */
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 34px 24px 44px;
	}

	.bb-loc-card { width: 100%; max-width: 520px; }

	/* The card's copy centres with everything else. The hours rows are
	   deliberately left out: they are dot-leader rows (day … time) whose whole
	   point is that the two ends anchor to opposite edges, and they are flex
	   rows, so text-align does not reach them anyway. */
	.bb-loc-card__inner { text-align: center; }
	.bb-loc-card__eyebrow { justify-content: center; }

	/* ---- The three photo bands ----
	   Copy column centred, photo column untouched. The ch measures need
	   margin-inline:auto as well as text-align. */
	.bb-loc-section__inner { padding: 64px 24px; }
	.bb-loc-split { gap: 36px; }

	.bb-loc-split > div:not(.bb-loc-shot) { text-align: center; }

	.bb-loc-brunch__body,
	.bb-loc-coffee__body,
	.bb-loc-donuts__body,
	.bb-loc-cater__body { margin-inline: auto; }
	.bb-loc-shot__frame { height: 320px; }
	.bb-loc-shot__frame--400 { height: 300px; }

	/* The offset ink plate sits 10px right of the frame (left for the coffee
	   band). One column means the frame is now full width, so each shot keeps
	   a 10px inset on the side its plate falls on — otherwise the plate is
	   flush to the viewport edge and reads as a rendering artefact. */
	.bb-loc-shot { margin-right: 10px; }
	.bb-loc-shot--left { margin-right: 0; margin-left: 10px; }

	/* ---- Breakfast Catering ----
	   The source grid carries no .bb-split, so nothing collapsed it. It is the
	   same two-column split as the bands above it and stacks with them.

	   ROUND 2 — CLIENT SUGGESTION, TAKEN: "it may be that we put JUST the
	   Catering packages in the orange once this section stacks for mobile -
	   and then put the guy at the bottom right of the text column."

	   Round 1 kept both the callout and the mascot inside the orange block and
	   separated them vertically, which needed a 360px block and still read as
	   two pieces of art crowding one another. Now:

	     - the orange block holds the callout ALONE, in flow and centred, so
	       the block sizes itself to the artwork instead of to a guessed
	       min-height;
	     - the mascot moves to the bottom-right of the tan text column.

	   The mascot is a CHILD of .bb-loc-cater__art in the markup and the
	   templates are not mine to touch, so it is re-anchored instead: the art
	   block goes position:static and the GRID becomes the containing block, at
	   which point bottom/right on the mascot resolve against the bottom of the
	   whole stacked grid — i.e. the bottom of the text column. The callout no
	   longer needs a positioned ancestor because it is in flow. */
	.bb-loc-cater__grid { position: relative; grid-template-columns: 1fr; }

	.bb-loc-cater__art {
		position: static;
		min-height: 0;
		box-sizing: border-box;
		padding: 44px 24px 46px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* In flow and centred. height:auto is safe once width is explicit — a
	   replaced element keeps its ratio. The inset offsets are reset because
	   they would otherwise still apply if anything re-positioned this. */
	.bb-loc-cater__callout {
		position: static;
		width: min(360px, 100%);
		height: auto;
		top: auto;
		right: auto;
		left: auto;
	}

	/* The sawtooth divided the two columns down a vertical edge. Stacked, that
	   edge is the bottom of the orange block — but the trim div is a child of
	   an art block that is no longer a containing block, so it cannot be
	   absolutely placed against it any more. It becomes a background on the
	   TOP edge of the text column instead, which is the same boundary. The
	   -flipped asset is the teeth-pointing-down variant, so no scaleY is
	   needed; .bb-menu-band__trim--bottom uses the same file the same way. */
	.bb-loc-cater__trim { display: none; }

	/* 22px of the top padding is the trim strip; 56px is the copy inset above
	   it. The bottom reserve is for the mascot. Centred, per round 2. */
	.bb-loc-cater__body-col {
		padding: 78px 24px 190px;
		text-align: center;
		background-image: url("../../images/trim-triangles-orange-flipped.png");
		background-repeat: repeat-x;
		background-position: left top;
		background-size: auto 22px;
	}

	/* Bottom-right of the text column. It keeps its slide-in: still fully in
	   view when the observer fires, so the 0.2 threshold is not in play. */
	.bb-loc-cater__mascot {
		top: auto;
		bottom: 0;
		right: 20px;
		left: auto;
		width: auto;
		height: 190px;
		max-width: calc(100% - 40px);
		max-height: none;
		transform: translateX(-48px);
	}
}

/* --------------------------------------------------------------------------
   640 — small tablet / large phone
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	/* There is no longer a right-hand column free beside the copy, so the
	   bagel takes a band of its own under the CTAs — which is what the deeper
	   bottom padding is for, and why it tucks less far into the corner than at
	   900 (it has to keep ~20% of itself in view for the reveal, including the
	   extra 60px the pre-reveal transform adds). */
	.bb-loc-hero__inner { padding: calc(var(--bb-header-h, 101px) + 34px) 20px 225px; }
	.bb-loc-hero__bagel { width: 240px; bottom: -26px; right: -26px; }

	.bb-loc-map__iframe { height: 360px; }

	.bb-loc-section__inner { padding: 56px 20px; }
	.bb-loc-shot__frame { height: 280px; }
	.bb-loc-shot__frame--400 { height: 260px; }

	.bb-loc-cater__art { padding: 36px 20px 38px; }
	.bb-loc-cater__callout { width: min(300px, 100%); }
	.bb-loc-cater__body-col { padding: 72px 20px 172px; }
	.bb-loc-cater__mascot { height: 170px; right: 16px; }
}

/* --------------------------------------------------------------------------
   400 / 320 — phone. 320 is the floor and must not overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	/* At 400 the copy runs the full width, so there is no right-hand corner
	   left beside it — the bagel gets a band of its own under the CTAs
	   instead, which is what the 150px of bottom padding is for. */
	.bb-loc-hero__inner { padding: calc(var(--bb-header-h, 89px) + 26px) 16px 180px; }
	.bb-loc-hero__bagel { width: 200px; bottom: -26px; right: -26px; }
	.bb-loc-hero__intro { max-width: none; }

	/* Body CTAs: the shared .bb-btn is white-space:nowrap, so the pills give
	   up side padding rather than wrap. Type stays 15px, above the floor. */
	.bb-loc-btn { padding: 13px 22px; }

	.bb-loc-map__iframe { height: 300px; }
	.bb-loc-map__cardwrap { padding: 26px 16px 34px; }
	.bb-loc-card__inner { padding: 18px; }
	.bb-loc-card__title { font-size: 24px; }
	.bb-loc-card__addr,
	.bb-loc-card__hours { font-size: 15px; }

	.bb-loc-section__inner { padding: 48px 16px; }
	.bb-loc-shot__frame { height: 240px; }
	.bb-loc-shot__frame--400 { height: 220px; }

	.bb-loc-cater__art { padding: 30px 16px 32px; }
	.bb-loc-cater__callout { width: min(250px, 100%); }
	.bb-loc-cater__body-col { padding: 66px 16px 146px; }
	.bb-loc-cater__mascot { height: 144px; right: 12px; }
}

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

/* Octagon optical gutter. Client: "didn't on Locations". The card sat square
   in its gutter, so its offset ink plate hung 8px further right than the left
   gap. .bb-oct--18 uses an 8px plate. Same correction as Contact/Catering. */
@media (max-width: 900px) {
	.bb-loc-card { margin-right: 8px; }
}

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

/* Client: "need more room below the photo, it's touching the zig zag."
   The ink plate is offset +10px DOWN and the section had no bottom padding, so
   the plate ended 10px BELOW the section's own edge and overlapped the
   sawtooth.

   MUST BE MARGIN, NOT PADDING. .bb-loc-shot__shadow is position:absolute with
   inset:0 against .bb-loc-shot, so it is sized by that element's PADDING box.
   A padding-bottom here grows the plate with the box - which is exactly the
   bug the client caught: the dark plate hung 40px below both photographs
   instead of hugging them. Margin sits outside the padding box, so the plate
   keeps the frame's own size and the space lands below it where it is wanted. */
@media (max-width: 900px) {
	.bb-loc-shot { margin-bottom: 40px; }
}

@media (max-width: 400px) {
	.bb-loc-shot { margin-bottom: 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-loc-hero__script { line-height: 1.688; }

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