/* ==========================================================================
   Baker Street Mystery – Franchise opportunities page
   Builds on bsm-home.css + bsm-careers.css (hero, stats, lists, steps). Franchise pieces are prefixed bsmf-.
   ========================================================================== */

.bsmf-hero .bsmj-stamp { border-color: rgba(201, 168, 76, .85); color: var(--bsmh-gold); }
/* This photo is brighter than the careers one: shift the people right and darken behind the text. */
.bsmf-hero .bsmj-hero__bg { object-position: 85% 30%; }
.bsmf-hero::before { background: linear-gradient(90deg, rgba(10, 10, 10, .97) 0%, rgba(10, 10, 10, .9) 40%, rgba(10, 10, 10, .45) 75%, rgba(10, 10, 10, .25) 100%), linear-gradient(0deg, rgba(10, 10, 10, .9), transparent 40%); }

/* ---------- Why this format ---------- */
.bsmf-model { background: var(--bsmh-black); }
.bsmf-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.bsmf-card { position: relative; padding: 2rem 1.75rem; border: 1px solid var(--bsmh-border); border-top: 2px solid var(--bsmh-gold); background: var(--bsmh-card); transition: transform .25s, border-color .25s; }
.bsmf-card:hover { transform: translateY(-3px); border-color: var(--bsmh-gold-ring); border-top-color: var(--bsmh-gold); }
.bsmf-card__num { display: block; margin-bottom: 1rem; color: var(--bsmh-gold); font: 400 2.4rem/1 var(--bsmh-display); }
.bsmj .bsmf-card h3 { margin: 0 0 .7rem; color: var(--bsmh-white); font: 400 1.7rem/1.05 var(--bsmh-display); letter-spacing: .03em; text-transform: uppercase; }
.bsmj .bsmf-card p { margin: 0; color: var(--bsmh-muted); font-size: .98rem; line-height: 1.6; }

/* ---------- Proof ---------- */
.bsmf-proof { background: var(--bsmh-dark); }
.bsmj .bsmf-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.bsmf-logos li { display: flex; align-items: center; justify-content: center; height: 120px; padding: 1.25rem; border-radius: 4px; background: #f5f0e8; }
.bsmf-logos img { max-width: 100%; max-height: 80px; object-fit: contain; }
.bsmj .bsmf-press { margin: 2rem 0 0; color: var(--bsmh-muted-hi); font-size: .9rem; letter-spacing: .06em; text-align: center; }
.bsmf-press span { display: block; margin-bottom: .5rem; color: var(--bsmh-gold); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Event scale ---------- */
.bsmf-scale { background: var(--bsmh-black); }
.bsmf-scale__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bsmf-scale__stat { display: flex; flex-direction: column; justify-content: center; padding: 1.75rem 1.5rem; border: 1px solid var(--bsmh-border); border-top: 2px solid var(--bsmh-gold); background: var(--bsmh-card); }
.bsmf-scale__stat:first-child { border-color: var(--bsmh-gold-ring); background: linear-gradient(180deg, var(--bsmh-gold-dim), var(--bsmh-card) 70%); }
.bsmj .bsmf-scale__note { margin: 1rem 0 0; color: var(--bsmh-muted); font-size: .78rem; }
/* ---------- What guests tell us ---------- */
.bsmf-voices { background: var(--bsmh-dark); }
.bsmf-voices__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.bsmf-voices__stats > div { padding: 1.5rem; border: 1px solid var(--bsmh-gold-ring); background: linear-gradient(180deg, var(--bsmh-gold-dim), var(--bsmh-card) 70%); text-align: center; }
.bsmf-voices__stats small { margin-left: .15rem; color: var(--bsmh-muted); font-size: .45em; }
.bsmf-voices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bsmj .bsmf-voice { display: flex; flex-direction: column; margin: 0; padding: 1.75rem; border: 1px solid var(--bsmh-border); background: var(--bsmh-card); }
.bsmj .bsmf-voice__tag { margin: 0 0 1rem; color: var(--bsmh-gold); font: 500 .72rem/1.3 var(--bsmh-body); letter-spacing: .3em; text-transform: uppercase; }
.bsmj .bsmf-voice blockquote { flex: 1; margin: 0 0 1.25rem; padding: 0; border: 0; color: var(--bsmh-white); font: italic 400 1.15rem/1.55 var(--bsmh-serif); quotes: "“" "”"; }
.bsmf-voice blockquote::before { content: open-quote; }
.bsmf-voice blockquote::after { content: close-quote; }
.bsmj .bsmf-voice figcaption { color: var(--bsmh-muted); font-size: .8rem; letter-spacing: .04em; }

/* ---------- Who does what ---------- */
.bsmf-roles { background: var(--bsmh-black); }
.bsmf-roles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.bsmf-role { padding: 2rem; border: 1px solid var(--bsmh-border); background: var(--bsmh-card); }
.bsmf-role--us { border-color: var(--bsmh-gold-ring); background: linear-gradient(180deg, var(--bsmh-gold-dim), var(--bsmh-card) 55%); }
.bsmj .bsmf-role h3 { margin: 0 0 1.1rem; color: var(--bsmh-white); font: 400 2rem/1 var(--bsmh-display); letter-spacing: .03em; text-transform: uppercase; }
.bsmj .bsmf-role ul { margin: 0; padding: 0; list-style: none; }
.bsmj .bsmf-role li { position: relative; padding: .7rem 0 .7rem 1.5rem; border-top: 1px solid var(--bsmh-border); color: var(--bsmh-muted-hi); line-height: 1.5; }
.bsmf-role li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 7px; height: 7px; background: var(--bsmh-gold); transform: rotate(45deg); }

/* ---------- Toolkit ---------- */
.bsmf-tools { background: var(--bsmh-dark); }
.bsmf-tools__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.bsmf-tool { padding: 1.75rem; border: 1px solid var(--bsmh-border); background: var(--bsmh-card); transition: border-color .25s, transform .25s; }
.bsmf-tool:hover { border-color: var(--bsmh-gold-ring); transform: translateY(-3px); }
.bsmf-tool--star { grid-row: span 3; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; border-color: var(--bsmh-gold-ring); background: radial-gradient(circle at 20% 0%, rgba(201, 168, 76, .22), transparent 60%), var(--bsmh-card); }
.bsmj .bsmf-tool__kicker { margin: 0 0 .5rem; color: var(--bsmh-gold); font: 500 .72rem/1.3 var(--bsmh-body); letter-spacing: .3em; text-transform: uppercase; }
.bsmj .bsmf-tool h3 { margin: 0 0 .6rem; color: var(--bsmh-white); font: 400 1.8rem/1 var(--bsmh-display); letter-spacing: .03em; text-transform: uppercase; }
.bsmj .bsmf-tool--star h3 { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); }
.bsmj .bsmf-tool p:not(.bsmf-tool__kicker) { margin: 0; color: var(--bsmh-muted); font-size: .97rem; line-height: 1.6; }
.bsmj .bsmf-tool--star p:not(.bsmf-tool__kicker) { color: var(--bsmh-muted-hi); font: 400 1.08rem/1.6 var(--bsmh-serif); }

