/*
Theme Name: BPM Theme
Theme URI: https://burningpassionmedia.com
Author: Burning Passion Media
Author URI: https://burningpassionmedia.com
Description: Standalone block theme for Burning Passion Media. Built on theme.json + ACF Pro + custom Gutenberg blocks (BPM blocks). No parent theme, no page builders. Pass 1 ships Home page (4.1–4.7), bpm_work CPT, and 3 seed posts.
Version: 1.1.5
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
License URI: https://burningpassionmedia.com
Text Domain: bpm-theme
Tags: full-site-editing, block-theme, custom-blocks, portfolio
*/

/* ==========================================================================
   BPM Theme — Global tokens (Spec v1.0 §1.1, §1.6, §1.7)
   These mirror theme.json. Some places need raw CSS custom properties
   (for view.css overrides and inline computed states), so they live here too.
   ========================================================================== */

:root {
	/* Color tokens — locked, V1.8 */
	--bpm-flame:               #FF0A00;
	--bpm-flame-deep:          #D60900;
	--bpm-ember:               #E58600;
	--bpm-blaze:               #FF7300;
	--bpm-yellow:              #E5C500;
	--bpm-bg-dark:             #141414;
	--bpm-bg-light:            #F5F5F3;
	--bpm-text:                #171717;
	--bpm-text-muted:          #6B6B6B; /* v1.1.6: nudged from #6F6F6F (CR 4.60) to #6B6B6B (CR 4.91) for WCAG AA safety margin on --bpm-bg-light */
	--bpm-text-on-dark:        #F5F5F3;
	--bpm-text-muted-on-dark:  #A8A8A8;

	/* Type stacks */
	--bpm-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bpm-font-body:    "Lora", Georgia, "Times New Roman", serif;

	/* Layout */
	--bpm-container:        1280px;
	--bpm-container-wide:   1440px;
	--bpm-gutter-mobile:    24px;
	--bpm-gutter-tablet:    32px;
	--bpm-gutter-desktop:   64px;

	/* Hairlines */
	--bpm-hairline-on-dark: rgba(245, 245, 243, 0.08);
	--bpm-hairline-card:    rgba(245, 245, 243, 0.08);
}

/* ==========================================================================
   Base resets — block themes ship a lot of WP-emitted CSS; we override a few.
   ========================================================================== */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--bpm-font-body);
	color: var(--bpm-text);
	background: var(--bpm-bg-light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ==========================================================================
   Neutralize WP's default 24px block-gap between top-level template children
   AND between sibling sections inside .entry-content. Our sections own their
   own padding & background; adjacent sections must butt with no gap.

   v1.2.3 amendment: v1.2.2 dropped the .is-layout-flow / .is-layout-constrained
   selectors and !important to stop suppressing legal-page internal rhythm.
   That fix was correct in spirit but left a regression: pages that render
   their content as multiple sibling <section>s INSIDE .entry-content (e.g.
   /studio's 11 chapters) got WP's 24px injection between every chapter,
   showing as light bars between dark chapters.

   Resolution: add a narrow reset for .entry-content > * (and .bpm-page-main
   > *). This kills the section-to-section gap without touching internal
   block-group rhythm on legal pages, where .entry-content has only ONE
   top-level block-group child (so the reset is a no-op there). Plain
   selectors (no :where) at normal specificity beat WP's zero-specificity
   :where() rules — no !important needed.
   ========================================================================== */
.wp-site-blocks > *,
.wp-site-blocks > main > *,
.wp-site-blocks .bpm-page-main > *,
.wp-site-blocks .entry-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
/* The <main> wrapper carries the body's bg-light, which leaks between dark
   sections. Make the main transparent so each section's own bg is the only paint. */
main.wp-block-group,
.wp-site-blocks > main {
	background: transparent !important;
}
/* And eliminate any layout flex/grid gap on the page-level wrappers. */
.wp-site-blocks,
.wp-site-blocks > main {
	gap: 0 !important;
	row-gap: 0 !important;
}

/* Container helper used by block render.php files */
.bpm-container {
	max-width: var(--bpm-container);
	margin-inline: auto;
	padding-inline: var(--bpm-gutter-mobile);
}
@media (min-width: 768px)  { .bpm-container { padding-inline: var(--bpm-gutter-tablet); } }
@media (min-width: 1025px) { .bpm-container { padding-inline: var(--bpm-gutter-desktop); } }

/* Flame highlight inside cinematic H1/H2 — used by 4.2 and 4.6 */
.bpm-flame-text { color: var(--bpm-flame); }

/* ==========================================================================
   BPM buttons — Section 1.8 (Primary / Secondary / Tertiary)
   ========================================================================== */
.bpm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--bpm-font-display);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	user-select: none;
	transition: transform 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.bpm-btn__arrow { transition: transform 200ms ease-out; display: inline-block; }
.bpm-btn:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 2px; }

/* Primary */
.bpm-btn--primary {
	background: var(--bpm-flame);
	color: #FFFFFF;
	border-radius: 999px;
	padding: 0 24px;
	height: 48px;
	font-size: 14px;
}
.bpm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 12px rgba(255, 10, 0, 0.30); }
.bpm-btn--primary:hover .bpm-btn__arrow { transform: translateX(4px); }

/* Header-specific primary (40px height) */
.bpm-btn--primary-header { height: 40px; padding: 0 16px; font-size: 14px; }

/* Closing-CTA primary (56px) */
.bpm-btn--primary-final { height: 56px; padding: 0 24px; font-size: 15px; }
@media (max-width: 767px) { .bpm-btn--primary-final { padding: 0 32px; } }

