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

   .bb-hero, .bb-insta and .bb-ig are page-scoped by design: site.css states
   that these differ page to page and stay in each page's own CSS. The values
   here are the Careers ones and are NOT interchangeable with Home's.
   ========================================================================== */

body { background: #DFD6C8; }

.bb-screen { background: #DFD6C8; }

@media (max-width: 900px) {
	/* Authored in the source helmet. Careers renders no .bb-h1 today; the
	   rule is carried across rather than dropped, as on Home. */
	.bb-h1 { font-size: 44px !important; }
}

/* --------------------------------------------------------------------------
   Hero — gold band, lettering lockup, coffee-pour photo sliding in from the
   right. The source's 5-column Instagram grid and this hero are desktop-only;
   responsive work is deferred to the theme (HANDOFF.md).
   -------------------------------------------------------------------------- */
.bb-hero {
	position: relative;
	background: #D2C082;
	border-bottom: 1.5px solid #231F20;
	overflow: visible;
}

/* Sits BELOW the band (bottom:-38px), unlike Home's trim which sits above. */
.bb-hero__trim {
	position: absolute;
	bottom: -38px;
	left: 0;
	right: 0;
	height: 39px;
	background-image: url("../../images/trim-triangles-gold.png");
	background-size: auto 39px;
	background-repeat: repeat-x;
	pointer-events: none;
}

/* Only `top` is set, so height:auto is safe here — the intrinsic height does
   not fight a bottom offset. careers.js adds .is-in 200ms after load. */
.bb-hero__photo {
	position: absolute;
	right: 0;
	top: calc(50% + 40px);
	transform: translateY(-50%) translateX(240px);
	width: 560px;
	height: auto;
	max-width: 52%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.bb-hero__photo.is-in {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Round 2 — the gap below the fixed header. The client asked for breathing
   room that is consistent page to page: 64px desktop, 48 at 900, 40 at 400.
   The header is position:fixed and site.js publishes its live height as
   --bb-header-h (~101px desktop, ~89px phone); the fallback only applies for
   the instant before that runs. HANDOFF.md forbids hardcoding the height.
   This REDUCES Careers' authored 220px (a 119px gap) — see the report. */
.bb-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(var(--bb-header-h, 101px) + 64px) 24px 140px;
}

.bb-hero__col { max-width: 60%; }

/* margin-top was 14px as authored; it is 0 now so the entire header-to-content
   gap lives in .bb-hero__inner's padding-top and measures to the brief's
   number rather than 14px more than it. */
.bb-hero__title {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-top: 0;
	margin-bottom: 0;
}

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

/* Source authored one paragraph at margin:0. .bb-rt's last-child reset keeps
   that exact result while still spacing a second paragraph if one is added. */
.bb-hero__body { margin: 0; max-width: 52ch; font-size: 18px; }
.bb-hero__body p { font-size: 18px; line-height: 1.65; }

/* --------------------------------------------------------------------------
   Application form
   Markup and styling only — see the template header. The success panel and
   the form are two variants of ONE state wrapper: .bb-apply__states carries
   .is-sent, and CSS decides which variant shows. Nothing sets .is-sent until
   Gravity Forms is wired, so the success panel is currently unreachable.
   -------------------------------------------------------------------------- */
.bb-apply { background: #DFD6C8; }

.bb-apply__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 80px 24px;
}

.bb-apply__done {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	background: #E6E3D9;
	border: 1.5px solid #231F20;
	border-radius: 12px;
	padding: 44px 46px;
	box-shadow: 6px 6px 0 #231F20;
}

.bb-apply__states.is-sent .bb-apply__done { display: flex; }
.bb-apply__states.is-sent .bb-apply__panel { display: none; }

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

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

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

.bb-apply__again {
	background: transparent;
	color: #231F20;
}

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

/* The octagonal polygon (CLAUDE.md). Geometry comes from .bb-oct in
   components.css: 22px outer cut, 20.8px inner, 10px offset — exactly the
   numbers the source authored. */
.bb-apply__card {
	background: #E5E3DA;
	padding: 44px 46px;
}

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

.bb-apply__note {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #231F20;
	margin: 0 0 30px;
	text-align: center;
}

/* Source spacing: the first group has no top margin and every later group is
   18px below the one before, whatever its layout. */
.bb-apply__group + .bb-apply__group { margin-top: 18px; }

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

.bb-apply__label {
	display: block;
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: 7px;
}

/* Authored as an inline span coloured #231F20 — the same colour the label
   already inherits, so it renders no differently. Kept as authored. */
.bb-apply__labelnote { color: #231F20; }

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

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

/* --------------------------------------------------------------------------
   Instagram
   The same band as Home with two authored differences, both preserved: this
   one has a top border, and its heading is not nudged with the inline-block
   translate Home uses. The tiles are static here — no reveal, no stagger.
   -------------------------------------------------------------------------- */
.bb-insta {
	background: #DCB99D;
	border-top: 2px solid #231F20;
	border-bottom: 2px solid #231F20;
}

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

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

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

/* "Insta do just like home": Home nudges the script heading down onto the
   dotted rule with an inline-block translate. Careers' port dropped it, which
   is the one place the two bands rendered differently at desktop. Reset at
   1024 where the head centres, exactly as home.css does. */
.bb-insta__script {
	font-family: 'Fonseca Script', cursive;
	font-weight: 400;
	font-size: 72px;
	line-height: .75;
	text-transform: none;
	margin: 0 0 -12px;
	color: #231F20;
	display: inline-block;
	transform: translateY(28px);
}

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

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

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

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

/* Five across at desktop; the collapse is in the responsive block below and
   matches Home's. */
.bb-ig { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }

/* max-width from Home's .bb-ig__tile: it stops a tile from being sized by its
   image rather than by its grid track. */
.bb-ig__tile {
	display: block;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	border: 1.5px solid #231F20;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 6px 6px 0 #231F20;
}

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


/* ==========================================================================
   Careers — responsive
   Desktop above 1305px is client-approved and untouched.
   ========================================================================== */

/* The hero photo reveals from 240px off the right edge (see .bb-hero__photo
   above), so until careers.js lands .is-in — and for the 700ms the transition
   runs — it sits outside the viewport and widens the whole document. This was
   the largest page overflow on the site: up to 270px, at every width from 1305
   down. `clip`, not `hidden`, per RESPONSIVE-BRIEF: hidden would make the hero
   a scroll container. overflow-y stays visible so .bb-hero__trim, which hangs
   38px BELOW the band, still shows. */
.bb-hero {
	overflow-x: clip;
	overflow-y: visible;
}

/* --------------------------------------------------------------------------
   1305 — progressive tightening. The copy column (60%) and the photo (52%)
   together came to 112% of the band, so from 1305 down the hero body ran
   underneath the coffee-pour photograph. Both are pulled in so the text keeps
   a clear gutter; nothing stacks yet.
   -------------------------------------------------------------------------- */
@media (max-width: 1305px) {
	.bb-hero__col { max-width: 54%; }
	.bb-hero__photo { max-width: 42%; }
}

@media (max-width: 1200px) {
	/* Only the bottom tightens; the top gap stays on the --bb-header-h calc so
	   it is the same 64px it is at 1440. */
	.bb-hero__inner { padding-bottom: 120px; }
}

/* --------------------------------------------------------------------------
   1024 — the Instagram band centres, exactly as Home does. The handle button
   is absolutely positioned over the dotted rule and starts colliding with the
   script heading well before the main break.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.bb-hero__inner { padding-bottom: 110px; }

	.bb-insta__head {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
	}

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

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

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

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

	/* min-width:0 matters as much as position:static — the authored 300px
	   floor is wider than the band's content box at 320. */
	.bb-insta__handle {
		position: static;
		transform: none;
		min-width: 0;
	}

	/* white-space:nowrap on this one sentence was setting a 566px floor on the
	   document: it, not the hero photo, was the page overflow at 400 and 320
	   (scrollWidth stuck at 590 whatever the viewport). */
	.bb-insta__note {
		white-space: normal;
		text-align: center;
		margin: 16px 0 0;
	}
}

/* --------------------------------------------------------------------------
   900 — the stack point, matching every other page.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* ---- Hero: the photo leaves the absolute layer and drops below the copy.
	       Side by side there is no width left for both, and the brief forbids
	       text sitting on a photograph. order: is used rather than
	       column-reverse so the source order (photo first) is overridden
	       explicitly; .bb-hero__trim is absolute and unaffected. ---- */
	.bb-hero {
		display: flex;
		flex-direction: column;
	}

	.bb-hero__inner {
		order: 1;
		width: 100%;
		box-sizing: border-box;
		padding: calc(var(--bb-header-h, 101px) + 48px) 24px 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.bb-hero__col { max-width: 100%; }

	/* ROUND 2 — "Hero Image should stay aligned to right side of screen".
	   Round 1 centred this photo when it dropped into flow; the client wants
	   it flush right instead, as it is at desktop (right: 0). align-self on
	   the section's flex column puts it on the viewport's right edge rather
	   than inside .bb-hero__inner's 24px gutter, so "right side of screen" is
	   literal. It stays BELOW the copy: side by side at this width there is no
	   room for both, and the brief forbids text sitting on a photograph.

	   Both the resting and the .is-in transform have to go: translateY(-50%)
	   was a correction for top:calc(50% + 40px) and would drag the photo half
	   its own height up into the body copy now that it is in flow. opacity is
	   deliberately NOT set here, so the base 0 -> .is-in 1 fade still runs.
	   (careers.js reveals this one on a 200ms timer, not an
	   IntersectionObserver, so the clipped-corner reveal trap does not apply —
	   verified at opacity 1 at all 11 widths.) */
	.bb-hero__photo,
	.bb-hero__photo.is-in {
		order: 2;
		position: static;
		align-self: flex-end;
		transform: none;
		width: min(420px, 78%);
		max-width: none;
		margin: 0 0 56px auto;
	}

	.bb-hero__title { margin-inline: auto; }
	.bb-hero__script { margin: 26px 0 18px; }
	.bb-hero__body { margin-inline: auto; }

	/* ---- Application form ---- */
	.bb-apply__inner { padding: 64px 24px; }
	.bb-apply__card { padding: 36px 34px; }
	.bb-apply__done { padding: 36px 34px; }
	.bb-apply__heading { font-size: 40px; }

	/* ---- Instagram: the head is already centred from 1024. ---- */
	.bb-insta__script { font-size: 56px; }

	/* The content-box trap: width:100% plus the button's own 34px side padding
	   made the handle 68px wider than the rule it sits in (372 in 352 at 400).
	   Careers has its own .bb-insta__* rules, so Home's fix does not reach it. */
	.bb-insta__handle {
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
		padding: 15px 24px;
	}

	/* Two up, with the fifth spanning the full row — the same collapse Home
	   uses. Held at five across, the tiles were 33px square at 320. This is a
	   deliberate change to the "five at every width" note above, which
	   described the desktop-only port, not an approved mobile layout. */
	.bb-ig { grid-template-columns: 1fr 1fr; gap: 18px; }

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

/* --------------------------------------------------------------------------
   640 — small tablet / large phone.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.bb-hero__inner { padding: calc(var(--bb-header-h, 101px) + 48px) 20px 36px; }
	.bb-hero__script { font-size: 28px; }
	.bb-hero__body,
	.bb-hero__body p { font-size: 17px; }

	.bb-apply__inner { padding: 56px 20px; }
	.bb-apply__card { padding: 30px 26px; }
	.bb-apply__done { padding: 30px 26px; }
	.bb-apply__heading { font-size: 34px; }
	.bb-apply__note { letter-spacing: .16em; margin-bottom: 24px; }

	/* Gravity Forms, Careers only. gravity.css sets ONE 18px value for both
	   grid axes; on the plugin's 12-column grid that is 11 column gaps = 198px
	   of gutter. Inside this card the field row only has 176px at 320, so every
	   1fr track collapsed to 0 and the grid overflowed by exactly 22px — the
	   198 > 176 the audit reports on all six fields. Gravity drops its own
	   half-width fields to full width at 641px, so below that the column gutter
	   buys nothing and is zeroed. The row gap is untouched.
	   NOTE: this is a shared-file bug (assets/css/gravity.css, --bb-gf-gap);
	   fixed here only because this agent owns careers.css alone. */
	.bb-apply .bb-gf .gform_wrapper.gravity-theme .gform_fields {
		grid-column-gap: 0;
	}

	/* "Submit Application" is nowrap at 28px side padding = 198px, wider than
	   the card at 320. The design's own .bb-apply__submit was width:100%, so a
	   full-width button on phone is the authored treatment, not an invention. */
	.bb-apply .bb-gf .gform_wrapper.gravity-theme .gform_button,
	.bb-apply .bb-gf .gform_wrapper.gravity-theme button[type="submit"],
	.bb-apply .bb-gf .gform_wrapper.gravity-theme input[type="submit"] {
		box-sizing: border-box;
		width: 100%;
		padding: 15px 20px;
		white-space: normal;
	}

	.bb-insta__inner { padding: 64px 20px; }
	.bb-insta__script { font-size: 44px; }
	.bb-ig { gap: 14px; }
}

/* --------------------------------------------------------------------------
   400 / 320 — phone. These values are sized so 320 needs no tier of its own.
   The octagon's 10px offset shadow sits to the right of the panel, so the
   16px gutter below is the floor: anything tighter and the ink plate clips.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	.bb-hero__inner { padding: calc(var(--bb-header-h, 89px) + 40px) 16px 30px; }
	.bb-hero__script { font-size: 25px; margin: 20px 0 14px; }
	.bb-hero__body,
	.bb-hero__body p { font-size: 16px; }
	.bb-hero__photo,
	.bb-hero__photo.is-in { margin-bottom: 44px; }

	.bb-apply__inner { padding: 48px 16px; }
	.bb-apply__card { padding: 24px 20px; }
	.bb-apply__done { padding: 24px 20px; }
	.bb-apply__heading { font-size: 28px; }
	.bb-apply__note { font-size: 14px; letter-spacing: .12em; margin-bottom: 20px; }

	.bb-insta__inner { padding: 52px 16px; }
	.bb-insta__script { font-size: 38px; }
	.bb-ig { gap: 12px; }
}

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

/* Client: "Careers bb-hero__title image needs margin top at about 8px to be
   more even with the H1 titles on other pgs". Round 2 zeroed this to make the
   header gap measure cleanly; she is matching it to the other pages by eye
   instead, which is the thing that actually matters. */
@media (max-width: 1024px) {
	.bb-hero__title { margin-top: 8px; }
}

/* Octagon optical gutter - the apply panel's offset ink plate hung 10px
   further right than its left gap at every width from 1024 down. Same
   correction as Contact and Catering. */
@media (max-width: 1024px) {
	.bb-apply__panel { margin-right: 10px; }
}

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