/* ---------- Grow at your own pace ---------- */
.bsmf-grow { background: var(--bsmh-black); }
.bsmj .bsmf-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; align-items: end; }
.bsmf-ladder li { position: relative; padding: 1.75rem; border: 1px solid var(--bsmh-border); border-bottom: 3px solid var(--bsmh-gold); background: var(--bsmh-card); }
.bsmf-ladder li:nth-child(1) { min-height: 230px; }
.bsmf-ladder li:nth-child(2) { min-height: 275px; }
.bsmf-ladder li:nth-child(3) { min-height: 320px; background: linear-gradient(0deg, var(--bsmh-gold-dim), var(--bsmh-card) 70%); border-color: var(--bsmh-gold-ring); border-bottom-color: var(--bsmh-gold); }
.bsmf-ladder li:not(:last-child)::after { content: "→"; position: absolute; right: -1.05rem; bottom: 1.75rem; z-index: 1; color: var(--bsmh-gold); font-size: 1.3rem; }
.bsmf-ladder__step { display: block; margin-bottom: .6rem; color: var(--bsmh-gold); font: 500 .72rem/1.3 var(--bsmh-body); letter-spacing: .3em; text-transform: uppercase; }
.bsmj .bsmf-ladder h3 { margin: 0 0 .6rem; color: var(--bsmh-white); font: 400 1.9rem/1 var(--bsmh-display); letter-spacing: .03em; text-transform: uppercase; }
.bsmj .bsmf-ladder p { margin: 0; color: var(--bsmh-muted); font-size: .98rem; line-height: 1.6; }

/* ---------- Fit + steps ---------- */
.bsmf-fit { background: var(--bsmh-dark); }
.bsmf-steps { background: var(--bsmh-black); }
.bsmj .bsmf-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.bsmf-faq { background: var(--bsmh-dark); }
.bsmf-faq .bsmh-wrap { max-width: 860px; }
/* No FAQs in the "franchise" category yet: hide the empty section instead of leaving a gap. */
.bsmf-faq:not(:has(.bsmh-faq__list, .bsmh-faq__empty)) { display: none; }

/* ---------- Interest form ---------- */
.bsmf-form { max-width: 760px; margin: 2.5rem auto 0; text-align: left; }
.bsmf-form--email { text-align: center; }
.bsmj .bsmf-form--email p { margin: 0 0 1.25rem; color: var(--bsmh-muted-hi); }
.bsmf-form--sample,
.bsmf-form--wpforms { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--bsmh-gold-ring); background: var(--bsmh-card); }
.bsmj .bsmf-form__note { margin: 0 0 1.5rem; padding: .6rem .9rem; border: 1px dashed var(--bsmh-gold-ring); color: var(--bsmh-muted); font-size: .85rem; }
.bsmf-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-bottom: 1.5rem; }
.bsmf-form__wide { grid-column: 1 / -1; }
/* Sample form (local copy only) */
.bsmf-form--sample label { display: flex; flex-direction: column; gap: .45rem; color: var(--bsmh-muted-hi); font: 500 .78rem/1.3 var(--bsmh-body); letter-spacing: .12em; text-transform: uppercase; }
.bsmj .bsmf-form--sample input,
.bsmj .bsmf-form--sample select,
.bsmj .bsmf-form--sample textarea { width: 100%; padding: .8rem .9rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: 0; background: var(--bsmh-black); color: var(--bsmh-white); font: 400 1rem/1.4 var(--bsmh-body); letter-spacing: 0; text-transform: none; }
.bsmf-form--sample input:focus,
.bsmf-form--sample select:focus,
.bsmf-form--sample textarea:focus { outline: none; border-color: var(--bsmh-gold); }
.bsmf-form .bsmh-btn[disabled] { opacity: .7; cursor: not-allowed; }