/* Secondary — v1.2.2 global rule:
   Transparent fill, only the COLOR changes between contexts.
   Default (light backgrounds) = flame red. Dark sections override
   --bpm-secondary-color to #FFFFFF. Border follows color via currentColor.
   Everything else (height, padding, radius, font, hover) is unchanged. */
.bpm-btn--secondary {
	background: transparent;
	color: var(--bpm-secondary-color, var(--bpm-flame));
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0 24px;
	height: 48px;
	font-size: 14px;
}
.bpm-btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 0 8px rgba(255, 10, 0, 0.25); }
.bpm-btn--secondary:hover .bpm-btn__arrow { transform: translateX(4px); }

/* Dark-section utility — v1.2.3 (replaces v1.2.2 enumerated selector list).
   Any section rendered on --bpm-bg-dark carries .bpm-section--dark in markup.
   Single global rule: sets the dark background and flips --bpm-secondary-color
   to white so .bpm-btn--secondary inherits white-on-dark automatically.
   Adding a new dark section = add the class in the template, never edit CSS. */
.bpm-section--dark {
	background: var(--bpm-bg-dark);
	--bpm-secondary-color: #FFFFFF;
}

/* Tertiary — Section 1.8 + amended global rule */
.bpm-btn--tertiary {
	background: transparent;
	color: var(--bpm-flame);
	font-size: 13px;
	letter-spacing: 0.12em;
	gap: 6px;
	padding: 0;
	height: auto;
	position: relative;
}
.bpm-btn--tertiary .bpm-btn__label { position: relative; padding-bottom: 4px; }
.bpm-btn--tertiary .bpm-btn__label::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--bpm-flame);
	transition: width 200ms ease-out;
}
@media (hover: hover) {
	.bpm-btn--tertiary:hover .bpm-btn__label::after { width: 100%; }
	.bpm-btn--tertiary:hover .bpm-btn__arrow { transform: translateX(4px); }
}
.bpm-btn--tertiary:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 4px; }

/* Reduced motion — keep underline + color affordances; suppress translation/lift */
@media (prefers-reduced-motion: reduce) {
	.bpm-btn, .bpm-btn__arrow { transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out; }
	.bpm-btn--primary:hover, .bpm-btn--secondary:hover { transform: none; }
	.bpm-btn:hover .bpm-btn__arrow { transform: none; }
}

/* ==========================================================================
   Eyebrow utility (matches §1.6 + per-section usages)
   ========================================================================== */
.bpm-eyebrow {
	font-family: var(--bpm-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bpm-flame);
	margin: 0;
}
.bpm-eyebrow--ember { color: var(--bpm-ember); }

/* ==========================================================================
   Header (Spec 4.1)
   ========================================================================== */
.bpm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bpm-bg-dark);
	border-bottom: 1px solid var(--bpm-hairline-on-dark);
}
.bpm-header__inner {
	max-width: var(--bpm-container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 64px;
	padding-inline: var(--bpm-gutter-mobile);
}
@media (min-width: 768px)  { .bpm-header__inner { height: 72px; padding-inline: var(--bpm-gutter-tablet); } }
@media (min-width: 1025px) { .bpm-header__inner { height: 80px; padding-inline: var(--bpm-gutter-desktop); } }

.bpm-header__brand { display: inline-flex; align-items: center; padding: 8px; min-width: 44px; min-height: 44px; }
.bpm-header__logo { display: inline-block; height: 32px; line-height: 0; }
.bpm-header__logo svg { height: 100%; width: auto; display: block; }
@media (min-width: 768px)  { .bpm-header__logo { height: 36px; } }
@media (min-width: 1025px) { .bpm-header__logo { height: 40px; } }

/* Desktop-only inline nav. At tablet (<=1024) we show the hamburger only — never both. */
.bpm-header__nav { display: none; align-items: center; gap: 24px; }
@media (min-width: 1025px) { .bpm-header__nav { display: inline-flex; gap: 24px; } }

.bpm-header__link {
	font-family: var(--bpm-font-display);
	font-weight: 500;
	font-size: 15px;
	color: var(--bpm-text-on-dark);
	letter-spacing: 0;
	position: relative;
	padding: 4px 0;
	transition: color 150ms ease-out;
}
.bpm-header__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--bpm-flame);
	transition: width 200ms ease-out;
}
@media (hover: hover) {
	.bpm-header__link:hover { color: var(--bpm-flame); }
	.bpm-header__link:hover::after { width: 100%; }
}
.bpm-header__link[aria-current="page"] { color: var(--bpm-flame); }
.bpm-header__link[aria-current="page"]::after { width: 100%; }
.bpm-header__link:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 2px; }

.bpm-header__nav .bpm-btn--primary-header { margin-left: 8px; }
@media (min-width: 1025px) { .bpm-header__nav .bpm-btn--primary-header { margin-left: 8px; } }

/* Mobile hamburger */
.bpm-header__hamburger {
	background: transparent; border: 0; padding: 0; width: 44px; height: 44px;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 4px; cursor: pointer;
}
.bpm-header__hamburger span {
	display: block; width: 20px; height: 2px; background: var(--bpm-text-on-dark);
	transition: background-color 150ms ease-out;
}
.bpm-header__hamburger:hover span { background: var(--bpm-flame); }
.bpm-header__hamburger:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 2px; }
@media (min-width: 1025px) { .bpm-header__hamburger { display: none; } }

