/*
Theme Name: Bottle Buddeez
Author: ROM Florida
Description: Custom block theme for Bottle Buddeez, Durham Region delivery. Edited in code; see NOTES.md in the project repo.
Version: 0.1.0
Requires at least: 6.8
Requires PHP: 8.1
Text Domain: bottle-buddeez
*/

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Sizes are in rem (16px = 1rem = the artwork at 1440). Above 1440 the root grows
   at half the rate of the window (1920 = 1.17x), capped at 1.2x. */
html { --bb-vw: 1vw; font-size: 16px; scroll-behavior: smooth; }
@media (min-width: 1441px) {
	/* 1vw at 1440 is 0.9rem; tying vw sizes to rem keeps them in step with the root. */
	html { --bb-vw: 0.9rem; font-size: min(calc(8px + 100vw / 180), 19.2px); }
}
body {
	margin: 0;
	background: #fdfcf6;
	color: #2a1a0b;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #9d670d; }
:focus-visible { outline: 0.1875rem solid #e4b61f; outline-offset: 0.1875rem; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.screen-reader-text {
	position: absolute !important; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bb-wrap { max-width: 82.5rem; margin-inline: auto; padding-inline: clamp(1.25rem, calc(4 * var(--bb-vw)), 3.5rem); }
.bb-stack-2 { display: grid; gap: 0.125rem; }
.bb-stack-4 { display: grid; gap: 0.25rem; }
.bb-break { word-break: break-all; }

.bb-c-gold { color: #e4b61f; }
.bb-c-brown { color: #603912; }
.bb-c-teal { color: #055d65; }
.bb-c-brown4 { color: #5a4632; }

/* Grounds */
.bb-dots-fine {
	background-color: #fdfcf6;
	background-image: radial-gradient(circle, rgba(96,57,18,.2) 0.05rem, transparent 0.075rem), radial-gradient(circle, rgba(157,103,13,.16) 0.0625rem, transparent 0.0875rem);
	background-size: 1.4375rem 1.1875rem, 3.8125rem 3.3125rem;
}
.bb-dots {
	background-color: #fdfcf6;
	background-image: radial-gradient(circle, rgba(96,57,18,.18) 0.0875rem, transparent 0.1125rem);
	background-size: 1.375rem 1.375rem;
}
.bb-lines {
	background-color: #055d65;
	background-image: repeating-linear-gradient(0deg, transparent 0 1.875rem, rgba(255,255,255,.05) 1.875rem 2rem);
}

/* ---------- Type ---------- */

.bb-display { margin: 0; font-weight: 900; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.bb-display > span { display: block; }
.bb-h2 { margin: 0; font-weight: 900; font-size: clamp(2rem, calc(3.4 * var(--bb-vw)), 3.125rem); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.bb-h2--sm { margin: 0; font-weight: 900; font-size: clamp(1.875rem, calc(3.1 * var(--bb-vw)), 2.875rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.bb-num { margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: .16em; color: #9d670d; }
.bb-num--6 { margin-bottom: 0.375rem; }
.bb-num--0 { margin-bottom: 0; }
.bb-hand { margin: 0; font-family: "Amatic SC", cursive; font-weight: 700; }
.bb-hand--xl { font-size: clamp(2.5rem, calc(4 * var(--bb-vw)), 3.5rem); line-height: .95; color: #9d670d; }
.bb-lede { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #3d2a17; max-width: 46ch; }
.bb-lede strong { color: #2a1a0b; }
.bb-label { font-size: 0.6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9d670d; }
.bb-label--gold { color: #e4b61f; }
.bb-note { margin: 1rem 0 0; font-size: 0.8125rem; color: #5a4632; }
.bb-tag { justify-self: start; font-size: 0.6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: #2a1a0b; color: #e4b61f; padding: 0.25rem 0.5rem; }

.bb-textlink {
	justify-self: start; display: inline-flex; align-items: center; gap: 0.625rem;
	font-weight: 800; color: #603912; border-bottom: 0.1875rem solid #e4b61f; padding-bottom: 0.25rem;
}
.bb-textlink:hover { color: #2a1a0b; }

/* Section intro: heading block left, lede right */
.bb-intro {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 27.5rem), 1fr));
	gap: 1.25rem 4rem; align-items: end; margin-bottom: 3.5rem;
}
.bb-intro--48 { margin-bottom: 3rem; }
.bb-intro--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 1.5rem 4rem; margin-bottom: 0; }

/* ---------- Buttons ---------- */

.bb-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bb-btn {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 1.75rem;
	min-height: 3.625rem; padding: 0 1.375rem; border-radius: 0.25rem;
	font-weight: 800; font-size: 1.0625rem; line-height: 1.2;
}
.bb-btn svg { flex: none; }
.bb-btn__aside { font-feature-settings: 'tnum' 1; white-space: nowrap; }
.bb-btn--teal { background: #055d65; color: #fff; box-shadow: 0 0.25rem 0 #03393e; }
.bb-btn--teal:hover { background: #077580; color: #fff; }
.bb-btn--gold { background: #e4b61f; color: #2a1a0b; box-shadow: 0 0.25rem 0 #9d670d; }
.bb-btn--gold:hover { background: #f0c63a; color: #2a1a0b; }
.bb-btn--ink { background: #2a1a0b; color: #fdfcf6; box-shadow: 0 0.25rem 0 #000; white-space: nowrap; }
.bb-btn--ink:hover { background: #603912; color: #fff; }
.bb-btn--cream { background: #fdfcf6; color: #055d65; box-shadow: 0 0.25rem 0 #03393e; }
.bb-btn--cream:hover { background: #fff; color: #03393e; }
.bb-btn--cream-brown { background: #fdfcf6; color: #603912; box-shadow: 0 0.25rem 0 #2a1a0b; }
.bb-btn--cream-brown:hover { background: #fff; color: #2a1a0b; }
.bb-btn--ghost { background: transparent; color: #fff; border: 0.125rem solid #fff; white-space: nowrap; }
.bb-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.bb-btn--lg { min-height: 3.75rem; }
.bb-btn--xl { display: flex; min-height: 3.875rem; font-size: 1.125rem; }
.bb-btn--md { min-height: 3.5rem; font-size: 1rem; }
.bb-btn--sm { min-height: 3.125rem; padding: 0 1.25rem; gap: 1.25rem; font-size: 0.9375rem; box-shadow: 0 0.1875rem 0 #03393e; }
.bb-btn--xs { min-height: 2.875rem; padding: 0 1.125rem; gap: 0.625rem; font-size: 0.875rem; box-shadow: none; white-space: nowrap; }
.bb-mega__aside .bb-btn { font-size: 1rem; }
.bb-btn--block { display: flex; padding: 0 1.125rem; }
.bb-btn--wide { min-width: 15rem; }
.bb-btn--wide260 { min-width: 16.25rem; }

.bb-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bb-chips span { border: 0.125rem solid #2a1a0b; padding: 0.4375rem 0.875rem; font-weight: 800; font-size: 0.875rem; background: #fff; }
.bb-chips--sm span { padding: 0.3125rem 0.75rem; font-size: 0.8125rem; background: none; }

/* ---------- Images ---------- */

.bb-frame { background: #efeae0; border: 0.1875rem solid #2a1a0b; overflow: hidden; }
.bb-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bb-img--missing { background: #efeae0; }
[data-zoom]:hover .bb-img { transform: scale(1.06); }

/* ---------- Top bar + header ---------- */

.bb-topbar { background: #2a1a0b; color: #fdfcf6; font-size: 0.7812rem; letter-spacing: .08em; text-transform: uppercase; }
.bb-topbar__in { padding-block: 0.5625rem; display: flex; flex-wrap: wrap; gap: 0.375rem 1.75rem; align-items: center; }
.bb-topbar__towns { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.bb-topbar__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #e4b61f; }
.bb-topbar__hours { color: #e6d6bf; white-space: nowrap; }
.bb-topbar__mail { margin-left: auto; color: #e6d6bf; text-transform: none; letter-spacing: .02em; }

.bb-part-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0); z-index: 50; }
.bb-header { position: relative; background: #fdfcf6; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-header__in { padding-block: 0.875rem; display: flex; align-items: center; gap: 1.25rem 2.25rem; }
.bb-header__logo { display: flex; flex: none; }
.bb-header__logo img { display: block; height: clamp(1.875rem, calc(3.2 * var(--bb-vw)), 2.75rem); width: auto; }

.bb-nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: 1.625rem; font-size: 0.9375rem; font-weight: 600; }
.bb-nav__link {
	display: flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0.5rem 0 0.3125rem;
	background: none; border: 0; border-bottom: 0.1875rem solid transparent; cursor: pointer;
}
.bb-nav__link:hover { color: #9d670d; }
.bb-nav__link svg { transition: transform .2s; }
.bb-nav__link[aria-expanded="true"] { border-bottom-color: #e4b61f; }
.bb-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.bb-page-areas .bb-nav__link--areas,
.bb-page-services .bb-nav__link--services,
.bb-page-about .bb-nav__link--about,
.bb-page-faq .bb-nav__link--about,
.bb-page-blog .bb-nav__link--about,
.bb-page-contact .bb-nav__link--about { border-bottom-color: #e4b61f; }

.bb-header__actions { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.bb-header__phone { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1rem; font-feature-settings: 'tnum' 1; white-space: nowrap; }
.bb-header__order {
	display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 1.25rem;
	background: #055d65; color: #fff; font-weight: 800; font-size: 0.9375rem;
	border-radius: 0.25rem; box-shadow: 0 0.1875rem 0 #03393e; white-space: nowrap;
}
.bb-header__order:hover { background: #077580; color: #fff; }
.bb-header__burger {
	display: none; align-items: center; gap: 0.625rem; height: 2.875rem; padding: 0 0.875rem;
	background: #2a1a0b; color: #fdfcf6; border: 0; border-radius: 0.25rem;
	font-weight: 800; font-size: 0.9375rem; cursor: pointer;
}
.bb-header__burger:hover { background: #603912; }

/* Mega menu */
.bb-mega {
	position: absolute; left: 0; right: 0; top: 100%; margin-top: -0.1875rem; z-index: 31;
	background: #fdfcf6; border-top: 0.1875rem solid #2a1a0b; border-bottom: 0.1875rem solid #2a1a0b;
	box-shadow: 0 1.5rem 2.5rem rgba(42,26,11,.18);
}
.bb-mega__in { padding-block: 2rem 2.25rem; display: grid; grid-template-columns: minmax(0, 1fr) 21.25rem; gap: 2.5rem; }
.bb-mega__main { min-width: 0; }
.bb-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.875rem; border-bottom: 0.125rem solid #2a1a0b; }
.bb-mega__hand { font-size: 2.125rem; line-height: 1; color: #9d670d; }
.bb-mega__all { font-size: 0.875rem; font-weight: 800; color: #603912; border-bottom: 0.125rem solid #e4b61f; white-space: nowrap; }
.bb-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 0.0625rem solid #d8cdb9; }
.bb-mega__svc {
	display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; align-content: start;
	padding: 1.125rem 1.125rem 1.25rem; border-right: 0.0625rem solid #d8cdb9; border-bottom: 0.0625rem solid #d8cdb9;
	transition: background .15s;
}
.bb-mega__svc svg { margin-top: 0.0625rem; }
.bb-mega__svc:hover, .bb-mega__row:hover, .bb-mobile__sub a:hover { background: #fbf5e4; color: #2a1a0b; }
.bb-mega__t { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.bb-mega__d { grid-column: 2; font-size: 0.875rem; font-weight: 500; line-height: 1.45; color: #5a4632; }
.bb-mega__about { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.bb-mega__brand { display: grid; gap: 0.875rem; }
.bb-mega__brand p { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.5; color: #3d2a17; }
.bb-mega__mark { background: #fff; border: 0.1875rem solid #2a1a0b; box-shadow: 0.5rem 0.5rem 0 #e4b61f; padding: 1.125rem; display: grid; place-items: center; }
.bb-mega__mark img { display: block; width: 9.375rem; height: auto; }
.bb-mega__list { display: grid; border-top: 0.125rem solid #2a1a0b; }
.bb-mega__row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 1rem; align-items: center;
	padding: 0.9375rem 0.25rem; border-bottom: 0.0625rem solid #d8cdb9; transition: background .15s;
}
.bb-mega__row .bb-mega__t { font-size: 1.0625rem; line-height: 1.2; }
.bb-mega__row svg { grid-row: span 2; }
.bb-mega__row .bb-mega__d { grid-column: 1; }
.bb-mega__aside { background: #2a1a0b; color: #fdfcf6; padding: 1.5rem; display: grid; gap: 1.125rem; align-content: start; }
.bb-mega__phone { font-weight: 900; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.01em; color: #fdfcf6; white-space: nowrap; font-feature-settings: 'tnum' 1; }
.bb-mega__fees { display: grid; gap: 0.375rem; padding-top: 1rem; border-top: 0.0625rem solid #52371f; font-size: 0.875rem; line-height: 1.4; color: #e6d6bf; }
.bb-mega__fees strong { color: #fdfcf6; }

/* Mobile menu */
.bb-mobile {
	position: fixed; inset: 0; z-index: 70; background: #fdfcf6; color: #2a1a0b;
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.bb-mobile__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-mobile__logo { display: flex; min-width: 0; }
.bb-mobile__logo img { display: block; height: 1.875rem; width: auto; max-width: 100%; }
.bb-mobile__close {
	display: flex; align-items: center; gap: 0.625rem; height: 2.875rem; padding: 0 0.875rem; flex: none;
	background: #e4b61f; color: #2a1a0b; border: 0; border-radius: 0.25rem; font-weight: 800; font-size: 0.9375rem; cursor: pointer;
}
.bb-mobile__close:hover { background: #f0c63a; }
.bb-mobile__nav { overflow-y: auto; padding: 0.25rem 1.25rem 1.5rem; }
.bb-mobile__item {
	width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 4rem;
	padding: 0; background: none; border: 0; border-bottom: 0.125rem solid #2a1a0b; cursor: pointer; text-align: left;
	font-weight: 900; font-size: 1.375rem; letter-spacing: -.01em; text-transform: uppercase;
}
.bb-mobile__group { border-bottom: 0.125rem solid #2a1a0b; }
.bb-mobile__group .bb-mobile__item { border-bottom: 0; }
.bb-mobile__chev { width: 2.125rem; height: 2.125rem; display: grid; place-items: center; background: #e4b61f; border-radius: 50%; transition: transform .2s; }
.bb-mobile__item[aria-expanded="true"] .bb-mobile__chev { transform: rotate(180deg); }
.bb-mobile__sub { display: grid; padding: 0 0 0.875rem; }
.bb-mobile__sub a { display: grid; gap: 0.125rem; padding: 0.75rem 0.25rem; border-top: 0.0625rem solid #d8cdb9; }
.bb-mobile__sub .bb-mega__t { font-size: 1.0625rem; }
.bb-mobile__sub .bb-mega__d { grid-column: auto; font-weight: 400; line-height: 1.4; }
.bb-mobile__foot { background: #2a1a0b; color: #fdfcf6; padding: 1.125rem 1.25rem 1.25rem; display: grid; gap: 0.875rem; }
.bb-mobile__call { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.bb-mobile__phone { font-weight: 900; font-size: 1.625rem; line-height: 1.05; white-space: nowrap; font-feature-settings: 'tnum' 1; }
.bb-mobile__hours { font-size: 0.8125rem; line-height: 1.35; color: #e6d6bf; }
.bb-mobile__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.bb-mobile__btn { display: flex; align-items: center; justify-content: center; min-height: 3.375rem; font-weight: 800; font-size: 1rem; border-radius: 0.25rem; }
.bb-mobile__btn--gold { background: #e4b61f; color: #2a1a0b; }
.bb-mobile__btn--gold:hover { background: #f0c63a; color: #2a1a0b; }
.bb-mobile__btn--teal { background: #055d65; color: #fff; }
.bb-mobile__btn--teal:hover { background: #077580; color: #fff; }

/* ---------- Footer ---------- */

.bb-endcta { border-top: 0.1875rem solid #2a1a0b; }
.bb-endcta__in {
	padding-block: clamp(3.5rem, calc(7 * var(--bb-vw)), 6rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 2rem 4rem; align-items: end;
}
.bb-endcta__h { font-size: clamp(2.125rem, calc(4 * var(--bb-vw)), 3.625rem); color: #fff; }
.bb-endcta__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0.75rem; }
.bb-endcta__btns .bb-btn { display: flex; font-size: 1.125rem; gap: 1.25rem; }

.bb-footer { background: #fff; color: #3d2a17; border-top: 0.1875rem solid #2a1a0b; }
.bb-footer__in { padding-block: 4.5rem 1.75rem; }
.bb-footer__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.bb-footer__brand { min-width: 0; display: grid; gap: 1.25rem; align-content: start; }
.bb-footer__brand img { display: block; width: min(100%, 21.25rem); height: auto; }
.bb-footer__brand p { margin: 0; font-size: 0.9375rem; line-height: 1.55; max-width: 40ch; }
.bb-footer__brand .bb-btn { justify-self: start; }
.bb-footer__col { display: grid; gap: 0.5rem; align-content: start; font-size: 0.9375rem; line-height: 1.5; }
.bb-footer__col strong, .bb-footer__phone { color: #2a1a0b; }
.bb-footer__phone { font-weight: 800; }
.bb-footer__h {
	margin: 0 0 0.375rem; padding-bottom: 0.625rem; border-bottom: 0.125rem solid #2a1a0b;
	font-size: 0.75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9d670d;
}
.bb-footer__legal {
	margin-top: 3.5rem; padding: 1.25rem 0; border-top: 0.1875rem solid #2a1a0b; border-bottom: 0.0625rem solid #d8cdb9;
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
	font-size: 0.875rem; line-height: 1.5;
}
.bb-footer__id { margin: 0; display: flex; align-items: center; gap: 0.875rem; max-width: 72ch; }
.bb-footer__19 { flex: none; background: #2a1a0b; color: #e4b61f; font-weight: 900; font-size: 1.125rem; padding: 0.375rem 0.625rem; }
.bb-footer__copy { margin: 1.125rem 0 0; font-size: 0.8125rem; color: #7a6650; }

.bb-bar { display: none; }

/* ---------- Home: hero ---------- */

.bb-hero { position: relative; overflow: hidden; background-position: 0 0, 1.8125rem 2.5625rem; }
.bb-hero__in {
	padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 6rem) clamp(3.5rem, calc(6 * var(--bb-vw)), 5.5rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 31.25rem), 1fr));
	gap: 4rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: center;
}
.bb-hero__kicker {
	margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.75rem;
	font-size: 0.8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9d670d;
}
.bb-hero__kicker span { width: 2rem; height: 0.1875rem; background: #e4b61f; }
.bb-hero__h { font-size: clamp(2.875rem, calc(5.6 * var(--bb-vw)), 5.5rem); line-height: .88; letter-spacing: -.04em; margin-left: -.04em; color: #603912; }
.bb-hero__outline { color: #e4b61f; -webkit-text-stroke: 0.1562rem #603912; paint-order: stroke fill; }
.bb-hero__road { display: block; width: min(21.25rem, 80%); margin-top: 1.5rem; }
.bb-hero__lede { margin: 1.375rem 0 0; max-width: 38ch; font-size: clamp(1.125rem, calc(1.45 * var(--bb-vw)), 1.3125rem); line-height: 1.5; color: #3d2a17; }
.bb-hero__lede strong { color: #2a1a0b; }
.bb-hero__btns { margin-top: 2rem; }
.bb-hero__btns .bb-btn__aside { font-weight: 600; }

.bb-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.25rem; max-width: 35rem; border-top: 0.125rem solid #2a1a0b; }
.bb-badges > div { min-width: 0; padding: 0.875rem clamp(0.5rem, calc(2 * var(--bb-vw)), 1rem) 0; display: grid; gap: 0.125rem; align-content: start; }
.bb-badges > div:first-child { padding-left: 0; }
.bb-badges > div:last-child { padding-right: 0; }
.bb-badges > div + div { border-left: 0.0625rem solid #d8cdb9; }
.bb-badges span { font-size: clamp(0.5625rem, calc(2.4 * var(--bb-vw)), 0.6875rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9d670d; }
.bb-badges strong { font-weight: 900; font-size: clamp(1rem, calc(4.6 * var(--bb-vw)), 1.375rem); line-height: 1.15; }

.bb-hero__art { position: relative; width: 100%; max-width: 40rem; aspect-ratio: 1 / 1.06; justify-self: end; }
.bb-hero__confetti {
	position: absolute; right: 0; top: 7%; width: 78%; height: 70%;
	background-color: #e4b61f;
	background-image: radial-gradient(circle, #fdfcf6 0 0.1875rem, transparent 0.2188rem), radial-gradient(circle, #fdfcf6 0 0.3125rem, transparent 0.3438rem), radial-gradient(circle, rgba(253,252,246,.7) 0 0.125rem, transparent 0.1562rem);
	background-size: 2.75rem 3.25rem, 5.5rem 6rem, 1.875rem 2.125rem;
	background-position: 0 0, 1.375rem 1.875rem, 0.875rem 0.625rem;
	border: 0.1875rem solid #2a1a0b;
}
.bb-hero__main, .bb-hero__bag, .bb-hero__shelf { position: absolute; transition: transform .25s ease, box-shadow .25s ease; }
.bb-hero__main { right: 7%; top: 0; width: 68%; height: 66%; box-shadow: 0.875rem 0.875rem 0 #603912; }
.bb-hero__main:hover { transform: translate(-0.3125rem, -0.3125rem); box-shadow: 1.1875rem 1.1875rem 0 #603912; }
.bb-hero__bag { left: 0; bottom: 7%; width: 44%; height: 40%; box-shadow: 0.625rem 0.625rem 0 #2a1a0b; }
.bb-hero__bag:hover { transform: translate(-0.3125rem, -0.3125rem); box-shadow: 0.9375rem 0.9375rem 0 #2a1a0b; }
.bb-hero__shelf { right: 3%; bottom: 0; width: 36%; height: 29%; }
.bb-hero__shelf:hover { transform: translate(-0.3125rem, -0.3125rem); box-shadow: 0.5rem 0.5rem 0 #2a1a0b; }
.bb-hero__seal { position: absolute; left: 3%; top: 3%; width: clamp(7.5rem, calc(14 * var(--bb-vw)), 10.5rem); aspect-ratio: 1; pointer-events: none; }
.bb-spin { transform-origin: 100px 100px; animation: bbSpin 22s linear infinite; }
.bb-hero__pill {
	position: absolute; right: -0.375rem; top: 58%; pointer-events: none;
	display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem 0.5rem 0.5rem;
	background: #fdfcf6; border: 0.1875rem solid #2a1a0b; border-radius: 62.4375rem; box-shadow: 0 0.25rem 0 #2a1a0b;
}
.bb-hero__pill > span { display: grid; line-height: 1.15; }
.bb-hero__pill strong { font-size: 0.875rem; }
.bb-hero__pill > span > span { font-size: 0.75rem; color: #5a4632; }

.bb-marquee { background: #2a1a0b; overflow: hidden; border-top: 0.1875rem solid #2a1a0b; }
.bb-marquee__track {
	display: flex; width: max-content; padding: 1.25rem 0; animation: bbMarquee 40s linear infinite;
	color: #e4b61f; font-weight: 900; font-size: clamp(1rem, calc(1.6 * var(--bb-vw)), 1.375rem); text-transform: uppercase; letter-spacing: .02em;
}
.bb-marquee__row { display: flex; gap: 1.375rem; align-items: center; padding-right: 1.375rem; flex: none; }
.bb-marquee__row span { white-space: nowrap; }
.bb-marquee__row svg { flex: none; }

/* ---------- Home: services ---------- */

.bb-svc { padding: clamp(5rem, calc(9 * var(--bb-vw)), 8.5rem) 0; background: #fff; }
.bb-svc .bb-lede { max-width: 50ch; }
.bb-svc__h { margin-top: 0.625rem; }

.bb-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.bb-feature__card { grid-column: span 12; display: flex; flex-direction: column; position: relative; transition: transform .25s ease; }
.bb-feature__card:hover { transform: translateY(-0.375rem); }
.bb-feature__img { aspect-ratio: 4 / 5; }
.bb-feature__card--1 .bb-feature__img { aspect-ratio: 16 / 10; box-shadow: 0.75rem 0.75rem 0 #e4b61f; }
.bb-feature__card--2 .bb-feature__img { box-shadow: 0.625rem 0.625rem 0 #603912; }
.bb-feature__card--3 .bb-feature__img { box-shadow: 0.625rem 0.625rem 0 #055d65; }
.bb-feature__body { padding: 1.375rem 0.25rem 0; display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; align-items: baseline; }
.bb-feature__n { font-weight: 900; font-size: 0.9375rem; color: #9d670d; font-feature-settings: 'tnum' 1; }
.bb-feature__t { margin: 0; font-weight: 900; font-size: clamp(1.375rem, calc(2 * var(--bb-vw)), 1.75rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; }
.bb-feature__body p { grid-column: 2; margin: 0; font-size: 0.9688rem; line-height: 1.55; color: #3d2a17; max-width: 40ch; }

.bb-more { margin-top: 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 0.1875rem solid #2a1a0b; border-left: 0.0625rem solid #d8cdb9; }
.bb-more__cell {
	display: grid; gap: 0.625rem; align-content: start; padding: 1.75rem 1.75rem 1.875rem;
	border-right: 0.0625rem solid #d8cdb9; border-bottom: 0.0625rem solid #d8cdb9; transition: background .2s, box-shadow .2s;
}
.bb-more__cell:hover { background: #fbf5e4; box-shadow: inset 0 -0.25rem 0 #e4b61f; }
.bb-more__top { display: flex; align-items: center; justify-content: space-between; }
.bb-more__n { font-size: 0.75rem; font-weight: 800; color: #9d670d; font-feature-settings: 'tnum' 1; }
.bb-more__cell h3 { margin: 0.375rem 0 0; font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.bb-more__cell p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #5a4632; }
.bb-more__pay {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); gap: 1.25rem 1.75rem; align-items: center;
	background: #fbf5e4; transition: box-shadow .2s;
}
.bb-more__paytext { display: grid; gap: 0.625rem; align-content: start; }
.bb-paylogos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; align-items: center; max-width: 20rem; }
.bb-paylogos span { display: block; width: 100%; aspect-ratio: 3 / 2; box-sizing: border-box; padding: 0.625rem; background: #fff; border: 0.125rem solid #2a1a0b; }
.bb-paylogos img { display: block; width: 100%; height: 100%; object-fit: contain; }

.bb-ask {
	margin-top: 1.75rem; padding: 1.5rem 1.75rem; background: #2a1a0b; color: #fdfcf6;
	display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; justify-content: space-between;
}
.bb-ask p { margin: 0; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.bb-ask__hand { font-size: 2.5rem; line-height: 1; color: #e4b61f; }
.bb-ask p > span:last-child { font-size: 1rem; color: #e6d6bf; }
.bb-ask .bb-btn { gap: 0.75rem; box-shadow: none; white-space: nowrap; }

/* ---------- Home: how it works ---------- */

.bb-how { position: relative; color: #fff; }
.bb-how__in { padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem); }
.bb-how__lede { color: #d6ecee; }
.bb-route { margin: 3.5rem 0 0.25rem; height: 6.875rem; }
.bb-route svg { display: block; }
.bb-route__draw { stroke-dasharray: 1200; --len: 1200; animation: bbDraw 2.6s ease-out both; }
.bb-route__pin { transform-box: view-box; animation: bbPop .5s ease-out both; }
.bb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: 2.25rem 3rem; }
.bb-steps li {
	display: grid; gap: 0.75rem; align-content: start; padding: 1.75rem 1.75rem 2rem;
	background: rgba(0,0,0,.14); border-top: 0.1875rem solid #e4b61f; transition: background .25s, transform .25s;
}
.bb-steps li:hover { background: rgba(0,0,0,.26); transform: translateY(-0.375rem); }
.bb-steps__n { font-weight: 900; font-size: 4rem; line-height: .85; color: #e4b61f; letter-spacing: -.04em; }
.bb-steps h3 { margin: 0.375rem 0 0; font-weight: 900; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.01em; }
.bb-steps p { margin: 0; font-size: 1rem; line-height: 1.55; color: #e1f0f1; max-width: 34ch; }
.bb-how__btns { margin-top: 3rem; }
.bb-how__notch {
	position: absolute; left: clamp(2.5rem, calc(8 * var(--bb-vw)), 7.5rem); bottom: -1.125rem; z-index: 2;
	border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; border-top: 1.125rem solid #055d65;
}

/* ---------- Home: multi-stop ---------- */

.bb-stops__in { padding-block: clamp(6rem, calc(10 * var(--bb-vw)), 9rem) clamp(4.5rem, calc(8 * var(--bb-vw)), 7rem); }
.bb-stops .bb-lede { max-width: 48ch; }
.bb-stops__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); border: 0.1875rem solid #2a1a0b; background: #fff; }
.bb-stops__cell {
	position: relative; display: grid; gap: 0.625rem; align-content: start; padding: 1.625rem 1.5rem 1.75rem;
	background: #fff; color: #2a1a0b; border-right: 0.1875rem solid #2a1a0b; transition: box-shadow .2s;
}
.bb-stops__cell:hover { box-shadow: inset 0 -0.375rem 0 #e4b61f; }
.bb-stops__cell--end { background: #055d65; color: #fff; }
.bb-stops__top { display: flex; align-items: center; gap: 0.75rem; }
.bb-stops__k {
	flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; box-sizing: border-box;
	border-radius: 50%; background: #e4b61f; border: 0.1875rem solid #2a1a0b; font-weight: 900; font-size: 0.9375rem; color: #2a1a0b;
}
.bb-stops__cell--end .bb-stops__k { background: #fdfcf6; }
.bb-stops__label { font-size: 0.75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bb-stops__cell h3 { margin: 0.5rem 0 0; font-weight: 900; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; }
.bb-stops__cell p { margin: 0; font-size: 0.9375rem; line-height: 1.5; opacity: .85; }

/* ---------- Home: areas ---------- */

.bb-areas {
	background-color: #664631; color: #fdfcf6;
	background-image: radial-gradient(circle, rgba(228,182,31,.32) 0.0938rem, transparent 0.1187rem); background-size: 1.375rem 1.375rem;
	border-top: 0.1875rem solid #2a1a0b; border-bottom: 0.1875rem solid #2a1a0b;
}
.bb-areas__in {
	padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28.75rem), 1fr)); gap: 3.5rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: start;
}
.bb-fee { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.bb-fee__tag {
	display: grid; gap: 0.25rem; padding: 1.375rem 1.75rem 1.125rem; transform: rotate(-3deg);
	background: #e4b61f; color: #2a1a0b; border: 0.1875rem solid #2a1a0b; box-shadow: 0.625rem 0.625rem 0 #2a1a0b;
}
.bb-fee__tag span { font-size: 0.75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bb-fee__tag strong { font-weight: 900; font-size: clamp(4.75rem, calc(8.4 * var(--bb-vw)), 7rem); line-height: .88; letter-spacing: -.045em; }
.bb-fee__extra { display: grid; gap: 0.375rem; max-width: 24ch; }
.bb-fee__extra strong { font-weight: 900; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; color: #e4b61f; }
.bb-fee__extra strong span { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: #fdfcf6; }
.bb-fee__extra > span { font-size: 0.9375rem; line-height: 1.45; color: #f1e8da; }
.bb-areas__p { margin: 2.5rem 0 1.25rem; font-size: 1rem; line-height: 1.6; color: #f1e8da; max-width: 46ch; }
.bb-towns { display: grid; border-top: 0.1875rem solid #fdfcf6; }
.bb-towns__row {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.375rem 1.25rem; align-items: center;
	padding: 1.25rem 0; border-bottom: 0.1875rem solid #fdfcf6; transition: padding .25s, background .25s;
}
.bb-towns__row:hover { padding-left: 0.875rem; background: rgba(253,252,246,.07); }
.bb-towns__row h3 { margin: 0; font-weight: 900; font-size: clamp(1.75rem, calc(3.2 * var(--bb-vw)), 2.875rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.bb-towns__fee { display: grid; justify-items: end; gap: 0.125rem; text-align: right; }
.bb-towns__fee strong { font-weight: 900; font-size: clamp(1.25rem, calc(2 * var(--bb-vw)), 1.625rem); color: #fdfcf6; white-space: nowrap; }
.bb-towns__fee.is-priced strong { color: #e4b61f; }
.bb-towns__fee span { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: #e6d6bf; }

/* ---------- Home: why us ---------- */

.bb-why__in {
	padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 3.5rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: center;
}
.bb-why__art { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .9; }
.bb-why__gold { position: absolute; inset: 8% 4% 0 10%; background: #e4b61f; border: 0.1875rem solid #2a1a0b; }
.bb-why__card { position: absolute; inset: 0 12% 10% 0; box-sizing: border-box; padding: 10%; display: grid; place-items: center; background: #fff; border: 0.1875rem solid #2a1a0b; }
.bb-why__card img { display: block; width: 100%; height: auto; }
.bb-why__stamp {
	position: absolute; right: 0; bottom: 2%; display: grid; line-height: 1.05; padding: 0.625rem 1rem; transform: rotate(4deg);
	background: #2a1a0b; color: #e4b61f; border: 0.1875rem solid #2a1a0b;
}
.bb-why__stamp span { font-size: 0.6875rem; font-weight: 800; letter-spacing: .2em; }
.bb-why__stamp strong { font-weight: 900; font-size: 1.375rem; color: #fdfcf6; }
.bb-why__hand { font-size: clamp(3rem, calc(4.8 * var(--bb-vw)), 4.25rem); line-height: .88; color: #603912; }
.bb-why__h { margin: 0.5rem 0 0; font-weight: 900; font-size: clamp(1.625rem, calc(2.6 * var(--bb-vw)), 2.25rem); line-height: 1.05; letter-spacing: -.015em; text-transform: uppercase; }
.bb-why__list { list-style: none; margin: 1.75rem 0 0; padding: 0; border-top: 0.125rem solid #2a1a0b; }
.bb-why__list li {
	display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.25rem 0.875rem; align-items: baseline;
	padding: 1rem 0; border-bottom: 0.0625rem solid #d8cdb9; transition: padding .25s, background .25s;
}
.bb-why__list li:hover { padding-left: 0.625rem; background: #fbf5e4; }
.bb-why__list svg { align-self: center; }
.bb-why__t { font-size: 1rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bb-why__d { grid-column: 2; font-size: 0.9062rem; line-height: 1.5; color: #5a4632; }
.bb-accept { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 1.75rem; }
.bb-accept .bb-label { font-size: 0.75rem; }

/* ---------- Home: lifestyle ---------- */

.bb-life { position: relative; background: #2a1a0b; color: #fdfcf6; }
.bb-life__scallop {
	height: 2.75rem;
	background: radial-gradient(circle at 50% 0, #fdfcf6 1.375rem, transparent 1.4375rem) 0 0 / 2.75rem 2.75rem repeat-x, linear-gradient(#fdfcf6, #fdfcf6) 0 0 / 100% 0.875rem no-repeat;
}
.bb-life__in {
	padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 5.5rem) clamp(5rem, calc(9 * var(--bb-vw)), 8rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28.75rem), 1fr)); gap: 3.5rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: center;
}
.bb-life__fig { margin: 0; position: relative; }
.bb-life__img {
	aspect-ratio: 4 / 5; max-height: 41.25rem; background: #3d2a17; border-color: #fdfcf6; box-shadow: 0.875rem 0.875rem 0 #e4b61f;
	transition: transform .25s ease, box-shadow .25s ease;
}
.bb-life__img:hover { transform: translate(-0.3125rem, -0.3125rem); box-shadow: 1.1875rem 1.1875rem 0 #e4b61f; }
.bb-life__note {
	position: absolute; right: -0.625rem; bottom: 2rem; pointer-events: none; display: grid; gap: 0.125rem;
	padding: 0.875rem 1.125rem; transform: rotate(-3deg); background: #fdfcf6; color: #2a1a0b; border: 0.1875rem dashed #2a1a0b;
}
.bb-life__note .bb-hand { font-size: 1.875rem; line-height: .9; color: #603912; }
.bb-life__note strong { font-weight: 900; font-size: 1.375rem; line-height: 1; text-transform: uppercase; }
.bb-life__hand { font-size: clamp(2.875rem, calc(4.6 * var(--bb-vw)), 4.125rem); line-height: .95; color: #e4b61f; }
.bb-life__h { margin: 0.875rem 0 0; font-weight: 900; font-size: clamp(1.875rem, calc(3.1 * var(--bb-vw)), 2.875rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.bb-life__p { margin: 1.625rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: #e6d6bf; max-width: 46ch; }
.bb-life__list {
	list-style: none; margin: 1.875rem 0 0; padding: 1.25rem 0 0; border-top: 0.125rem solid #52371f;
	display: flex; flex-wrap: wrap; gap: 0.625rem 0.875rem; color: #e4b61f; font-weight: 900; font-size: clamp(1rem, calc(1.5 * var(--bb-vw)), 1.25rem); text-transform: uppercase;
}
.bb-life__list li { display: flex; gap: 0.875rem; align-items: center; white-space: nowrap; }
.bb-life__list li span { color: #fdfcf6; }
.bb-life__btn { margin-top: 2.25rem; }

/* ---------- Home: occasions ---------- */

.bb-occ { background: #efeae0; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-occ__in { padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem); }
.bb-occ__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); gap: 1.5rem; align-items: start; }
.bb-occ__card {
	min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: #fdfcf6; border: 0.1875rem solid #2a1a0b;
	transition: transform .25s ease, box-shadow .25s ease;
}
.bb-occ__card:hover { transform: translate(-0.25rem, -0.25rem); box-shadow: 0.5rem 0.5rem 0 #2a1a0b; }
.bb-occ__img { aspect-ratio: 4 / 5; background: #e3dccd; border-bottom: 0.1875rem solid #2a1a0b; overflow: hidden; }
.bb-occ__body { padding: 1.25rem 1.375rem 1.5rem; display: grid; gap: 0.5rem; }
.bb-occ__body p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #3d2a17; }
.bb-occ__body .bb-occ__t { font-family: "Amatic SC", cursive; font-size: 2.375rem; line-height: .9; }
.bb-occ__body .bb-occ__t.bb-c-teal { color: #055d65; }
.bb-occ__body .bb-occ__t.bb-c-brown { color: #603912; }

/* ---------- Home: local copy ---------- */

.bb-local { background: #fff; }
.bb-local__in {
	padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: 3rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: start;
}
.bb-local__side { position: sticky; top: 7.5rem; }
.bb-local__quote { margin: 2.25rem 0 0; padding: 1.5rem 0 0; border-top: 0.1875rem solid #2a1a0b; }
.bb-local__quote p { margin: 0; font-weight: 900; font-size: clamp(1.5rem, calc(2.4 * var(--bb-vw)), 2rem); line-height: 1.15; letter-spacing: -.01em; }
.bb-local__quote svg { display: block; margin-top: 1rem; }
.bb-local__copy { display: grid; gap: 1.375rem; font-size: 1.0625rem; line-height: 1.7; color: #3d2a17; max-width: 62ch; }
.bb-local__copy p { margin: 0; }
.bb-local__copy strong { color: #2a1a0b; }

/* ---------- Home: FAQ ---------- */

.bb-faq { background: #fdfcf6; border-top: 0.1875rem solid #2a1a0b; }
.bb-faq__in {
	padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.25rem), 1fr)); gap: 2.5rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: start;
}
.bb-faq__side { display: grid; gap: 1.25rem; }
.bb-faq__card { background: #055d65; color: #fff; padding: 1.5rem; display: grid; gap: 0.75rem; max-width: 21.25rem; }
.bb-faq__card .bb-hand { font-size: 2.125rem; line-height: .95; color: #e4b61f; }
.bb-faq__phone { font-weight: 900; font-size: 1.5rem; color: #fff; font-feature-settings: 'tnum' 1; }
.bb-faq__mail { font-size: 0.875rem; color: #d6ecee; }
.bb-acc { grid-column: 1 / -1; min-width: 0; border-top: 0.1875rem solid #2a1a0b; }
.bb-acc__item { border-bottom: 0.0625rem solid #2a1a0b; }
.bb-acc__item summary {
	list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: 1rem;
	padding: 1.375rem 0; font-weight: 800; font-size: clamp(1.125rem, calc(1.6 * var(--bb-vw)), 1.375rem); line-height: 1.25; transition: color .2s;
}
.bb-acc__item summary::-webkit-details-marker { display: none; }
.bb-acc__item summary:hover { color: #9d670d; }
.bb-acc__n { font-size: 0.8125rem; font-weight: 800; color: #9d670d; font-feature-settings: 'tnum' 1; }
.bb-plus { flex: none; width: 2.375rem; height: 2.375rem; display: grid; place-items: center; background: #e4b61f; border-radius: 50%; transition: transform .2s, background .2s; }
.bb-acc__item[open] .bb-plus { transform: rotate(45deg); background: #2a1a0b; }
.bb-acc__item[open] .bb-plus svg { stroke: #e4b61f; }
.bb-acc__item > p { margin: 0; padding: 0 4rem 1.625rem 3.75rem; font-size: 1rem; line-height: 1.65; color: #3d2a17; max-width: 64ch; }

/* ---------- Home: blog teaser ---------- */

.bb-blogt { background: #fff; border-top: 0.1875rem solid #2a1a0b; }
.bb-blogt__in { padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem); }
.bb-blogt__head { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; align-items: end; justify-content: space-between; margin-bottom: 2.75rem; }
.bb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); gap: 1.75rem; }
.bb-card {
	display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
	background: #fdfcf6; border: 0.1875rem solid #2a1a0b; transition: transform .15s, box-shadow .15s;
}
.bb-card:hover { transform: translate(-0.25rem, -0.25rem); box-shadow: 0.5rem 0.5rem 0 #e4b61f; color: #2a1a0b; }
.bb-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #efeae0; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-card__body { padding: 1.25rem 1.375rem 1.5rem; display: grid; gap: 0.625rem; }
.bb-card__body h3 { margin: 0.25rem 0 0; font-weight: 900; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.01em; }
.bb-card__body p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #5a4632; }
.bb-card__more { margin-top: 0.375rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 800; color: #603912; }

/* ---------- Home: closing CTA ---------- */

.bb-cta { position: relative; overflow: hidden; border-top: 0.1875rem solid #2a1a0b; }
.bb-cta__in {
	padding-block: clamp(5rem, calc(9 * var(--bb-vw)), 8rem) 2rem;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32.5rem), 1fr)); gap: 2.5rem 4rem; align-items: end;
}
.bb-cta__h { font-size: clamp(2.375rem, calc(4.4 * var(--bb-vw)), 4.125rem); color: #fff; margin-left: -.04em; }
.bb-cta__btns { display: grid; gap: 0.75rem; max-width: 23.75rem; }
.bb-cta__hours { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 600; color: #fff; }
.bb-truck { position: relative; height: 9.375rem; }
.bb-truck__road { position: absolute; left: 0; right: 0; bottom: 1.5rem; height: 0.1875rem; background: #2a1a0b; }
.bb-truck__drive { position: absolute; left: 0; right: 0; bottom: 1.6875rem; animation: bbDriveL 7s linear infinite; }
.bb-truck__bob { position: relative; width: 8.125rem; animation: bbBob .35s ease-in-out infinite; }
.bb-truck__bob img { display: block; width: 8.125rem; height: auto; }
.bb-truck__line { position: absolute; height: 0.3125rem; border-radius: 0.1875rem; background: #2a1a0b; animation: bbLinesR .5s linear infinite; }
.bb-truck__line:nth-child(1) { left: 8.5rem; bottom: 0.375rem; width: 2.875rem; }
.bb-truck__line:nth-child(2) { left: 9rem; bottom: 1.0625rem; width: 2.375rem; animation-delay: .12s; }
.bb-truck__line:nth-child(3) { left: 9.5rem; bottom: 1.75rem; width: 1.875rem; animation-delay: .24s; }

/* ---------- Home: service area map ---------- */

.bb-zone { background: #2a1a0b; color: #fdfcf6; border-top: 0.1875rem solid #2a1a0b; }
.bb-zone__in {
	padding-block: clamp(4.5rem, calc(8 * var(--bb-vw)), 7rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.25rem), 1fr)); gap: 2.5rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: start;
}
.bb-zone__side { display: grid; gap: 1.375rem; align-content: start; }
.bb-zone__side .bb-btn { justify-self: start; }
.bb-zone__p { margin: 0; font-size: 1rem; line-height: 1.6; color: #e6d6bf; max-width: 40ch; }
.bb-zone__legend { display: grid; border-top: 0.125rem solid #52371f; }
.bb-zone__legend > div { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 0.0625rem solid #52371f; }
.bb-zone__legend > div > span:last-child { display: grid; line-height: 1.3; }
.bb-zone__legend > div > span:last-child > span { font-size: 0.875rem; color: #e6d6bf; }
.bb-zone__map { grid-column: 1 / -1; min-width: 0; height: clamp(23.75rem, calc(42 * var(--bb-vw)), 33.75rem); background: #efeae0; border: 0.1875rem solid #fdfcf6; box-shadow: 0.75rem 0.75rem 0 #e4b61f; }
.bb-swatch { flex: none; width: 1.625rem; height: 1.625rem; box-sizing: border-box; border-radius: 50%; }
.bb-swatch--gold { background: rgba(228,182,31,.45); border: 0.125rem solid #e4b61f; }
.bb-swatch--teal { background: rgba(5,93,101,.5); border: 0.125rem dashed #8fc9ce; }
.bb-swatch--sm { width: 1.25rem; height: 1.25rem; }
.bb-swatch--sm.bb-swatch--gold { border-color: #9d670d; }
.bb-swatch--sm.bb-swatch--teal { background: rgba(5,93,101,.25); border-color: #055d65; }

.bb-map { width: 100%; height: 100%; background: #efeae0; font-family: inherit; }
.bb-map--static { position: absolute; inset: 0; pointer-events: none; }
.bb-map .leaflet-tile-pane { filter: grayscale(1) sepia(.3) brightness(1.04) contrast(.9); }
.bb-map .leaflet-tooltip.bb-town {
	background: #2a1a0b; color: #fdfcf6; border: 0; border-radius: 0; box-shadow: none;
	font: 800 0.6875rem/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 0.3125rem 0.4375rem;
}
.bb-map .leaflet-tooltip.bb-town::before { display: none; }
.bb-map--static .leaflet-tooltip.bb-town { display: none; }

/* ---------- Home: floating buttons + map dialog ---------- */

.bb-fab { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 45; display: grid; grid-template-columns: 12.5rem; gap: 0.75rem; }
.bb-fab__btn {
	display: flex; align-items: center; gap: 0.625rem; width: 100%; height: 3.625rem; box-sizing: border-box; padding: 0 1.125rem 0 1rem;
	border: 0.1875rem solid #2a1a0b; border-radius: 62.4375rem; box-shadow: 0.25rem 0.25rem 0 #2a1a0b;
	font-weight: 800; font-size: 0.9375rem; white-space: nowrap; cursor: pointer;
}
.bb-fab__btn--teal { background: #055d65; color: #fff; }
.bb-fab__btn--teal:hover { background: #077580; color: #fff; }
.bb-fab__btn--gold { background: #e4b61f; color: #2a1a0b; font-feature-settings: 'tnum' 1; }
.bb-fab__btn--gold:hover { background: #f0c63a; color: #2a1a0b; }

.bb-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.25rem; background: rgba(42,26,11,.62); }
.bb-modal__box {
	width: min(100%, 61.25rem); max-height: calc(100vh - 2.5rem); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
	background: #fdfcf6; color: #2a1a0b; border: 0.1875rem solid #2a1a0b; box-shadow: 0.75rem 0.75rem 0 #e4b61f;
}
.bb-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 0.875rem 1.5rem; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-modal__head .bb-label { font-size: 0.75rem; }
.bb-modal__h { margin: 0; font-weight: 900; font-size: clamp(1.375rem, calc(2.4 * var(--bb-vw)), 1.875rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: #603912; }
.bb-modal__close { flex: none; width: 2.875rem; height: 2.875rem; display: grid; place-items: center; background: #2a1a0b; color: #e4b61f; border: 0; border-radius: 50%; cursor: pointer; }
.bb-modal__close:hover { background: #603912; }
.bb-modal__map { height: min(60vh, 32.5rem); background: #efeae0; }
.bb-modal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.75rem; padding: 1rem 1.5rem; border-top: 0.1875rem solid #2a1a0b; font-size: 0.875rem; line-height: 1.35; }
.bb-modal__key { display: flex; align-items: center; gap: 0.625rem; }
.bb-modal__foot .bb-btn { margin-left: auto; }

/* ---------- Generic pages (until each page has its own template) ---------- */

.bb-generic { padding-block: clamp(4rem, calc(8 * var(--bb-vw)), 7rem); }
.bb-generic h1 { margin: 0 0 2rem; font-weight: 900; font-size: clamp(2rem, calc(3.4 * var(--bb-vw)), 3.125rem); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; color: #603912; }

/* ---------- Breakpoints: 1080 (wide) and 760 (mid) ---------- */

@media (min-width: 1080px) {
	.bb-feature__card--1 { grid-column: span 6; }
	.bb-feature__card--2, .bb-feature__card--3 { grid-column: span 3; }
	.bb-feature__card--2 { margin-top: 4rem; }
	.bb-feature__card--1 .bb-feature__img { aspect-ratio: 6 / 5; }
	.bb-feature__card--2 .bb-feature__img, .bb-feature__card--3 .bb-feature__img { aspect-ratio: 3 / 4; }
	.bb-more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bb-occ__card:nth-child(even) { margin-top: 3rem; }
	.bb-acc, .bb-zone__map { grid-column: span 2; }
}

@media (min-width: 760px) and (max-width: 1079px) {
	.bb-feature__card--2, .bb-feature__card--3 { grid-column: span 6; }
	.bb-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
	.bb-more__pay { grid-column: span 2; }
}

@media (max-width: 1079px) {
	.bb-nav, .bb-header__phone { display: none; }
	.bb-header__burger { display: flex; }
	.bb-mega { display: none !important; }
	.bb-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-footer__brand { grid-column: span 2; }
}

@media (max-width: 759px) {
	.bb-header__order { display: none; }
	.bb-bar {
		display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		border-top: 0.1875rem solid #2a1a0b; background: #fdfcf6;
	}
	.bb-bar a { display: flex; align-items: center; justify-content: center; min-height: 3.625rem; font-weight: 800; font-size: 1rem; }
	.bb-bar__call { background: #e4b61f; color: #2a1a0b; }
	.bb-bar__order { background: #055d65; color: #fff; }
	.bb-bar a:hover { color: inherit; }
	body:has(.bb-bar) { padding-bottom: 3.625rem; }
	.bb-fab { bottom: 4.75rem; }
}

/* ---------- Motion ---------- */

@keyframes bbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.1875rem); } }
@keyframes bbDriveL { 0% { transform: translateX(100%); } 100% { transform: translateX(-13.75rem); } }
@keyframes bbLinesR { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(2.5rem); opacity: 0; } }
@keyframes bbSpin { to { transform: rotate(360deg); } }
@keyframes bbDraw { 0% { stroke-dashoffset: var(--len); } 100% { stroke-dashoffset: 0; } }
@keyframes bbPop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes bbMarquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Inner pages: shared ---------- */

.bb-dots-sm {
	background-color: #fdfcf6;
	background-image: radial-gradient(circle, rgba(96,57,18,.18) 0.075rem, transparent 0.1rem);
	background-size: 1.375rem 1.375rem;
}
.bb-upper { text-transform: uppercase; }
.bb-c-page { color: #fdfcf6; }
.bb-stack-8 { display: grid; gap: 0.5rem; }
.bb-stack-14 { display: grid; gap: 0.875rem; }
.bb-stack-18 { display: grid; gap: 1.125rem; }
.bb-stack-20 { display: grid; gap: 1.25rem; }
.bb-stack-22 { display: grid; gap: 1.375rem; }
.bb-stack-28 { display: grid; gap: 1.75rem; }

.bb-kicker {
	margin: 0; display: flex; align-items: center; gap: 0.75rem;
	font-size: 0.8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9d670d;
}
.bb-kicker span { width: 2rem; height: 0.1875rem; background: #e4b61f; }
.bb-kicker--18 { margin-bottom: 1.125rem; }
.bb-h1 { margin: 0; font-weight: 900; font-size: clamp(2.625rem, calc(5 * var(--bb-vw)), 4.75rem); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; color: #603912; }
.bb-inlink { font-weight: 800; color: #2a1a0b; border-bottom: 0.125rem solid #e4b61f; }
.bb-inlink:hover { color: #9d670d; }

.bb-phero { border-bottom: 0.1875rem solid #2a1a0b; }
.bb-phero__in { padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 5.5rem) clamp(2.5rem, calc(5 * var(--bb-vw)), 4rem); }
.bb-phero__in--order { padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 5rem) clamp(2.5rem, calc(5 * var(--bb-vw)), 4rem); }
.bb-phero__in--about {
	padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 6rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28.75rem), 1fr)); gap: 3rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: center;
}
.bb-phero__in--split {
	padding-block: clamp(3.5rem, calc(7 * var(--bb-vw)), 6.5rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28.75rem), 1fr)); gap: 3rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: center;
}
.bb-phero--brown {
	background-color: #664631; color: #fdfcf6;
	background-image: radial-gradient(circle, rgba(228,182,31,.32) 0.0938rem, transparent 0.1187rem); background-size: 1.375rem 1.375rem;
}
.bb-intro--hero { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28.75rem), 1fr)); gap: 1.5rem 4rem; margin-bottom: 0; }
.bb-phero__lede { margin: 0; font-size: 1.125rem; line-height: 1.55; color: #3d2a17; max-width: 46ch; }
.bb-phero__lede strong { color: #2a1a0b; }
.bb-phero__lede--44 { max-width: 44ch; }
.bb-phero__lede--48 { max-width: 48ch; line-height: 1.6; }
.bb-phero__lede--light { color: #f1e8da; line-height: 1.6; max-width: 44ch; }
.bb-phero__small { margin: 0; font-size: 0.9375rem; color: #5a4632; }
.bb-fee--hero { margin-top: 0; }

.bb-btn-outline {
	justify-self: start; display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.125rem;
	border: 0.125rem solid #2a1a0b; border-radius: 0.25rem; font-weight: 800; background: none; cursor: pointer;
}
.bb-btn-outline:hover { background: #fbf5e4; color: #2a1a0b; }
.bb-btn-outline--lg { min-height: 3.5rem; padding: 0 1.375rem; font-size: 1rem; }
.bb-btn--wide220 { min-width: 13.75rem; }
.bb-btn--md.bb-btn--wide220 { gap: 1.5rem; }

/* ---------- Services ---------- */

.bb-svch { display: grid; gap: 2rem; }
.bb-svch__h { margin-top: 0.625rem; }
.bb-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bb-jump a {
	border: 0.125rem solid #2a1a0b; padding: 0.5rem 0.875rem; background: #fff;
	font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: .03em;
}
.bb-jump a:hover { background: #e4b61f; color: #2a1a0b; }
.bb-jump a[aria-current] { background: #2a1a0b; color: #e4b61f; }

.bb-svcrows { background: #fff; }
.bb-svcrow {
	scroll-margin-top: 8.125rem; padding: clamp(3rem, calc(6 * var(--bb-vw)), 5rem) 0; border-bottom: 0.1875rem solid #2a1a0b;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 2rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: center;
}
.bb-svcrow--flip .bb-svcrow__img { order: 1; }
.bb-svcrow__img { aspect-ratio: 4 / 3; }
.bb-shadow-gold { box-shadow: 0.75rem 0.75rem 0 #e4b61f; }
.bb-shadow-brown { box-shadow: 0.75rem 0.75rem 0 #603912; }
.bb-shadow-teal { box-shadow: 0.75rem 0.75rem 0 #055d65; }
.bb-svcrow__blank { width: 100%; height: 100%; display: grid; place-items: center; background: #efeae0; }
.bb-svcrow__blank img { width: 40%; height: auto; opacity: .9; }
.bb-svcrow__body { display: grid; gap: 1rem; align-content: center; }
.bb-svcrow__n { font-weight: 900; font-size: 0.9375rem; color: #9d670d; }
.bb-svcrow__t { margin: 0; font-weight: 900; font-size: clamp(1.875rem, calc(3.2 * var(--bb-vw)), 2.875rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.bb-svcrow__d { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #3d2a17; max-width: 48ch; }
.bb-pills { list-style: none; margin: 0.375rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bb-pills li { background: #fbf5e4; border: 0.0625rem solid #d8cdb9; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 600; }
.bb-svcrow__note { margin: 0; font-size: 0.875rem; font-weight: 700; color: #603912; }
.bb-svcrow__cta { margin-top: 0.5rem; gap: 0.75rem; }

.bb-band { background: #2a1a0b; color: #fdfcf6; }
.bb-band__in {
	padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 5rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 1.5rem 4rem; align-items: center;
}
.bb-band__h { margin: 0; font-weight: 900; font-size: clamp(1.75rem, calc(3 * var(--bb-vw)), 2.625rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.bb-band__p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: #e6d6bf; max-width: 50ch; }
.bb-band__p strong { color: #fdfcf6; }

/* ---------- Areas ---------- */

.bb-areatowns { background: #fff; }
.bb-areatowns__in {
	padding-block: clamp(4rem, calc(8 * var(--bb-vw)), 7rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 3rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: start;
}
.bb-tlist { display: grid; border-top: 0.1875rem solid #2a1a0b; }
.bb-tlist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.375rem 1.125rem; align-items: center; padding: 1.125rem 0; border-bottom: 0.125rem solid #2a1a0b; }
.bb-tlist__row h2 { margin: 0; font-weight: 900; font-size: clamp(1.5rem, calc(2.6 * var(--bb-vw)), 2.25rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.bb-tlist__fee { display: grid; justify-items: end; gap: 0.125rem; text-align: right; }
.bb-tlist__fee strong { font-weight: 900; font-size: 1.375rem; white-space: nowrap; }
.bb-tlist__fee span { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: #5a4632; }
.bb-tlist__btn { justify-self: start; margin-top: 1.75rem; font-size: 1rem; }
.bb-areatowns__map { min-width: 0; height: clamp(23.75rem, calc(44 * var(--bb-vw)), 35rem); background: #efeae0; border: 0.1875rem solid #2a1a0b; box-shadow: 0.75rem 0.75rem 0 #e4b61f; }

.bb-fees { background: #efeae0; border-top: 0.1875rem solid #2a1a0b; }
.bb-fees__in { padding-block: clamp(4rem, calc(8 * var(--bb-vw)), 7rem); }
.bb-fees__h { margin: 0 0 2.5rem; }
.bb-fees__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); border: 0.1875rem solid #2a1a0b; background: #fdfcf6; }
.bb-fees__cell { padding: 1.625rem 1.5rem 1.75rem; border-right: 0.1875rem solid #2a1a0b; display: grid; gap: 0.625rem; align-content: start; }
.bb-fees__v { font-weight: 900; font-size: 2.25rem; line-height: 1; letter-spacing: -.02em; color: #055d65; }
.bb-fees__cell h3 { margin: 0; font-weight: 900; font-size: 1.25rem; text-transform: uppercase; }
.bb-fees__cell p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #5a4632; }
.bb-fees__ex { margin: 1rem 0 0; font-size: 0.875rem; color: #5a4632; }

/* ---------- About ---------- */

.bb-aboutart { position: relative; aspect-ratio: 1 / .9; }
.bb-aboutart__gold { position: absolute; inset: 8% 0 0 10%; background: #e4b61f; border: 0.1875rem solid #2a1a0b; }
.bb-aboutart__img { position: absolute; inset: 0 10% 10% 0; background: #efeae0; border: 0.1875rem solid #2a1a0b; overflow: hidden; }
.bb-aboutart__stamp { border: 0; }

.bb-story { background: #fff; }
.bb-story__in {
	padding-block: clamp(4.5rem, calc(8 * var(--bb-vw)), 7.5rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: 3rem clamp(2rem, calc(6 * var(--bb-vw)), 6rem); align-items: start;
}

.bb-whyband { color: #fff; }
.bb-whyband__in { padding-block: clamp(4.5rem, calc(8 * var(--bb-vw)), 7.5rem); }
.bb-whyband__h { margin: 0 0 3rem; }
.bb-whyband__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); gap: 1.5rem; }
.bb-whyband__cell { display: grid; gap: 0.625rem; align-content: start; background: rgba(0,0,0,.14); border-top: 0.1875rem solid #e4b61f; padding: 1.5rem 1.375rem 1.75rem; }
.bb-whyband__n { font-weight: 900; font-size: 2.5rem; line-height: .9; color: #e4b61f; }
.bb-whyband__cell h3 { margin: 0.375rem 0 0; font-weight: 900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
.bb-whyband__cell p { margin: 0; font-size: 0.9688rem; line-height: 1.55; color: #e1f0f1; }

.bb-facts { background: #efeae0; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-facts__in {
	padding-block: clamp(4.5rem, calc(8 * var(--bb-vw)), 7.5rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); border-left: 0.1875rem solid #2a1a0b;
}
.bb-facts__cell { padding: 0.5rem 2rem 0.5rem 1.75rem; border-right: 0.1875rem solid #2a1a0b; display: grid; gap: 0.5rem; align-content: start; }
.bb-facts__k { font-size: 0.75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9d670d; }
.bb-facts__v { font-weight: 900; font-size: clamp(1.625rem, calc(2.6 * var(--bb-vw)), 2.25rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.bb-facts__d { font-size: 0.9375rem; line-height: 1.5; color: #5a4632; }

/* ---------- FAQ page ---------- */

.bb-faqp { background: #fff; }
.bb-faqp__in { padding-block: clamp(3.5rem, calc(7 * var(--bb-vw)), 6rem); display: grid; gap: 4rem; }
.bb-faqp__group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: 1.25rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: start; }
.bb-faqp__h { margin: 0; padding-top: 1.375rem; font-weight: 900; font-size: clamp(1.5rem, calc(2.4 * var(--bb-vw)), 2rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: #603912; }
.bb-acc--plain .bb-acc__item summary { grid-template-columns: 1fr auto; padding: 1.25rem 0; font-size: clamp(1.0625rem, calc(1.5 * var(--bb-vw)), 1.25rem); line-height: 1.3; }
.bb-acc--plain .bb-acc__item > p { padding: 0 3.5rem 1.5rem 0; }
.bb-plus--sm { width: 2.25rem; height: 2.25rem; }

/* ---------- Contact ---------- */

.bb-contact { background: #fff; }
.bb-contact__in {
	padding-block: clamp(3.5rem, calc(7 * var(--bb-vw)), 6rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr)); gap: 3rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: start;
}
.bb-clist { display: grid; border-top: 0.1875rem solid #2a1a0b; }
.bb-clist__row { display: grid; gap: 0.25rem; padding: 1.5rem 0; border-bottom: 0.125rem solid #2a1a0b; }
a.bb-clist__row:hover { background: #fbf5e4; color: #2a1a0b; }
.bb-clist__row--text { gap: 0.375rem; font-size: 1.0625rem; }
.bb-clist__k { font-size: 0.75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9d670d; }
.bb-clist__phone { font-weight: 900; font-size: clamp(2.125rem, calc(4 * var(--bb-vw)), 3.375rem); line-height: 1; letter-spacing: -.02em; }
.bb-clist__d { font-size: 0.9375rem; color: #5a4632; }
.bb-clist__mail { font-weight: 800; font-size: clamp(1.25rem, calc(2 * var(--bb-vw)), 1.625rem); word-break: break-all; }
.bb-clist__link { justify-self: start; font-size: 0.9375rem; color: #603912; }
.bb-cbox { background: #fdfcf6; border: 0.1875rem solid #2a1a0b; box-shadow: 0.625rem 0.625rem 0 #e4b61f; }

.bb-cform { padding: 1.75rem 1.75rem 2rem; display: grid; gap: 1.125rem; }
.bb-cform__head { display: grid; gap: 0.25rem; font-size: 0.875rem; color: #5a4632; }
.bb-cform__title { font-weight: 900; font-size: 1.5rem; text-transform: uppercase; color: #2a1a0b; }
.bb-cform .bb-err:empty { display: none; }
.bb-cform input, .bb-cform textarea { background: #fff; }
.bb-cform__sent { padding: 2.5rem 2rem; display: grid; gap: 0.875rem; }
.bb-cform__done { font-weight: 900; font-size: 1.875rem; text-transform: uppercase; color: #055d65; }
.bb-cform__sent p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: #3d2a17; }

/* ---------- Form fields (contact + order) ---------- */

.bb-field { display: grid; gap: 0.5rem; min-width: 0; }
.bb-field--full { grid-column: 1 / -1; }
.bb-field--narrow { max-width: 28.75rem; }
.bb-field__l { font-size: 0.875rem; font-weight: 800; }
.bb-field__opt { font-weight: 500; color: #5a4632; }
.bb-field__l--soft { font-weight: 600; color: #5a4632; }
.bb-field input, .bb-field select, .bb-field textarea {
	width: 100%; min-height: 3.25rem; padding: 0 0.875rem; border: 0.125rem solid #2a1a0b; border-radius: 0;
	background: #fdfcf6; color: #2a1a0b; font: inherit; font-size: 1.0625rem;
}
.bb-field textarea { padding: 0.875rem; line-height: 1.5; resize: vertical; }
.bb-field.is-error input, .bb-field.is-error select, .bb-field.is-error textarea { border-color: #b3261e; }
.bb-err { font-size: 0.8125rem; font-weight: 700; color: #b3261e; }
.bb-formerr { margin: 0; font-size: 0.8125rem; font-weight: 700; color: #b3261e; }
.bb-hp { position: absolute; left: -624.9375rem; width: 0.0625rem; height: 0.0625rem; overflow: hidden; }
.bb-btn--submit { display: flex; width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 1.0625rem; }
.bb-btn--submit:hover { background: #077580; }

/* ---------- Order ---------- */

.bb-orderwrap { background: #fff; }
.bb-order {
	padding-block: clamp(2.5rem, calc(5 * var(--bb-vw)), 4.5rem) clamp(4rem, calc(8 * var(--bb-vw)), 7rem);
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: start;
}
.bb-order__main { display: grid; gap: 2.75rem; min-width: 0; }
.bb-fs { margin: 0; padding: 0; border: 0; display: grid; gap: 1.125rem; min-width: 0; }
.bb-legend { padding: 0 0 0.75rem; margin: 0 0 1.125rem; display: flex; align-items: baseline; gap: 0.875rem; width: 100%; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-legend__n { font-weight: 900; font-size: 0.9375rem; color: #9d670d; }
.bb-legend__t { font-weight: 900; font-size: clamp(1.375rem, calc(2.2 * var(--bb-vw)), 1.75rem); text-transform: uppercase; letter-spacing: -.01em; }
.bb-fs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.125rem 1.25rem; }
.bb-group { display: grid; gap: 0.625rem; }

.bb-chips-in { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.bb-chipin, .bb-seg__opt { position: relative; }
.bb-chipin input, .bb-seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bb-chipin span {
	display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 1rem;
	border: 0.125rem solid #2a1a0b; background: #fdfcf6; color: #2a1a0b; font-weight: 800; font-size: 0.9375rem; cursor: pointer;
}
.bb-chipin:hover span { box-shadow: inset 0 -0.25rem 0 #e4b61f; }
.bb-chipin input:checked + span { background: #055d65; color: #fff; }
.bb-chipin input:checked + span::before { content: "✓"; }
.bb-chipin input:focus-visible + span, .bb-seg__opt input:focus-visible + span { outline: 0.1875rem solid #e4b61f; outline-offset: 0.125rem; }
.bb-group.is-error .bb-chipin span { border-color: #b3261e; }

.bb-seg { display: grid; border: 0.125rem solid #2a1a0b; }
.bb-seg--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.25rem), 1fr)); }
.bb-seg--2 { grid-template-columns: 1fr 1fr; }
.bb-seg--narrow { max-width: 28.75rem; }
.bb-seg--3.bb-seg--narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-seg__opt span {
	display: flex; align-items: center; height: 100%; min-height: 3.25rem; padding: 0.5rem 0.875rem;
	border-right: 0.125rem solid #2a1a0b; background: #fdfcf6; color: #2a1a0b; font-weight: 800; font-size: 0.9375rem; cursor: pointer;
}
.bb-seg__opt input:checked + span { background: #2a1a0b; color: #e4b61f; }

.bb-order__time { display: none; }
.bb-order:has(input[name="when"][value="Schedule a time"]:checked) .bb-order__time { display: grid; }
.bb-age {
	display: none; grid-template-columns: auto 1fr; gap: 0.875rem; align-items: start; padding: 1.125rem;
	background: #fbf5e4; border: 0.125rem solid #2a1a0b; cursor: pointer;
}
.bb-order:has(input[name="stores[]"][value="LCBO"]:checked) .bb-age,
.bb-order:has(input[name="stores[]"][value="Beer Store"]:checked) .bb-age { display: grid; }
.bb-age input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: #055d65; }
.bb-age.is-error { border-color: #b3261e; }
.bb-age__t { display: grid; gap: 0.25rem; }
.bb-age__t strong { font-size: 1rem; }
.bb-age__t > span { font-size: 0.875rem; line-height: 1.45; color: #5a4632; }
.bb-age__t .bb-err { font-size: 0.8125rem; color: #b3261e; }

.bb-sum { position: sticky; top: 8.25rem; display: grid; border: 0.1875rem solid #2a1a0b; background: #fdfcf6; box-shadow: 0.625rem 0.625rem 0 #e4b61f; }
.bb-sum__head { padding: 1.375rem 1.5rem; border-bottom: 0.1875rem solid #2a1a0b; display: grid; gap: 0.25rem; }
.bb-sum__head .bb-label { font-size: 0.75rem; }
.bb-sum__stores { font-weight: 900; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; }
.bb-sum__rows { padding: 1.125rem 1.5rem; display: grid; gap: 0.625rem; font-size: 0.9375rem; border-bottom: 0.0625rem solid #d8cdb9; }
.bb-sum__rows > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.bb-sum__rows strong { text-align: right; }
.bb-sum__total { padding: 1.125rem 1.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; border-bottom: 0.1875rem solid #2a1a0b; }
.bb-sum__total span { font-size: 0.8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bb-sum__total strong { font-weight: 900; font-size: 1.875rem; letter-spacing: -.02em; }
.bb-sum__foot { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 0.875rem; }
.bb-sum__foot p { margin: 0; font-size: 0.8438rem; line-height: 1.5; color: #5a4632; }
.bb-sum .bb-btn--submit { min-height: 3.75rem; font-size: 1.125rem; }

/* ---------- Order confirmed + 404 ---------- */

.bb-done__in {
	padding-block: clamp(3.5rem, calc(7 * var(--bb-vw)), 6.5rem);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28.75rem), 1fr)); gap: 3rem clamp(2rem, calc(5 * var(--bb-vw)), 4.5rem); align-items: start;
}
.bb-done__check { width: 5.25rem; height: 5.25rem; border-radius: 50%; background: #055d65; border: 0.1875rem solid #2a1a0b; display: grid; place-items: center; box-shadow: 0.375rem 0.375rem 0 #e4b61f; }
.bb-done__h { font-size: clamp(2.5rem, calc(5 * var(--bb-vw)), 4.5rem); }
.bb-done__btns { margin-top: 0.5rem; }
.bb-next { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; border-top: 0.1875rem solid #2a1a0b; max-width: 35rem; }
.bb-next li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.25rem 0.875rem; padding: 1.125rem 0; border-bottom: 0.0625rem solid #d8cdb9; }
.bb-next__n { font-weight: 900; font-size: 1.75rem; line-height: 1; color: #9d670d; }
.bb-next__t { font-weight: 800; font-size: 1.125rem; }
.bb-next__d { grid-column: 2; font-size: 0.9375rem; color: #5a4632; }
.bb-osum { border: 0.1875rem solid #2a1a0b; background: #fff; box-shadow: 0.625rem 0.625rem 0 #603912; }
.bb-osum__head { padding: 1.375rem 1.5rem; border-bottom: 0.1875rem solid #2a1a0b; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.bb-osum__title { font-weight: 900; font-size: 1.375rem; text-transform: uppercase; }
.bb-osum__ref { font-size: 0.8125rem; font-weight: 800; color: #9d670d; }
.bb-osum__rows { margin: 0; padding: 0.5rem 1.5rem 1.25rem; display: grid; font-size: 0.9375rem; }
.bb-osum__rows > div { display: grid; grid-template-columns: 8.125rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0; border-bottom: 0.0625rem solid #d8cdb9; }
.bb-osum__rows dt { font-weight: 800; color: #5a4632; }
.bb-osum__rows dd { margin: 0; white-space: pre-wrap; line-height: 1.45; overflow-wrap: anywhere; }
.bb-osum__fee { padding: 1.125rem 1.5rem; background: #2a1a0b; color: #fdfcf6; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.bb-osum__fee span { font-size: 0.8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #e4b61f; }
.bb-osum__fee strong { font-weight: 900; font-size: 1.625rem; }
.bb-lost { list-style: none; margin: 0; padding: 0; display: grid; border-top: 0.125rem solid #2a1a0b; max-width: 35rem; }
.bb-lost a { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0.25rem; border-bottom: 0.0625rem solid #d8cdb9; font-weight: 800; font-size: 1.125rem; }
.bb-lost a:hover { background: #fbf5e4; color: #2a1a0b; }

/* ---------- Blog index ---------- */

.bb-blogi { background: #fff; }
.bb-blogi__in { padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 5.5rem) clamp(4.5rem, calc(8 * var(--bb-vw)), 7.5rem); display: grid; gap: 2.5rem; }
.bb-feat {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr));
	background: #fdfcf6; border: 0.1875rem solid #2a1a0b; transition: transform .15s, box-shadow .15s;
}
.bb-feat:hover { transform: translate(-0.25rem, -0.25rem); box-shadow: 0.625rem 0.625rem 0 #e4b61f; color: #2a1a0b; }
.bb-feat__img { position: relative; aspect-ratio: 16 / 10; background: #efeae0; overflow: hidden; border-right: 0.1875rem solid #2a1a0b; }
.bb-feat__body { padding: clamp(1.5rem, calc(3 * var(--bb-vw)), 2.75rem); display: grid; gap: 0.875rem; align-content: center; }
.bb-feat__h { margin: 0; font-weight: 900; font-size: clamp(1.75rem, calc(3 * var(--bb-vw)), 2.625rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.bb-feat__body p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: #3d2a17; max-width: 44ch; }
.bb-feat__more { margin-top: 0; font-size: 0.9375rem; }
.bb-cards--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr)); }
.bb-pager { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.bb-pager .page-numbers { border: 0.125rem solid #2a1a0b; padding: 0.5rem 0.875rem; font-weight: 800; background: #fff; }
.bb-pager .page-numbers.current { background: #2a1a0b; color: #e4b61f; }

/* ---------- Blog post ---------- */

.bb-post__head { border-bottom: 0.1875rem solid #2a1a0b; }
.bb-post__headin { max-width: 55rem; padding-block: clamp(2.5rem, calc(5 * var(--bb-vw)), 4.5rem) clamp(2.25rem, calc(4 * var(--bb-vw)), 3.5rem); display: grid; gap: 1.25rem; }
.bb-post__back { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 800; color: #603912; }
.bb-post__h { margin: 0; font-weight: 900; font-size: clamp(2.375rem, calc(4.6 * var(--bb-vw)), 4.125rem); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; color: #603912; }
.bb-post__lede { margin: 0; font-size: 1.1875rem; line-height: 1.55; color: #3d2a17; }
.bb-post__meta { margin: 0; font-size: 0.875rem; font-weight: 600; color: #5a4632; }
.bb-post__herowrap { max-width: 68.75rem; padding-top: clamp(2rem, calc(4 * var(--bb-vw)), 3.5rem); }
.bb-post__hero { position: relative; aspect-ratio: 16 / 8; background: #efeae0; border: 0.1875rem solid #2a1a0b; box-shadow: 0.75rem 0.75rem 0 #e4b61f; overflow: hidden; }
.bb-post__body { max-width: 45rem; padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 5rem) clamp(4rem, calc(8 * var(--bb-vw)), 7rem); display: grid; gap: 2.5rem; }
.bb-post__faq { display: grid; gap: 0.5rem; }
.bb-post__faqh { margin: 0 0 0.5rem; font-weight: 900; font-size: clamp(1.5rem, calc(2.4 * var(--bb-vw)), 2rem); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; color: #603912; }
.bb-blogt--more .bb-blogt__in { padding-block: clamp(4rem, calc(8 * var(--bb-vw)), 7rem); }

.bb-prose { display: grid; gap: 1.375rem; font-size: 1.125rem; line-height: 1.7; color: #3d2a17; }
.bb-prose > * { margin: 0; }
.bb-prose h2 { margin-top: 1.25rem; font-weight: 900; font-size: clamp(1.5rem, calc(2.4 * var(--bb-vw)), 2rem); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; color: #2a1a0b; }
.bb-prose h3 { margin-top: 0.75rem; font-weight: 800; font-size: 1.25rem; line-height: 1.25; color: #2a1a0b; }
.bb-prose ul, .bb-prose ol { padding-left: 1.2em; display: grid; gap: 0.5rem; }
.bb-prose li::marker { color: #9d670d; }
.bb-prose a { color: #2a1a0b; font-weight: 700; border-bottom: 0.125rem solid #e4b61f; }
.bb-prose a:hover { color: #9d670d; }
.bb-prose strong { color: #2a1a0b; }
.bb-prose blockquote { margin: 0.75rem 0; padding: 1.375rem 0 0; border-top: 0.1875rem solid #2a1a0b; }
.bb-prose blockquote p { margin: 0; font-weight: 900; font-size: clamp(1.375rem, calc(2.2 * var(--bb-vw)), 1.75rem); line-height: 1.2; color: #2a1a0b; }
.bb-prose img { height: auto; border: 0.1875rem solid #2a1a0b; }
.bb-generic { background: #fff; padding-block: clamp(3rem, calc(6 * var(--bb-vw)), 5rem) clamp(4rem, calc(8 * var(--bb-vw)), 7rem); }
.bb-generic .bb-prose { max-width: 45rem; }

/* ---------- Local landing pages ---------- */

.bb-svc--landing { padding: clamp(4rem, calc(8 * var(--bb-vw)), 7rem) 0; }
.bb-more--landing { margin-top: 0; }
a.bb-more__cell { color: inherit; }
.bb-local--landing { border-top: 0.1875rem solid #2a1a0b; }

/* ---------- Inner pages: breakpoints ---------- */

@media (min-width: 1000px) {
	.bb-order { grid-template-columns: minmax(0, 1fr) 23.75rem; }
}
@media (min-width: 1080px) {
	.bb-more--landing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The optional email field has no reserved error line in the design. */
.bb-err[data-err="email"]:empty { display: none; }
.bb-phero--brown .bb-h1 { color: #fdfcf6; }