/* ==========================================================================
   Contact
   Every rule below is a lift of an inline style="" (or of the page's own
   <helmet> block) from Contact.dc.html. Values are unchanged; only their
   location moved.

   Not repeated here, because site.css / components.css already own them:
     html{overflow-x:hidden}, a{color:#E47245}, a:hover{color:#C4552B},
     the .bb-split / .bb-g2 / .bb-nav / .bb-hide-sm rules at 900px,
     the field fill + border + focus ring (.bb-field), the dropdown arrow
     (.bb-select — this page has no <select>), and the octagon layers
     (.bb-oct / __shadow / __stroke / __inner, 22px / 20.8px).
   ========================================================================== */

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

.bb-screen { background: #DFD6C8; }

/* The source helmet authors this at 44px on Contact (Home authors 46px).
   No element on this page carries .bb-h1 today; the value is kept because it
   is page-specific and the guide places these overrides in the page CSS. */
@media (max-width: 900px) {
	.bb-h1 { font-size: 44px !important; }
}

/* --------------------------------------------------------------------------
   Contact section
   -------------------------------------------------------------------------- */
.bb-contact {
	position: relative;
	background: #DFD6C8;
	border-bottom: 1.5px solid #231F20;
	overflow: hidden;
}

/* Authored as background-size:cover on a div at inset:0;left:55%.
   As an <img> it needs an explicit height — with height:auto the intrinsic
   height wins and top/bottom are ignored. */
.bb-contact__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 55%;
	width: 45%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.bb-contact__fade {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 260px;
	background: linear-gradient(to bottom, #DFD6C8 0%, rgba(223, 214, 200, .78) 55%, rgba(223, 214, 200, 0) 100%);
	pointer-events: none;
}

/* Round 2 — top gap and the octagon's optical gutter.

   padding-top: the client asked for a consistent, generous gap below the
   fixed header (64 desktop / 48 at 900 / 40 at 400). The header height is
   published live by site.js as --bb-header-h (~101px desktop, ~89px phone);
   the fallback is only what applies before that runs. Never hardcoded.

   Side padding is SYMMETRIC and the octagon carries the compensation instead
   (.bb-contact .bb-oct below). Home does the opposite — asymmetric padding on
   .bb-featured__inner — because the card is the only thing in that container.
   Here the info column shares the container and has no offset plate, so it
   needs the symmetric gutter; this is the client's own suggestion. */
.bb-contact__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(var(--bb-header-h, 101px) + 64px) 25px 120px;
}

/* The octagon's offset ink plate sits 10px to the RIGHT of the card, so the
   card's optical right edge is 10px further out than its box. Pulling the box
   in by exactly the offset puts the PLATE on the container's padding edge, so
   the optical left and right gutters are both 25px. */
.bb-contact .bb-oct { margin-right: 10px; }

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

/* --------------------------------------------------------------------------
   Left column — title, script line, address, phone, email, hours
   -------------------------------------------------------------------------- */
.bb-contact__info {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* margin-top was 14px as authored; it is 0 now so the whole header-to-content
   gap lives in .bb-contact__inner's padding-top and measures to the number the
   brief asks for rather than 14px more than it. */
.bb-contact__title {
	width: min(100%, 480px);
	height: auto;
	display: block;
	margin-top: 0;
	margin-bottom: 0;
}

.bb-contact__script {
	font-family: 'Fonseca Script', cursive;
	font-size: 34px;
	color: #231F20;
	margin-top: 24px;
	margin-bottom: 44px;
}

/* .bb-label supplies the family/size/tracking/case/colour. */
.bb-contact__heading {
	margin-top: 0;
	margin-bottom: 14px;
}

.bb-contact__heading--hours { margin-top: 36px; }

.bb-contact__addr {
	display: block;
	font-size: 18px;
	line-height: 1.7;
	margin-top: 0;
	margin-bottom: 8px;
	color: #231F20;
	text-decoration: none;
}

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

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

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

.bb-contact__email {
	font-size: 17px;
	color: #E47245;
	text-decoration: none;
	font-weight: 700;
}

/* box-sizing: the site runs on content-box, and width:100% plus the 1.5px
   border made this 3px wider than the column it sits in. */
.bb-contact__hours {
	box-sizing: border-box;
	border: 1.5px solid #231F20;
	border-radius: 12px;
	overflow: hidden;
	max-width: 360px;
	width: 100%;
}

.bb-contact__hoursrow {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 20px;
	background: #E6E3D9;
}

/* The source authors the divider on the first row only. That is derived from
   position, so it is a selector rather than a field — and written as
   :not(:last-child) so a third hours row still gets the rule. */
.bb-contact__hoursrow:not(:last-child) { border-bottom: 1.5px solid #231F20; }

.bb-contact__hoursdays {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
}

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

.bb-contact__hourstimes {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 18px;
}

/* --------------------------------------------------------------------------
   Form card (octagon). Placeholder markup awaiting Gravity Forms.
   -------------------------------------------------------------------------- */
.bb-contact__card {
	background: #E5E3DA;
	padding: 38px 40px;
}

/* The source's "sent" / "notSent" conditional twins, collapsed to one element
   carrying the state. Both variants live here; the toggle is JS's job.

   Nothing toggles it today: there is no submission on this page, so .is-sent
   is unreachable until the Gravity Forms embed (or its confirmation) lands.
   The rules are kept so the approved success design is not lost. */
.bb-contact__sent {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.bb-contact__card.is-sent .bb-contact__sent { display: flex; }
.bb-contact__card.is-sent .bb-contact__compose { display: none; }

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

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

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

/* .bb-btn + .bb-btn--sm carry the pill, the 12px/26px padding and the 14px
   type; only the outline-on-nothing colouring is specific to this button. */
.bb-contact__ghost {
	background: transparent;
	color: #231F20;
}

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

/* Round 2, "centre ALL content": this matches Careers' .bb-apply__heading,
   which is already centred and client-approved. The fields themselves keep
   their left-aligned labels — centring a form's labels is not what the note
   is about. */
.bb-contact__formheading {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 28px;
	text-transform: uppercase;
	text-align: center;
	margin-top: 0;
	margin-bottom: 24px;
}

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

/* .bb-label supplies the family/size/tracking/case/colour. */
.bb-contact__flabel {
	display: block;
	margin-bottom: 7px;
}

/* .bb-field now carries the full field treatment, box metrics included. */
.bb-contact__input--area { resize: vertical; }

.bb-contact__messagewrap { margin-top: 18px; }

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


/* ==========================================================================
   Contact — responsive
   The hero photo is absolutely positioned at left:55%/width:45%. Once the
   columns narrow, the centred info column runs straight over it and the text
   becomes unreadable against the coffee beans. Below the stack the photo
   becomes a full-width backdrop and the text sits on its own tinted panel,
   so nothing is ever read directly off the photograph.
   ========================================================================== */

@media (max-width: 900px) {
	/* Top gap drops to 48px below the header; the bottom comes in with it so
	   the section does not end up top-light. */
	.bb-contact__inner {
		padding: calc(var(--bb-header-h, 101px) + 48px) 25px 90px;
	}

	.bb-contact__grid {
		grid-template-columns: 1fr !important;
		gap: 34px;
	}

	/* Stacked, the info panel and the card are the same column. The card is
	   10px narrower (see .bb-contact .bb-oct) so its offset plate lands on the
	   panel's right edge, not 10px past it. */
	.bb-contact__card { padding: 34px 32px; }

	.bb-contact__photo {
		left: 0;
		width: 100%;
		opacity: .5;
	}

	/* The tinted panel: brand cream at 92%, not a grey wash.
	   box-sizing is required - the site runs on content-box (the design
	   system's base.css is deliberately not loaded), so the padding and the
	   1.5px border would otherwise push this past its grid column. */
	.bb-contact__info {
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		background: rgba(223, 214, 200, .92);
		border: 1.5px solid #231F20;
		border-radius: 10px;
		padding: 30px 24px;
	}
}

@media (max-width: 640px) {
	.bb-contact__inner { padding-bottom: 72px; }
}

@media (max-width: 560px) {
	.bb-contact__info { padding: 24px 16px; }
}

/* The client: "do less padding in that form container at 480px and under".
   Her reference was Home's 25/15, which this page gets from the symmetric
   gutter + the octagon's 10px pull-in; what is left to give back is the
   card's own inside padding, and that is what shrinks here. */
@media (max-width: 480px) {
	.bb-contact__card { padding: 26px 22px; }
}

@media (max-width: 400px) {
	.bb-contact__inner {
		padding: calc(var(--bb-header-h, 89px) + 40px) 16px 56px;
	}

	.bb-contact__info { padding: 20px 14px; }
	.bb-contact__card { padding: 22px 18px; }
}

/* ---- The octagon must never be taller than its own content ----
   Same fix as catering.css, same reason: this octagon is a grid item, so it
   stretches to the row height set by the contact-info column. .bb-oct__shadow
   is inset:0 against it and fills that height, while the cream face wraps only
   its content - so once Gravity Forms swaps the form for a short confirmation,
   the shadow shows as a dark slab below the box. Found on Catering by the
   client; this page has the identical structure. Verified to change nothing in
   the pre-submit state, where the form already sets the row height. */
.bb-contact__grid > .bb-oct,
.bb-contact__inner .bb-split > .bb-oct { align-self: start; }

/* ---- Script font: line-height must be PINNED, never "normal" ----
   Found on Mac Safari (BrowserStack): the Catering masthead script ran up
   behind the pill above it. Cause is not the margin - it is that these script
   elements were left at line-height:normal, which every engine computes from
   the FONT'S OWN metrics. Fonseca Script is a slanted script with tall
   ascenders, and Safari and Chromium read its ascender metrics differently, so
   the line box is tighter on Safari and the ink overflows upward into the gap.

   1.688 is exactly what Chromium already resolves "normal" to for this face
   (measured: 54px at 32px), so the approved rendering does not move - it just
   stops being whatever each browser decides. */
.bb-contact__script { line-height: 1.688; }