/* Mobile menu overlay */
.bpm-mobile-menu {
	position: fixed; inset: 0; z-index: 200; background: var(--bpm-bg-dark);
	transform: translateX(100%); opacity: 0;
	transition: transform 240ms ease-out, opacity 240ms ease-out;
	overflow-y: auto;
}
.bpm-mobile-menu[data-open="true"] { transform: translateX(0); opacity: 1; }
.bpm-mobile-menu__bar {
	height: 64px; padding-inline: var(--bpm-gutter-mobile);
	display: flex; align-items: center; justify-content: space-between;
}
.bpm-mobile-menu__brand { display: inline-flex; padding: 8px; min-width: 44px; min-height: 44px; align-items: center; }
.bpm-mobile-menu__close {
	background: transparent; border: 0; width: 44px; height: 44px; cursor: pointer;
	position: relative;
}
.bpm-mobile-menu__close span {
	display: block; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
	background: var(--bpm-text-on-dark); transition: background-color 150ms ease-out;
}
.bpm-mobile-menu__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.bpm-mobile-menu__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.bpm-mobile-menu__close:hover span { background: var(--bpm-flame); }
.bpm-mobile-menu__close:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 2px; }
.bpm-mobile-menu__nav {
	display: flex; flex-direction: column; align-items: center;
	padding: 32px var(--bpm-gutter-mobile) 48px;
	gap: 24px;
	text-align: center;
}
.bpm-mobile-menu__link {
	font-family: var(--bpm-font-display); font-weight: 600; font-size: 28px;
	color: var(--bpm-text-on-dark); position: relative; padding: 4px 0;
	align-self: center; text-align: center;
	transition: color 150ms ease-out;
}
/* Center-anchored underline: grows outward from the middle so it stays
   visually balanced under the centered text. */
.bpm-mobile-menu__link::after {
	content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px;
	background: var(--bpm-flame);
	transform: translateX(-50%);
	transition: width 200ms ease-out;
}
.bpm-mobile-menu__link:hover { color: var(--bpm-flame); }
.bpm-mobile-menu__link:hover::after,
.bpm-mobile-menu__link[aria-current="page"]::after { width: 100%; }
.bpm-mobile-menu__link[aria-current="page"] { color: var(--bpm-flame); }
.bpm-mobile-menu__cta {
	margin-top: 24px;
	width: 100%; height: 56px; justify-content: center;
}
body.bpm-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.bpm-mobile-menu { transition: none; }
}

/* ==========================================================================
   Footer (Spec 4.7)
   ========================================================================== */
.bpm-footer {
	background: var(--bpm-bg-dark);
	color: var(--bpm-text-on-dark);
	padding: 56px var(--bpm-gutter-mobile) 28px;
	font-family: var(--bpm-font-display);
}
.bpm-footer__inner { max-width: var(--bpm-container); margin-inline: auto; }
.bpm-footer__top {
	display: grid; grid-template-columns: 1fr; gap: 40px;
	padding-bottom: 32px; border-top: 1px solid var(--bpm-hairline-on-dark); padding-top: 56px;
	margin-top: 0;
}
/* Mobile + Tablet: 1-column stacking, every column centered.
   Bracketed by max-width:1024 so it does not leak onto desktop. */
@media (max-width: 1024px) {
	.bpm-footer__top {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.bpm-footer__top .bpm-footer__col { align-items: center; }
	.bpm-footer__top .bpm-footer__nav,
	.bpm-footer__top .bpm-footer__contact a { align-items: center; }
	.bpm-footer__top .bpm-footer__nav a,
	.bpm-footer__top .bpm-footer__contact a { align-self: center; }
	.bpm-footer__top .bpm-footer__social { justify-content: center; }
	/* Legal row: stack centered on mobile/tablet */
	.bpm-footer__legal { align-items: center; text-align: center; }
	.bpm-footer__legal-links { justify-content: center; }
}
/* Tablet-only padding/gap tuning */
@media (min-width: 768px) and (max-width: 1024px) {
	.bpm-footer { padding: 72px var(--bpm-gutter-tablet) 32px; }
	.bpm-footer__top { gap: 48px; padding-top: 72px; }
}

/* Desktop: 3-column row, every column left-aligned. */
@media (min-width: 1025px) {
	.bpm-footer { padding: 96px var(--bpm-gutter-desktop) 40px; }
	.bpm-footer__top {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 64px;
		padding-top: 96px;
		padding-bottom: 32px;
		text-align: left;
	}
	.bpm-footer__top .bpm-footer__col { align-items: flex-start; }
	.bpm-footer__top .bpm-footer__nav { align-items: flex-start; }
	.bpm-footer__top .bpm-footer__nav a,
	.bpm-footer__top .bpm-footer__contact a { align-self: flex-start; text-align: left; }
	.bpm-footer__top .bpm-footer__social { justify-content: flex-start; }
}

.bpm-footer__brand { text-align: center; }
@media (min-width: 1025px) { .bpm-footer__brand { text-align: left; } }
/* 2026-05-10: Wrap footer logo in <a href="/"> so footer brand is a Home link.
   Visual must not change: inherit color, no underline, default cursor lift via focus ring only. */
.bpm-footer__brand-link { display: inline-block; line-height: 0; color: inherit; text-decoration: none; outline: none; }
.bpm-footer__brand-link:focus-visible { outline: 2px solid var(--bpm-flame, #FF0A00); outline-offset: 4px; border-radius: 2px; }
.bpm-footer__brand-logo { display: inline-block; line-height: 0; }
/* Bumped up so tagline is legible on every breakpoint. */
.bpm-footer__brand-logo svg { height: 140px; width: auto; display: block; margin: 0 auto; }
@media (min-width: 768px)  { .bpm-footer__brand-logo svg { height: 160px; } }
@media (min-width: 1025px) { .bpm-footer__brand-logo svg { height: 180px; margin: 0; } }

.bpm-footer__col-heading {
	font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--bpm-text-muted-on-dark); margin: 0 0 24px;
}
.bpm-footer__nav { display: flex; flex-direction: column; gap: 0; }
.bpm-footer__nav a {
	font-weight: 500; font-size: 14px; color: var(--bpm-text-on-dark); line-height: 2.0;
	position: relative; align-self: flex-start; padding-bottom: 2px;
	transition: color 150ms ease-out;
}
.bpm-footer__nav a::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
	background: var(--bpm-flame); transition: width 200ms ease-out;
}
.bpm-footer__nav a:hover { color: var(--bpm-flame); }
.bpm-footer__nav a:hover::after,
.bpm-footer__nav a[aria-current="page"]::after { width: 100%; }
.bpm-footer__nav a[aria-current="page"] { color: var(--bpm-flame); }
.bpm-footer__nav a:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 4px; }