/* WPForms form on the live site: re-theme through WPForms' own style variables, then a few layout tweaks. */
.bsmf-form--wpforms .wpforms-container {
	--wpforms-field-background-color: #0a0a0a;
	--wpforms-field-border-color: rgba(255, 255, 255, .18);
	--wpforms-field-border-radius: 0px;
	--wpforms-field-text-color: #ffffff;
	--wpforms-field-menu-color: #181818;
	--wpforms-label-color: #c9c9c9;
	--wpforms-label-sublabel-color: #a3a3a3;
	--wpforms-label-error-color: #ff7b72;
	--wpforms-button-background-color: #c9a84c;
	--wpforms-button-border-color: #c9a84c;
	--wpforms-button-text-color: #0a0a0a;
	--wpforms-button-border-radius: 0px;
	--wpforms-page-break-color: #c9a84c;
	margin: 0 !important;
}
.bsmf-form--wpforms .wpforms-container .wpforms-field { padding: 0 0 1.25rem; }
.bsmf-form--wpforms .wpforms-container .wpforms-field-medium,
.bsmf-form--wpforms .wpforms-container .wpforms-field-small,
.bsmf-form--wpforms .wpforms-container .wpforms-field-row.wpforms-field-medium { max-width: 100% !important; }
.bsmf-form--wpforms .wpforms-container .wpforms-field-label { color: var(--bsmh-muted-hi); font: 500 .78rem/1.3 var(--bsmh-body); letter-spacing: .12em; text-transform: uppercase; }
.bsmf-form--wpforms .wpforms-container .wpforms-field-sublabel { font-size: .75rem; }
.bsmf-form--wpforms .wpforms-container .wpforms-required-label { color: var(--bsmh-gold); }
.bsmf-form--wpforms .wpforms-container input:focus,
.bsmf-form--wpforms .wpforms-container select:focus,
.bsmf-form--wpforms .wpforms-container textarea:focus { border-color: var(--bsmh-gold) !important; box-shadow: 0 0 0 1px var(--bsmh-gold) !important; }
.bsmf-form--wpforms .wpforms-container .wpforms-submit-container { padding-top: .5rem; }
.bsmf-form--wpforms .wpforms-container button.wpforms-submit {
	min-height: 56px; padding: 1.1rem 2.2rem; border: 1px solid var(--bsmh-gold);
	font: 500 .9rem/1 var(--bsmh-body) !important; letter-spacing: .15em; text-transform: uppercase;
	transition: background .2s, transform .2s;
}
.bsmf-form--wpforms .wpforms-container button.wpforms-submit:hover { background: var(--bsmh-gold-lt) !important; transform: translateY(-1px); }
.bsmf-form--wpforms .wpforms-confirmation-container-full { border: 1px solid var(--bsmh-gold-ring); background: var(--bsmh-gold-dim); color: var(--bsmh-white); }

/* ---------- Legal notice ---------- */
.bsmf-legal { padding: 2rem var(--bsmh-pad-x); border-top: 1px solid var(--bsmh-border); background: var(--bsmh-black); }
.bsmj .bsmf-legal p { max-width: 860px; margin: 0 auto; color: var(--bsmh-muted); font-size: .78rem; line-height: 1.6; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.bsmf-cards,
	.bsmf-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsmf-tool--star { grid-row: auto; grid-column: 1 / -1; }
	.bsmf-scale__stats,
	.bsmf-voices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsmj .bsmf-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsmj .bsmf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.bsmf-hero::before { background: linear-gradient(0deg, rgba(10, 10, 10, .97) 62%, rgba(10, 10, 10, .6) 82%, rgba(10, 10, 10, .3)); }
	.bsmf-hero .bsmj-hero__bg { object-position: 60% 0%; }
	.bsmf-cards,
	.bsmf-roles__grid,
	.bsmf-form__grid,
	.bsmf-tools__grid,
	.bsmf-voices__grid,
	.bsmf-voices__stats,
	.bsmj .bsmf-ladder,
	.bsmj .bsmf-flow { grid-template-columns: minmax(0, 1fr); }
	.bsmf-ladder li { min-height: 0 !important; }
	.bsmf-ladder li:not(:last-child)::after { content: "↓"; right: 1.5rem; bottom: -1.2rem; }
	.bsmj .bsmf-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsmf-logos li { height: 96px; }
}