// Direction B+ — Refined editorial direction
// Builds on Direction B (editorial manifesto, ink on cream, serif italic accents)
// Adds: trust stats strip, two-service breakdown, tech-AI framing section,
// and the metric wall from Direction C.

const DirectionBPlus = () => {
  const cases = [
    { n: "01", client: "Airia AI", line: "Took an unknown AI productivity tool from 2K to 50K weekly users in one quarter.", reach: "4.2M", lift: "+312%" },
    { n: "02", client: "Pageon AI", line: "Made an AI design app go viral on design Twitter without ever touching design Twitter.", reach: "1.8M", lift: "+187%" },
    { n: "03", client: "Max AI", line: "Built a creator-led narrative around an AI browser. Downloads 5x'd in six weeks.", reach: "9.6M", lift: "+421%" },
    { n: "04", client: "Goat Funded Trader", line: "Turned a niche fintech into a content engine. 36 creators, one consistent voice.", reach: "12.1M", lift: "+264%" },
    { n: "05", client: "Ria Money Transfer", line: "Reframed a legacy fintech as the fintech your cousin already uses.", reach: "6.7M", lift: "+98%" },
  ];

  const wall = [
    { metric: "+312%", client: "Airia AI", k: "signups", accent: true },
    { metric: "9.6M", client: "Max AI", k: "reach" },
    { metric: "+187%", client: "Pageon AI", k: "trials", accent: true },
    { metric: "12.1M", client: "Goat Funded", k: "reach" },
    { metric: "+421%", client: "Max AI", k: "downloads", accent: true },
    { metric: "+98%", client: "Ria", k: "installs", accent: true },
  ];

  const services = [
    {
      n: "Service I",
      title: "UGC Content Packages",
      sub: "Creator-made video, built for paid.",
      body: "Hooks. Demos. Testimonials. Problem-solution scripts. We deliver libraries of video creative made by AI-literate creators, sized for every placement, ready to drop straight into your TikTok, Meta, and YouTube ad accounts.",
      bullets: [
        "Unlimited creator assets per round",
        "Scripted hooks, native-feeling delivery",
        "3 months usage rights",
        "Edited, captioned, and ad-ready",
      ],
    },
    {
      n: "Service II",
      title: "Paid Creator Partnerships",
      sub: "Our original service, sharpened for tech and AI.",
      body: "Sponsored posts, whitelisting, Spark Ads on TikTok and Partnership Ads on Meta, running through creators whose audience already cares about the AI space. Your campaign, their voice, our network.",
      bullets: [
        "Curated AI-native creator roster",
        "TikTok Spark Ads + Meta Partnership Ads",
        "Whitelisting + paid amplification",
        "End-to-end campaign management",
      ],
    },
  ];

  const process = [
    { n: "I", t: "Listen", b: "Two weeks of research. We watch how your customers already talk about the problem you solve. That language becomes the brief." },
    { n: "II", t: "Cast", b: "We hand-pick creators from our roster — the ones whose audience overlaps with your ICP, not the ones with the biggest follower count." },
    { n: "III", t: "Make", b: "30–60 pieces of UGC per cycle, scripted and edited in-house. You see every cut before it ships." },
    { n: "IV", t: "Compound", b: "Winners go into paid. Losers teach us next month's hooks. By month three you have a content engine, not a campaign." },
  ];

  return (
    <div style={bpWrap}>
      <header style={bpNav}>
        <div style={bpLogo}>SociallyMe</div>
        <div style={bpNavMid}>Vol. III · MMXXVI</div>
        <nav style={bpNavRight}>
          <a style={bpNavLink} href="index.html#services">Services</a>
          <a style={bpNavLink} href="work.html">Case studies</a>
          <a style={bpNavLink} href="process.html">Process</a>
        </nav>
      </header>

      {/* hero */}
      <section style={bpHero} data-reveal-stagger>
        <style>{`
          @keyframes bpLetterFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-14px) rotate(-1.5deg); }
          }
          @keyframes bpBackdropDrift {
            0% { transform: translateY(0); }
            100% { transform: translateY(-40px); }
          }
          .bp-impossible {
            display: inline-block;
            position: relative;
          }
          .bp-impossible > span {
            display: inline-block;
            animation: bpLetterFloat 3.6s ease-in-out infinite;
            will-change: transform;
          }
          .bp-impossible > span:nth-child(1)  { animation-delay: 0.00s; }
          .bp-impossible > span:nth-child(2)  { animation-delay: 0.08s; }
          .bp-impossible > span:nth-child(3)  { animation-delay: 0.16s; }
          .bp-impossible > span:nth-child(4)  { animation-delay: 0.24s; }
          .bp-impossible > span:nth-child(5)  { animation-delay: 0.32s; }
          .bp-impossible > span:nth-child(6)  { animation-delay: 0.40s; }
          .bp-impossible > span:nth-child(7)  { animation-delay: 0.48s; }
          .bp-impossible > span:nth-child(8)  { animation-delay: 0.56s; }
          .bp-impossible > span:nth-child(9)  { animation-delay: 0.64s; }
          .bp-impossible > span:nth-child(10) { animation-delay: 0.72s; }
          .bp-hero-backdrop {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            padding: 80px 56px;
            z-index: 0;
          }
          .bp-hero-backdrop .bp-backdrop-line {
            font-family: 'Instrument Serif', 'Times New Roman', serif;
            font-style: italic;
            font-size: 132px;
            line-height: 1;
            letter-spacing: -0.025em;
            color: rgba(26,24,20,0.055);
            white-space: nowrap;
            text-align: right;
            animation: bpBackdropDrift 14s ease-in-out infinite alternate;
          }
          .bp-hero-backdrop .bp-backdrop-line:nth-child(2) { text-align: left; animation-delay: -3s; }
          .bp-hero-backdrop .bp-backdrop-line:nth-child(3) { text-align: right; animation-delay: -6s; }
          .bp-hero-backdrop .bp-backdrop-line:nth-child(4) { text-align: left; animation-delay: -9s; }
          .bp-hero-backdrop .bp-backdrop-tag {
            position: absolute;
            bottom: 36px;
            left: 56px;
            font-size: 11px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(26,24,20,0.35);
            font-weight: 600;
            font-family: 'Inter Tight', sans-serif;
            font-style: normal;
          }
          @media (prefers-reduced-motion: reduce) {
            .bp-impossible > span,
            .bp-hero-backdrop .bp-backdrop-line { animation: none !important; }
          }
        `}</style>
        <div style={{position: "relative", zIndex: 1}}>
          <div style={bpHeroTag}>A done-for-you UGC + creator agency.</div>
          <h1 style={bpH1}>
            We make<br />
            <em style={bpItalic}>your company</em><br />
            <span className="bp-impossible" aria-label="impossible">
              <span>i</span><span>m</span><span>p</span><span>o</span><span>s</span><span>s</span><span>i</span><span>b</span><span>l</span><span>e</span>
            </span><br />
            to <em style={bpItalic}>ignore.</em>
          </h1>
          <div style={bpHeroFoot}>
            <p style={bpHeroSub}>
              Fully done-for-you UGC content and paid creator partnerships for the
              next generation of brands. You stay focused on the product.
              We handle creators, scripts, edits, posting and paid amplification end-to-end.
            </p>
            <a href="process.html" style={bpCtaLink}>Our Process →</a>
          </div>
        </div>
      </section>

      {/* trust stats strip */}
      <section style={bpStatStrip} data-reveal-stagger>
        <div style={bpStatCell}>
          <div style={bpStatNum}>92<span style={bpStatPct}>%</span></div>
          <div style={bpStatBody}>
            of people worldwide trust <em style={bpItalicSm}>word-of-mouth</em> more than
            traditional advertising.
          </div>
          <div style={bpStatSrc}>— Nielsen</div>
        </div>
        <div style={bpStatCell}>
          <div style={bpStatNum}>82<span style={bpStatPct}>%</span></div>
          <div style={bpStatBody}>
            of Gen Z trust a company more when it features <em style={bpItalicSm}>real customers</em> instead
            of celebrities or paid spokespeople.
          </div>
          <div style={bpStatSrc}>— Consumer Trust Index</div>
        </div>
        <div style={bpStatCell}>
          <div style={bpStatNum}>5<span style={bpStatPct}>×</span></div>
          <div style={bpStatBody}>
            UGC outperforms brand-produced creative on conversion across paid social
            placements for tech and SaaS.
          </div>
          <div style={bpStatSrc}>— Industry benchmark, 2025</div>
        </div>
      </section>

      {/* services */}
      <section style={bpSection}>
        <div style={bpSectionHead} data-reveal="up">
          <div style={bpSmallLabel}>What we do</div>
          <h2 style={bpH2}>Two services.<br /><em style={bpItalic}>One outcome:</em> attention that compounds.</h2>
        </div>
        <div style={bpServiceGrid} data-reveal-stagger>
          {services.map((s, idx) => (
            <div key={s.n} style={bpServiceCard}>
              <div style={bpServiceTop}>
                <div style={bpServiceN}>{s.n}</div>
                <h3 style={bpServiceT}><span style={bpServiceEmoji}>{idx === 0 ? "🎥" : "📣"}</span>{s.title}</h3>
                <div style={bpServiceSub}><em style={bpItalicSm}>{s.sub}</em></div>
              </div>
              <p style={bpServiceBody}>{s.body}</p>
              <ul style={bpServiceList}>
                {s.bullets.map(b => (
                  <li key={b} style={bpServiceLi}>
                    <span style={bpServiceTick}>—</span>{b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* long-term roster banner */}
      <section style={bpRosterBanner} data-reveal="up">
        <div style={bpRosterLeft}>
          <div style={bpRosterKicker}>—— Data builds your long-term creator engine</div>
          <h3 style={bpRosterT}>Your <em style={bpItalicSm}>long-term roster</em>, earning its place every month.</h3>
        </div>
        <div style={bpRosterMid}>
          <p style={bpRosterP}>
            After the first month of paid usage testing, the data tells us which creators move the needle for your brand.
            We retain the top performers, brief new hooks each cycle, and compound the wins. This is where one-off UGC becomes a long-term content engine.
          </p>
        </div>
        <a href="process.html#engine" style={bpRosterCta}>
          See the engine →
        </a>
      </section>

      {/* the rule / problem framing for AI */}
      <div style={bpRuleSection} data-reveal="up">
        <div style={bpRuleNum}>—— No. 001 · The problem with tech marketing</div>
        <div style={bpRuleText}>
          Polished brand ads aren't converting anymore. Your audience needs to see <em style={bpItalicSm}>real
          people use and trust your tool</em> before they'll click. But most creators don't understand
          your product, can't demo software convincingly, and produce content that reads "sponsored
          post" from the first frame.
          <br /><br />
          That's the gap we live in.
        </div>
      </div>

      {/* CTA after services — editorial tri-destination row */}
      <section style={bpTriCtaWrap} data-reveal-stagger>
        <a href="process.html" style={bpTriCta}>
          <div style={bpTriNum}>I.</div>
          <div style={bpTriBody}>
            <div style={bpTriKey}>How we work</div>
            <div style={bpTriLabel}>See our process</div>
          </div>
          <div style={bpTriArrow}>→</div>
        </a>
        <a href="work.html" style={{...bpTriCta, borderLeft: `1px solid ${BP_LINE}`}}>
          <div style={bpTriNum}>II.</div>
          <div style={bpTriBody}>
            <div style={bpTriKey}>Receipts</div>
            <div style={bpTriLabel}>Case studies</div>
          </div>
          <div style={bpTriArrow}>→</div>
        </a>
        <a href="#" data-open-onboarding style={{...bpTriCta, borderLeft: `1px solid ${BP_LINE}`, background: BP_ACCENT, color: BP_BG}}>
          <div style={{...bpTriNum, color: BP_BG}}>III.</div>
          <div style={bpTriBody}>
            <div style={{...bpTriKey, color: "rgba(243,237,225,0.7)"}}>Ready?</div>
            <div style={bpTriLabel}>Get started</div>
          </div>
          <div style={bpTriArrow}>→</div>
        </a>
      </section>
    </div>
  );
};

/* ---------- styles B+ ---------- */
const BP_BG = "#f3ede1";
const BP_BG_2 = "#ebe4d6";
const BP_INK = "#1a1814";
const BP_INK_DARK = "#0f0e0b";
const BP_INK_SOFT = "#403c33";
const BP_MUTED = "#807a6b";
const BP_LINE = "rgba(26,24,20,0.15)";
const BP_LINE_DARK = "rgba(243,237,225,0.18)";
const BP_ACCENT = "#c2533a";
const BP_SANS = "'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif";
const BP_SERIF = "'Instrument Serif', 'Times New Roman', serif";

const bpWrap = { background: BP_BG, color: BP_INK, fontFamily: BP_SANS, minHeight: "100%" };

const bpNav = { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", padding: "28px 56px", borderBottom: `1px solid ${BP_LINE}`, alignItems: "center" };
const bpLogo = { fontFamily: BP_SERIF, fontSize: 26, letterSpacing: "-0.02em" };
const bpNavMid = { textAlign: "center", fontSize: 12, color: BP_MUTED, letterSpacing: "0.18em", textTransform: "uppercase" };
const bpNavRight = { display: "flex", justifyContent: "flex-end", gap: 28 };
const bpNavLink = { fontSize: 14, color: BP_INK_SOFT, textDecoration: "none", cursor: "pointer", fontWeight: 500 };

const bpHero = { padding: "100px 56px 80px", maxWidth: 1300, margin: "0 auto", position: "relative", overflow: "hidden" };
const bpHeroTag = { fontSize: 14, color: BP_MUTED, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 48, fontWeight: 600 };
const bpH1 = { fontSize: 156, lineHeight: 0.95, fontWeight: 600, letterSpacing: "-0.045em", margin: 0, fontFamily: BP_SANS, textWrap: "balance" };
const bpItalic = { fontFamily: BP_SERIF, fontStyle: "italic", fontWeight: 400, color: BP_ACCENT, letterSpacing: "-0.02em" };
const bpItalicSm = { fontFamily: BP_SERIF, fontStyle: "italic", fontWeight: 400, color: BP_ACCENT };
const bpItalicDark = { fontFamily: BP_SERIF, fontStyle: "italic", fontWeight: 400, color: "#f3c8a8" };
const bpHeroFoot = { display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 60, marginTop: 80, alignItems: "end" };
const bpHeroSub = { fontSize: 19, lineHeight: 1.5, color: BP_INK_SOFT, margin: 0, maxWidth: 540, textWrap: "pretty" };
const bpCta = { background: BP_INK, color: BP_BG, border: "none", padding: "18px 32px", fontSize: 15, fontWeight: 600, cursor: "pointer", fontFamily: BP_SANS, justifySelf: "end" };
const bpCtaLink = { background: BP_INK, color: BP_BG, padding: "18px 32px", fontSize: 15, fontWeight: 600, cursor: "pointer", fontFamily: BP_SANS, justifySelf: "end", textDecoration: "none", display: "inline-block" };

/* trust stat strip */
const bpStatStrip = { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: `1px solid ${BP_LINE}`, borderBottom: `1px solid ${BP_LINE}`, background: BP_BG_2 };

const bpMarqueeWrap = { borderTop: `1px solid ${BP_LINE}`, borderBottom: `1px solid ${BP_LINE}`, padding: "40px 0 48px", overflow: "hidden" };
const bpMarqueeLabel = { fontSize: 12, color: BP_MUTED, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, textAlign: "center", marginBottom: 28 };
const bpMarqueeViewport = { overflow: "hidden", width: "100%" };
const bpMarqueeTrack = { display: "flex", width: "max-content", animation: "bpMarquee 38s linear infinite" };
const bpMarqueeRow = { display: "flex", alignItems: "center", gap: 56, paddingRight: 56 };
const bpMarqueeItem = { fontFamily: BP_SERIF, fontStyle: "italic", fontSize: 56, color: BP_INK, letterSpacing: "-0.02em", whiteSpace: "nowrap" };
const bpMarqueeStar = { fontSize: 28, color: BP_ACCENT };
const bpStatCell = { padding: "56px 40px", borderRight: `1px solid ${BP_LINE}`, display: "flex", flexDirection: "column", gap: 16 };
const bpStatNum = { fontSize: 96, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 1, color: BP_INK, fontFamily: BP_SANS };
const bpStatPct = { fontFamily: BP_SERIF, fontStyle: "italic", color: BP_ACCENT, fontWeight: 400 };
const bpStatBody = { fontSize: 18, lineHeight: 1.45, color: BP_INK_SOFT, textWrap: "pretty", maxWidth: 360 };
const bpStatSrc = { fontSize: 12, color: BP_MUTED, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600, marginTop: "auto" };

const bpRuleSection = { padding: "32px 56px 80px", maxWidth: 1000, margin: "0 auto" };
const bpRuleNum = { fontSize: 13, color: BP_MUTED, letterSpacing: "0.12em", marginBottom: 32, fontWeight: 600, textTransform: "uppercase" };
const bpRuleText = { fontSize: 36, lineHeight: 1.3, color: BP_INK, fontWeight: 500, letterSpacing: "-0.02em", textWrap: "balance" };

const bpLogos = { padding: "80px 56px", textAlign: "center" };
const bpSmallLabel = { fontSize: 12, color: BP_MUTED, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginBottom: 32 };
const bpSmallLabelDark = { fontSize: 12, color: "#bfb6a3", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginBottom: 32 };
const bpLogoGrid = { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, alignItems: "center", maxWidth: 1100, margin: "0 auto" };
const bpLogoCell = { fontFamily: BP_SERIF, fontSize: 28, letterSpacing: "-0.02em", color: BP_INK, fontStyle: "italic" };

const bpSection = { padding: "120px 56px 40px", maxWidth: 1300, margin: "0 auto" };
const bpSectionAccent = { padding: "120px 56px", background: BP_BG_2, borderTop: `1px solid ${BP_LINE}`, borderBottom: `1px solid ${BP_LINE}` };
const bpSectionDark = { padding: "120px 56px", background: BP_INK_DARK, color: BP_BG };
const bpSectionWall = { padding: "120px 56px", maxWidth: 1300, margin: "0 auto" };
const bpSectionHead = { marginBottom: 64, maxWidth: 900 };
const bpH2 = { fontSize: 84, lineHeight: 1, fontWeight: 600, letterSpacing: "-0.035em", margin: 0, textWrap: "balance" };
const bpH2Dark = { fontSize: 84, lineHeight: 1, fontWeight: 600, letterSpacing: "-0.035em", margin: 0, textWrap: "balance", color: "#f3ede1" };

/* services */
const bpServiceGrid = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 };
const bpServiceCard = { background: BP_BG_2, border: `1px solid ${BP_LINE}`, padding: 0, display: "flex", flexDirection: "column", gap: 0, overflow: "hidden" };
const bpStencilWrap = { background: BP_INK_DARK, padding: "48px 40px", borderBottom: `1px solid ${BP_LINE}`, display: "flex", justifyContent: "center", alignItems: "center", height: 240 };

/* Stencil illustrations — bold cut-paper, single-color, editorial */
const StencilUGC = () => (
  <svg viewBox="0 0 240 160" width="100%" height="100%" style={{ maxHeight: 200 }} aria-hidden="true">
    {/* phone frame */}
    <rect x="78" y="14" width="84" height="132" rx="10" fill="#f3ede1" />
    <rect x="84" y="22" width="72" height="108" fill={BP_INK_DARK} />
    {/* play triangle stencil */}
    <path d="M108 60 L108 92 L138 76 Z" fill="#f3c8a8" />
    {/* hook bars */}
    <rect x="92" y="100" width="56" height="3" fill="#f3ede1" />
    <rect x="92" y="108" width="36" height="3" fill="#f3ede1" opacity="0.6" />
    <rect x="92" y="116" width="44" height="3" fill="#f3ede1" opacity="0.6" />
    {/* corner stars */}
    <path d="M28 28 L32 18 L36 28 L46 32 L36 36 L32 46 L28 36 L18 32 Z" fill={BP_ACCENT} />
    <path d="M204 124 L208 116 L212 124 L220 128 L212 132 L208 140 L204 132 L196 128 Z" fill={BP_ACCENT} opacity="0.85" />
    {/* speech tag */}
    <rect x="14" y="100" width="52" height="22" fill="#f3ede1" />
    <path d="M30 122 L34 130 L40 122 Z" fill="#f3ede1" />
    <text x="40" y="115" fontFamily="ui-monospace, monospace" fontSize="9" fill={BP_INK_DARK} textAnchor="middle" fontWeight="700">HOOK 01</text>
  </svg>
);

const StencilPaid = () => (
  <svg viewBox="0 0 240 160" width="100%" height="100%" style={{ maxHeight: 200 }} aria-hidden="true">
    {/* megaphone body */}
    <path d="M40 60 L40 100 L120 120 L120 40 Z" fill="#f3ede1" />
    <rect x="120" y="48" width="22" height="64" fill={BP_ACCENT} />
    {/* handle */}
    <rect x="142" y="74" width="40" height="12" fill="#f3ede1" />
    {/* sound waves */}
    <path d="M156 50 Q172 80 156 110" stroke="#f3c8a8" strokeWidth="3" fill="none" />
    <path d="M170 38 Q194 80 170 122" stroke="#f3c8a8" strokeWidth="3" fill="none" opacity="0.7" />
    <path d="M184 26 Q216 80 184 134" stroke="#f3c8a8" strokeWidth="3" fill="none" opacity="0.5" />
    {/* impact star */}
    <path d="M22 30 L28 14 L34 30 L50 36 L34 42 L28 58 L22 42 L6 36 Z" fill={BP_ACCENT} />
    {/* dollar tag */}
    <rect x="78" y="74" width="28" height="16" fill={BP_INK_DARK} />
    <text x="92" y="86" fontFamily="ui-monospace, monospace" fontSize="11" fill={BP_ACCENT} textAnchor="middle" fontWeight="700">$$$</text>
  </svg>
);

const bpServiceTopWrap = { padding: "40px 40px 0" };
const bpServiceTop = { borderBottom: `1px solid ${BP_LINE}`, paddingBottom: 24, padding: "40px 40px 24px" };
const bpServiceN = { fontFamily: BP_SERIF, fontStyle: "italic", fontSize: 18, color: BP_ACCENT, marginBottom: 14 };
const bpServiceT = { fontSize: 38, fontWeight: 700, margin: "0 0 10px", letterSpacing: "-0.025em", lineHeight: 1.05, display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" };
const bpServiceEmoji = { fontSize: 36, lineHeight: 1, fontFamily: "'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif" };
const bpServiceSub = { fontSize: 20, color: BP_INK_SOFT, fontFamily: BP_SERIF };
const bpServiceBody = { fontSize: 16, lineHeight: 1.55, color: BP_INK_SOFT, margin: "24px 40px 0" };
const bpServiceList = { listStyle: "none", padding: "0 40px 40px", margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 10 };
const bpServiceLi = { fontSize: 15, color: BP_INK, display: "flex", gap: 10, alignItems: "baseline" };
const bpServiceTick = { color: BP_ACCENT, fontWeight: 700 };

/* AI framing */
const bpAiGrid = { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, maxWidth: 1300, marginTop: 64 };
const bpAiCard = { paddingTop: 28, borderTop: `2px solid ${BP_INK}` };
const bpAiN = { fontFamily: BP_SERIF, fontStyle: "italic", fontSize: 28, color: BP_ACCENT, marginBottom: 16 };
const bpAiT = { fontSize: 26, fontWeight: 700, margin: "0 0 12px", letterSpacing: "-0.02em", lineHeight: 1.15 };
const bpAiB = { fontSize: 16, lineHeight: 1.55, color: BP_INK_SOFT, margin: 0 };

/* long-term roster banner */
const bpRosterBanner = { display: "grid", gridTemplateColumns: "1fr 1.4fr auto", gap: 48, alignItems: "center", padding: "44px 56px", margin: "0 56px", background: BP_INK, color: BP_BG, borderRadius: 4 };
const bpRosterLeft = { display: "flex", flexDirection: "column", gap: 14 };
const bpRosterKicker = { fontSize: 11, color: "#bfb6a3", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600 };
const bpRosterT = { fontSize: 30, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.1, margin: 0, color: BP_BG, textWrap: "balance" };
const bpRosterMid = { borderLeft: `1px solid ${BP_LINE_DARK}`, paddingLeft: 32 };
const bpRosterP = { fontSize: 15, lineHeight: 1.55, color: "#d4ccba", margin: 0, textWrap: "pretty" };
const bpRosterCta = { background: BP_ACCENT, color: BP_BG, padding: "18px 26px", fontSize: 14, fontWeight: 700, letterSpacing: "-0.01em", fontFamily: BP_SANS, textDecoration: "none", whiteSpace: "nowrap", cursor: "pointer" };

/* process */
const bpProcessCta = { padding: "40px 56px 40px", display: "flex", justifyContent: "center" };
const bpProcessCtaBtn = { background: BP_INK, color: BP_BG, border: "none", padding: "22px 40px", fontSize: 17, fontWeight: 600, cursor: "pointer", fontFamily: BP_SANS, letterSpacing: "-0.01em" };
const bpProcessCtaLink = { background: BP_INK, color: BP_BG, padding: "22px 40px", fontSize: 17, fontWeight: 600, cursor: "pointer", fontFamily: BP_SANS, letterSpacing: "-0.01em", textDecoration: "none", display: "inline-block" };

/* tri-destination editorial row */
const bpTriCtaWrap = { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: `1px solid ${BP_LINE}`, borderBottom: `1px solid ${BP_LINE}`, marginTop: 24 };
const bpTriCta = { display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 20, padding: "36px 40px", textDecoration: "none", color: BP_INK, background: "transparent", cursor: "pointer" };
const bpTriNum = { fontFamily: BP_SERIF, fontStyle: "italic", fontSize: 36, color: BP_ACCENT, lineHeight: 1 };
const bpTriBody = { display: "flex", flexDirection: "column", gap: 6 };
const bpTriKey = { fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600, color: BP_MUTED };
const bpTriLabel = { fontSize: 24, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.1 };
const bpTriArrow = { fontSize: 22, fontWeight: 500 };

/* dark cases */
const bpCaseList = { display: "flex", flexDirection: "column", maxWidth: 1300, margin: "0 auto" };
const bpCaseRow = { display: "grid", gridTemplateColumns: "60px 200px 1fr 200px", gap: 32, padding: "36px 0", borderTop: `1px solid ${BP_LINE_DARK}`, alignItems: "center" };
const bpCaseN = { fontFamily: BP_SERIF, fontSize: 24, fontStyle: "italic", color: "#bfb6a3" };
const bpCaseClient = { fontSize: 24, fontWeight: 700, letterSpacing: "-0.02em", color: "#f3ede1" };
const bpCaseLine = { fontSize: 17, lineHeight: 1.5, color: "#d4ccba", maxWidth: 580 };
const bpCaseStats = { display: "flex", gap: 32, justifyContent: "flex-end" };
const bpCaseNum = { fontSize: 22, fontWeight: 700, color: "#f3ede1", display: "block" };
const bpCaseNumOk = { fontSize: 22, fontWeight: 700, color: "#f3c8a8", display: "block" };
const bpCaseLab = { fontSize: 11, color: "#9a9282", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 };

/* metric wall */
const bpWall = { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 };
const bpWallTile = { background: BP_BG_2, border: `1px solid ${BP_LINE}`, padding: "40px 32px", aspectRatio: "1 / 1", display: "flex", flexDirection: "column", justifyContent: "space-between" };
const bpWallTileFinal = { background: BP_INK, color: BP_BG, padding: "40px 32px", aspectRatio: "1 / 1", display: "flex", flexDirection: "column", justifyContent: "space-between" };
const bpWallMetric = { fontSize: 92, fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.95 };
const bpWallClient = { fontSize: 22, fontWeight: 700, color: BP_INK, letterSpacing: "-0.02em" };
const bpWallK = { fontSize: 12, color: BP_MUTED, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 700, marginTop: 6 };
const bpWallFinalT = { fontSize: 32, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.1, fontFamily: BP_SANS };
const bpWallBtn = { background: BP_ACCENT, color: "#fff", border: "none", padding: "14px 22px", fontSize: 14, fontWeight: 600, cursor: "pointer", fontFamily: BP_SANS, alignSelf: "flex-start" };

const bpManifesto = { padding: "80px 56px 40px", maxWidth: 900, margin: "0 auto" };
const bpManifestoP = { fontSize: 32, lineHeight: 1.35, color: BP_INK, fontWeight: 500, letterSpacing: "-0.015em", margin: "0 0 40px", textWrap: "pretty" };
const bpSig = { fontFamily: BP_SERIF, fontStyle: "italic", fontSize: 20, color: BP_INK_SOFT };

const bpFooter = { padding: "80px 56px 56px", textAlign: "center", borderTop: `1px solid ${BP_LINE}` };
const bpFooterH = { fontSize: 96, fontFamily: BP_SANS, fontWeight: 600, letterSpacing: "-0.04em", margin: "0 0 20px" };
const bpFooterP = { fontSize: 18, color: BP_INK_SOFT, marginBottom: 32 };
const bpFooterFine = { marginTop: 32, fontSize: 12, color: BP_MUTED, letterSpacing: "0.1em", textTransform: "uppercase" };

window.DirectionBPlus = DirectionBPlus;