.bpm-footer__contact a {
	font-weight: 500; font-size: 14px; color: var(--bpm-text-on-dark);
	display: block; margin-bottom: 12px;
	transition: color 150ms ease-out;
}
.bpm-footer__contact a:hover { color: var(--bpm-flame); }
.bpm-footer__contact a:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 4px; }
.bpm-footer__social { display: flex; gap: 16px; margin-top: 24px; }
.bpm-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--bpm-text-on-dark); transition: color 150ms ease-out; }
.bpm-footer__social a:hover { color: var(--bpm-flame); }
.bpm-footer__social a:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 4px; }
.bpm-footer__social svg { width: 20px; height: 20px; fill: currentColor; }

.bpm-footer__legal {
	border-top: 1px solid var(--bpm-hairline-on-dark);
	padding-top: 32px; display: flex; flex-direction: column; gap: 8px;
	font-size: 12px; color: var(--bpm-text-muted-on-dark);
}
@media (min-width: 1025px) { .bpm-footer__legal { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; } }
.bpm-footer__legal-links { display: flex; gap: 16px; }
.bpm-footer__legal-links a { color: var(--bpm-text-muted-on-dark); transition: color 150ms ease-out; }
.bpm-footer__legal-links a:hover { color: var(--bpm-flame); }
.bpm-footer__legal-links a:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 4px; }

/* =========================================================
   /start page (Start Your Project) — §8 of spec
   ========================================================= */

/* Footer self-link suppression on /start (§4.7.E) */
body.page-start .bpm-footer__nav-start,
.page-start .bpm-footer__nav-start { display: none !important; }

/* ---- /start hero (restrained dark, no photo, no CTAs) ---- */
.bpm-start-hero {
	background: var(--bpm-bg-dark);
	color: var(--bpm-text-on-dark);
	padding: 96px 24px 64px;
	text-align: center;
}
@media (max-width: 1023px) { .bpm-start-hero { padding: 80px 24px 48px; } }
@media (max-width: 767px)  { .bpm-start-hero { padding: 64px 20px 40px; } }

.bpm-start-hero__inner { max-width: 1280px; margin: 0 auto; }

.bpm-start-hero__eyebrow {
	font-family: var(--bpm-font-display);
	font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--bpm-flame); /* ST-E: fix eyebrow color — global eyebrow rule §1.7 */
	margin: 0 0 16px;
}

.bpm-start-hero__h1 {
	font-family: var(--bpm-font-display);
	font-size: 120px; font-weight: 800; line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--bpm-text-on-dark);
	margin: 0 0 24px;
}
@media (max-width: 1023px) { .bpm-start-hero__h1 { font-size: 80px; } }
@media (max-width: 767px)  { .bpm-start-hero__h1 { font-size: 56px; } }
.bpm-start-hero__h1 .flame { color: var(--bpm-flame); font-style: normal; }

.bpm-start-hero__body {
	font-family: var(--bpm-font-display);
	font-size: 18px; font-weight: 400; line-height: 1.6;
	color: var(--bpm-text-muted-on-dark);
	max-width: 640px; margin: 0 auto;
}
@media (max-width: 1023px) { .bpm-start-hero__body { font-size: 17px; } }
@media (max-width: 767px)  { .bpm-start-hero__body { font-size: 16px; } }

/* ---- /start workhorse section (Project Details + Form) ---- */
.bpm-start-section {
	background: var(--bpm-bg-light);
	color: var(--bpm-text);
	padding: 96px 80px;
}
@media (max-width: 1023px) { .bpm-start-section { padding: 64px 48px; } }
@media (max-width: 767px)  { .bpm-start-section { padding: 48px 24px; } }

.bpm-start-grid {
	max-width: 1280px; margin: 0 auto;
	display: grid;
	grid-template-columns: 40fr 60fr;
	gap: 64px;
	align-items: start;
}
@media (max-width: 1023px) {
	.bpm-start-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 767px) {
	.bpm-start-grid { gap: 40px; }
}

/* Left rail */
.bpm-start-rail { display: flex; flex-direction: column; gap: 48px; }

/* Project Details block */
.bpm-start-details__eyebrow {
	font-family: var(--bpm-font-display);
	font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--bpm-flame); /* ST-E: fix eyebrow color — global eyebrow rule §1.7 */
	margin: 0 0 16px;
}
.bpm-start-details__h2 {
	font-family: var(--bpm-font-display);
	font-size: clamp(48px, 4.5vw, 64px); font-weight: 800;
	line-height: 1.05; letter-spacing: -0.02em;
	color: var(--bpm-text);
	margin: 0 0 16px;
}
@media (max-width: 1023px) { .bpm-start-details__h2 { font-size: 32px; line-height: 1.15; } }
@media (max-width: 767px)  { .bpm-start-details__h2 { font-size: 28px; line-height: 1.18; } }

.bpm-start-details__body {
	font-family: var(--bpm-font-display);
	font-size: 16px; font-weight: 400; line-height: 1.6;
	color: var(--bpm-text);
	margin: 0 0 24px;
}
.bpm-start-details__list {
	list-style: none; padding: 0; margin: 0;
	font-family: var(--bpm-font-display);
	font-size: 16px; line-height: 1.8;
	color: var(--bpm-text);
}
.bpm-start-details__list li {
	position: relative;
	padding-left: 18px;
}
.bpm-start-details__list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.7em;
	width: 6px; height: 6px;
	background: var(--bpm-flame);
}

/* Direct Contact block */
.bpm-start-contact h3 {
	font-family: var(--bpm-font-display);
	font-size: 24px; font-weight: 700; line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--bpm-text);
	margin: 0 0 16px;
}
.bpm-start-contact__list {
	list-style: none; padding: 0; margin: 0 0 16px;
	display: flex; flex-direction: column; gap: 10px;
}
.bpm-start-contact__list li {
	font-family: var(--bpm-font-display);
	font-size: 16px; color: var(--bpm-text);
	display: flex; align-items: baseline; gap: 12px;
}
.bpm-start-contact__glyph {
	color: var(--bpm-flame);
	font-size: 16px;
	width: 18px;
	display: inline-block;
	flex-shrink: 0;
}
.bpm-start-contact__list a {
	color: var(--bpm-text);
	text-decoration: none;
	transition: color 150ms ease-out;
}
.bpm-start-contact__list a:hover { color: var(--bpm-flame); }
.bpm-start-contact__list a:focus-visible { outline: 2px solid var(--bpm-flame); outline-offset: 4px; }
.bpm-start-contact__supporting {
	font-family: var(--bpm-font-display);
	font-size: 14px; line-height: 1.55;
	color: var(--bpm-text-muted);
	margin: 16px 0 0;
}

/* Form column wrapper — doubles as the white form card so the form intro
   line sits inside the card with the form (spec §8.3.C). SureForms' inner
   .srfm-form-container is reset to transparent in css/sureforms-brand.css.
   Two-layer shadow gives the card a deliberate "floating" feel above
   --bpm-bg-light without harsh contrast: a tight close shadow defines the
   edge, a wider ambient shadow creates depth. */
.bpm-start-form-col {
	min-width: 0;
	background: #ffffff;
	border: 1px solid rgba(23, 23, 23, 0.10);
	border-radius: 0;
	padding: 48px;
	box-shadow:
		0 2px 6px rgba(23, 23, 23, 0.04),
		0 16px 48px rgba(23, 23, 23, 0.10);
}
@media (max-width: 1023px) {
	.bpm-start-form-col {
		padding: 40px;
		box-shadow:
			0 2px 6px rgba(23, 23, 23, 0.04),
			0 12px 36px rgba(23, 23, 23, 0.09);
	}
}
@media (max-width: 767px) {
	.bpm-start-form-col {
		padding: 32px;
		box-shadow:
			0 2px 6px rgba(23, 23, 23, 0.04),
			0 8px 24px rgba(23, 23, 23, 0.08);
	}
}

/* Form intro line (sits above the SureForms shortcode, inside the white card) */
.bpm-start-form-col__intro {
	font-family: var(--bpm-font-display, "Montserrat"), system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	font-weight: 500;
	color: var(--bpm-text);
	margin: 0 0 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid rgba(23, 23, 23, 0.08);
}
@media (max-width: 767px) {
	.bpm-start-form-col__intro { font-size: 14px; margin: 0 0 20px; padding-bottom: 14px; }
}

/* ============================================================
   Suppress Jetpack auto-injected widgets (sharedaddy + likes)
   ============================================================ */
#jp-post-flair,
.sharedaddy,
div.sharedaddy,
.jetpack-likes-widget-wrapper,
.jp-relatedposts,
.sd-block,
.sharing,
.pd-rating,
.cs-rating { display: none !important; }

/* ============================================================
   /services page — Section 6 (LOCKED v1.2.3)
   Hero + bridge + 3 craft sections + work-link + closing.
   Hero and closing carry .bpm-section--dark globally (§1.8 utility).
   ============================================================ */

/* Anchor scroll offset so fragment links don't hide under sticky header */
.bpm-services-page section[id] { scroll-margin-top: 96px; }

/* Hero — dark, no photo (matches /studio family) */
.bpm-services-page__hero {
	color: #FFFFFF;
	padding: 96px var(--bpm-gutter-desktop) 64px;
	text-align: center;
}
/* v1.2.4 (revised): drop the local --bpm-ember override so eyebrows on
   /services match the global flame red used on /home, /studio, /start, and
   every other page (§1.7 + §1.11 site-wide eyebrow rule). The previous
   override broke the consistency rule "all pages follow the same rules." */
.bpm-services-page__hero .bpm-eyebrow {
	margin-bottom: 16px;
}
/* v1.2.4 (revised): hero contents constrained to --bpm-container (1280px)
   to match /start hero pattern (.bpm-start-hero__inner { max-width: 1280px })
   so the H1 wraps to a sensible two-line cinematic block instead of
   stretching the full viewport width. */
.bpm-services-page__hero .bpm-eyebrow,
.bpm-services-page__hero h1,
.bpm-services-page__hero-sub {
	max-width: var(--bpm-container);
	margin-left: auto;
	margin-right: auto;
}
.bpm-services-page__hero h1 {
	/* Cinematic scale per §1.10 — page-hero H1. v1.2.4 final: 120/80/56
	   matches /start hero exactly for cross-page consistency. */
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 120px;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	margin-top: 0;
	margin-bottom: 24px;
}
.bpm-services-page__hero-sub {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 22px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	max-width: 52ch;
	margin: 0 auto;
}
@media (max-width: 1023px) {
	.bpm-services-page__hero { padding: 80px var(--bpm-gutter-tablet) 48px; }
	.bpm-services-page__hero h1 { font-size: 80px; line-height: 1.02; letter-spacing: -0.02em; }
	.bpm-services-page__hero-sub { font-size: 20px; max-width: none; }
}
@media (max-width: 767px) {
	.bpm-services-page__hero { padding: 64px var(--bpm-gutter-mobile) 40px; }
	.bpm-services-page__hero h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 20px; }
	.bpm-services-page__hero-sub { font-size: 18px; }
}

/* Bridge — light, centered thesis paragraph */
.bpm-services-page__bridge {
	background: var(--bpm-bg-light);
	padding: 80px var(--bpm-gutter-desktop) 64px;
	text-align: center;
}
.bpm-services-page__bridge p {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: var(--bpm-text);
	max-width: 62ch;
	margin: 0 auto;
}
@media (max-width: 1023px) {
	.bpm-services-page__bridge { padding: 64px var(--bpm-gutter-tablet) 48px; }
	.bpm-services-page__bridge p { font-size: 19px; }
}
@media (max-width: 767px) {
	.bpm-services-page__bridge { padding: 48px var(--bpm-gutter-mobile) 40px; }
	.bpm-services-page__bridge p { font-size: 17px; }
}

/* Craft sections — Music / Video / Branding (identical template).
   Backgrounds alternate per §1.12: each craft section in render.php carries
   .bpm-section--dark when its 'tone' is 'dark'. Default = light.
   Color overrides for the dark variant cascade from .bpm-section--dark
   ancestor; we never re-target by --music/--video/--branding modifiers. */
/* v1.2.4 fix: NO background declaration here. Default light tone inherits
   from body's --bpm-bg-light. Dark tone gets --bpm-bg-dark via the
   .bpm-section--dark utility. Declaring bg here at single-class specificity
   beat the .bpm-section--dark rule (which appears earlier in the file),
   leaving Music/Branding sections rendering light — with light-text overrides
   still applying, producing white-on-white invisible content. Drop the
   bg line; let the global utility own dark/light. */
.bpm-services-page__craft {
	padding: 80px var(--bpm-gutter-desktop);
}
/* Dark-tone craft: invert text colors. Eyebrow (Ember) is identical on both
   tones per the global eyebrow rule, so we don't re-declare it here. */
.bpm-services-page__craft.bpm-section--dark h2 {
	color: var(--bpm-text-light, #F5F5F3);
}
.bpm-services-page__craft.bpm-section--dark .bpm-services-page__craft-lede {
	color: var(--bpm-text-muted-on-dark, #A8A8A8);
}
/* v1.2.4 owner-locked 2026-05-09: bullets-heading 'WHAT THIS LOOKS LIKE' joins
   the lede + bullets at the muted weight so the entire content block reads as
   one. Bold uppercase keeps it visually distinct as a label without color. */
.bpm-services-page__craft.bpm-section--dark .bpm-services-page__bullets-heading {
	color: var(--bpm-text-muted-on-dark, #A8A8A8);
}
/* v1.2.4 owner-locked 2026-05-09: bullet items match the lede + heading color
   so the whole content block (lede / heading / bullets / honesty) reads as
   one muted body region. */
.bpm-services-page__craft.bpm-section--dark .bpm-services-page__bullets li {
	color: var(--bpm-text-muted-on-dark, #A8A8A8);
}
.bpm-services-page__craft.bpm-section--dark .bpm-services-page__honesty {
	color: var(--bpm-text-muted-on-dark, #A8A8A8);
}
.bpm-services-page__craft-inner {
	max-width: 62ch;
	margin: 0 auto;
}
/* v1.2.4 (revised): no eyebrow color override here — inherit global flame red
   per site-wide consistency rule. Local rule retained only for layout/spacing. */
.bpm-services-page__craft .bpm-eyebrow {
	margin: 0 0 16px;
}
.bpm-services-page__craft h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	color: var(--bpm-text);
	margin: 0 0 24px;
}
.bpm-services-page__craft-lede {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.65;
	color: var(--bpm-text-muted);
	margin: 0 0 32px;
}
.bpm-services-page__bullets-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* v1.2.4: muted to match lede + bullets so the whole content block reads as one. */
	color: var(--bpm-text-muted);
	margin: 0 0 12px;
}
.bpm-services-page__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}
.bpm-services-page__bullets li {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	/* v1.2.4: bullet items track the lede color (muted) on the default light tone
	   so list and body read as one block. Dark-tone override above. */
	color: var(--bpm-text-muted);
	padding: 0;
	margin: 0 0 8px;
}
.bpm-services-page__bullets li:last-child { margin-bottom: 0; }
.bpm-services-page__honesty {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 16px;
	line-height: 1.55;
	color: var(--bpm-text-muted);
	margin: 0 0 32px;
}
@media (max-width: 1023px) {
	.bpm-services-page__craft { padding: 64px var(--bpm-gutter-tablet); }
	.bpm-services-page__craft h2 { font-size: 36px; line-height: 1.12; margin-bottom: 20px; }
	.bpm-services-page__craft-lede { font-size: 17px; margin-bottom: 28px; }
	.bpm-services-page__bullets { margin-bottom: 20px; }
	.bpm-services-page__bullets li { font-size: 15px; }
	.bpm-services-page__honesty { font-size: 15px; margin-bottom: 28px; }
}
@media (max-width: 767px) {
	.bpm-services-page__craft { padding: 56px var(--bpm-gutter-mobile); }
	.bpm-services-page__craft h2 { font-size: 30px; line-height: 1.15; margin-bottom: 20px; }
	.bpm-services-page__craft-lede { font-size: 16px; margin-bottom: 24px; }
	.bpm-services-page__bullets { margin-bottom: 20px; }
	.bpm-services-page__bullets li { font-size: 15px; }
	.bpm-services-page__honesty { font-size: 14px; margin-bottom: 24px; }
}

/* Work-link band — passive proof exit ramp */
.bpm-services-page__work-link {
	background: var(--bpm-bg-light);
	padding: 64px var(--bpm-gutter-desktop);
	text-align: center;
}
.bpm-services-page__work-link-lede {
	font-family: 'Lora', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--bpm-text);
	margin: 0 0 16px;
}
@media (max-width: 1023px) {
	.bpm-services-page__work-link { padding: 48px var(--bpm-gutter-tablet); }
	.bpm-services-page__work-link-lede { font-size: 19px; }
}
@media (max-width: 767px) {
	.bpm-services-page__work-link { padding: 40px var(--bpm-gutter-mobile); }
	.bpm-services-page__work-link-lede { font-size: 17px; }
}

/* =============================================================
   Closing CTA — global pattern (hoisted from blocks/bpm-closing-cta/view.css
   into global style.css v1.2.4 so the same .bpm-closing-cta class family can
   be reused on /services and any future page that needs the same
   eyebrow → Montserrat H2 → body → filled red CTA closing structure,
   without enqueuing the bpm/closing-cta block itself.
   Source of truth for closing CTA visual rules. Per spec §6.7. */
.bpm-closing-cta {
	background-color: var(--bpm-bg-dark);
	color: var(--bpm-text-on-dark);
	padding: clamp(80px, 12vw, 160px) 0;
	text-align: center;
	position: relative;
}
.bpm-closing-cta__inner {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (max-width: 1024px) {
	.bpm-closing-cta__inner { max-width: 680px; }
}
@media (max-width: 767px) {
	.bpm-closing-cta__inner { max-width: 100%; }
}
.bpm-closing-cta__eyebrow {
	color: var(--bpm-flame);
	margin-bottom: 24px;
}
.bpm-closing-cta__h2 {
	font-family: var(--bpm-font-display);
	font-weight: 700;
	font-size: 96px;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--bpm-text-on-dark);
	margin: 0 0 28px;
	text-wrap: balance;
}
@media (max-width: 1024px) {
	.bpm-closing-cta__h2 { font-size: 64px; line-height: 1.05; }
}
@media (max-width: 767px) {
	.bpm-closing-cta__h2 {
		font-size: 40px;
		letter-spacing: -0.02em;
	}
}
.bpm-closing-cta__h2 em {
	font-style: italic;
	color: var(--bpm-flame);
	font-family: var(--bpm-font-display);
}
.bpm-closing-cta__body {
	font-family: var(--bpm-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--bpm-text-muted-on-dark);
	margin: 0 0 40px;
	max-width: 56ch;
}
@media (min-width: 1025px) { .bpm-closing-cta__body { font-size: 18px; } }
.bpm-closing-cta__cta-wrap {
	display: flex;
	justify-content: center;
}
.bpm-closing-cta__cta { min-width: 240px; justify-content: center; }

/* =============================================================
   v1.2.5 — Closing CTA LIGHT variant (used on /work/{slug}/ detail).
   Adds light surface override for the global .bpm-closing-cta family.
   ============================================================= */
.bpm-closing-cta--light {
	background-color: var(--bpm-bg-light);
	color: var(--bpm-text);
}
.bpm-closing-cta--light .bpm-closing-cta__h2 {
	color: var(--bpm-text);
}
.bpm-closing-cta--light .bpm-closing-cta__body {
	color: var(--bpm-text-muted);
}
.bpm-closing-cta--light .bpm-closing-cta__eyebrow {
	color: var(--bpm-flame);
}

/* =============================================================
   v1.2.5 — /work archive + /work/{slug}/ shared card grid system
   Hoisted from blocks/bpm-work-archive/view.css so the related-strip
   on detail pages picks up the same 1/2/3-col grid + card chrome.
   Source of truth for the .bpm-work-grid__cards + .bpm-work-card families.
   Spec ref §7.2, §7.5.6. Keep page-specific rules out of block view.css.
   ============================================================= */
.bpm-work-grid__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 768px) {
	.bpm-work-grid__cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}
@media (min-width: 1025px) {
	.bpm-work-grid__cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

/* Vertical Feature card — white panel on light bg (default). */
.bpm-work-card {
	background: #FFFFFF;
	border: 1px solid rgba(10, 10, 10, 0.08);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
	display: flex;
}
.bpm-work-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}
.bpm-work-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #F0EFEC;
}
.bpm-work-card__image > * { width: 100%; height: 100%; }
.bpm-work-card__image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 400ms ease-out;
}
/* placeholder panel sizing inside 4:3 frame is handled in the global placeholder block below */
.bpm-work-card__text {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
@media (min-width: 1025px) { .bpm-work-card__text { padding: 28px; } }

.bpm-work-card__eyebrow {
	font-family: var(--bpm-font-display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bpm-flame);
	margin: 0 0 8px;
}
.bpm-work-card__title {
	font-family: var(--bpm-font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--bpm-text);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
	/* Clamp at 2 lines so a long title can’t balloon the card. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 1025px) { .bpm-work-card__title { font-size: 24px; } }

.bpm-work-card__support {
	font-family: var(--bpm-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: rgba(10, 10, 10, 0.7);
	margin: 0 0 16px;
	flex: 1;
	/* Clamp at 3 lines — 150-char input rarely overflows, but this keeps
	   /work cards equal-height in a row regardless of copy length. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bpm-work-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bpm-font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bpm-flame);
	margin-top: auto;
	/* No transition — CTA stays at full Flame red. */
}
@media (hover: hover) {
	.bpm-work-card:hover {
		border-color: var(--bpm-flame);
		box-shadow: 0 0 24px rgba(255, 10, 0, 0.25);
		transform: translateY(-4px);
	}
	.bpm-work-card:hover .bpm-work-card__image img { transform: scale(1.03); }
	/* Arrow nudge on hover — matches global tertiary button behavior. */
	.bpm-work-card:hover .bpm-work-card__cta .bpm-btn__arrow { transform: translateX(4px); }
}
/* CTA always at full Flame red — v1.2.6 owner override (was 0.6 dim on desktop). */
.bpm-work-card__link:focus-visible {
	outline: 2px solid var(--bpm-flame);
	outline-offset: 2px;
}

/* Dark variant — used inside detail-page Related strip on dark bg */
.bpm-work-card--on-dark {
	background: #1A1A1A;
	border-color: var(--bpm-hairline-card);
}
.bpm-work-card--on-dark .bpm-work-card__title { color: var(--bpm-text-on-dark); }
.bpm-work-card--on-dark .bpm-work-card__support { color: rgba(245, 245, 243, 0.7); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bpm-work-card { transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
	.bpm-work-card:hover { transform: none; }
	.bpm-work-card__image img { transition: none; }
	.bpm-work-card:hover .bpm-work-card__image img { transform: none; }
}

/* Visually hidden helper (SR-only headings) */
.bpm-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ============================================================
 * Brand-color placeholder panel — HOISTED FROM bpm-recent-work/view.css (v1.2.6)
 * Used by every surface that calls bpm_render_placeholder_panel()
 * (home Recent Work, /work index, /work detail hero, future surfaces).
 * Lives in global style.css so it loads regardless of which block renders.
 * ============================================================ */
.bpm-placeholder-panel {
	width: 100%;
	height: 100%;
	background: var(--bpm-blaze);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	min-height: 180px;
}
.bpm-placeholder-panel__icon {
	width: 40%;
	max-width: 120px;
	height: auto;
	color: #FFFFFF;
}
.bpm-placeholder-panel__icon path,
.bpm-placeholder-panel__icon polygon,
.bpm-placeholder-panel__icon rect,
.bpm-placeholder-panel__icon polyline {
	fill: #FFFFFF !important;
}
/* When the placeholder sits inside an aspect-ratio frame (e.g. .bpm-work-card__image at 16:9),
   suppress the 180px min-height so it fills the frame instead of pushing it taller. */
.bpm-work-card__image .bpm-placeholder-panel { min-height: 0; }

/* ============================================================
 * v1.2.0 fix-pass ST-2 / ST-3 — /start left-rail intro + trust strip
 * 9-field structure per `inc/acf-groups/start.php`:
 *   intro_h2 → 3 items × (num + h3 + body) → trust_line
 * Positioned in the left rail above Project Details.
 * Numerals use the same Flame-eyebrow micro-cap pattern as thanks-steps.
 * ============================================================ */
.bpm-start-intro {
	margin: 0 0 32px;
}
.bpm-start-intro__h2 {
	font-family: var(--bpm-font-display);
	font-weight: 700;
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.25;
	color: var(--bpm-text);
	margin: 0 0 20px;
}
.bpm-start-intro__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bpm-start-intro__item {
	margin: 0 0 20px;
	text-align: left;
	padding-left: 0;
}
.bpm-start-intro__item:last-child { margin-bottom: 0; }
.bpm-start-intro__num {
	display: block;
	font-family: var(--bpm-font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--bpm-flame);
	margin: 0 0 4px;
}
.bpm-start-intro__h3 {
	font-family: var(--bpm-font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--bpm-text);
	margin: 0 0 4px;
}
.bpm-start-intro__body {
	font-family: var(--bpm-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--bpm-text);
	margin: 0;
}

/* ST-3 — Trust strip below Direct Contact in left rail.
 * 16px / weight 500 / muted neutral. Single-line at desktop, may wrap at mobile. */
.bpm-start-trust {
	font-family: var(--bpm-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(23, 23, 23, 0.65);
	margin: 24px 0 0;
}