/* ==========================================================================
   BrooksCorp site — immersive layer  (prefix: bcx-)
   Sits on immersive.css + brookscorp.site.css. The home page is the six-
   chapter cinematic page ("The Mark" — {B}); inner pages share the nav, type
   and footer. The whole site is dark: deep ink paper, pearl type, the logo
   gradient (#38E5EC → #0AA6B8 → #146A8C) for the braces and for action.
   ========================================================================== */
.bcx {
  /* immersive layer */
  --im-paper: #0B0920; --im-ink: #F4F3FA; --im-scrim: rgba(19, 15, 48, .74);
  /* BCDF role aliases → designed dark mode (Standard §10) */
  --bc-bg-app: #0B0920; --bc-bg-surface: #15112F; --bc-bg-raised: #1B1638; --bc-bg-sunken: #100C29; --bc-bg-inverse: #F4F3FA; --bc-bg-warm: #120E2C;
  --bc-text-strong: #F4F3FA; --bc-text-body: #CBC8DC; --bc-text-muted: #9590B0; --bc-text-subtle: #6E6890; --bc-text-inverse: #180E3F; --bc-text-accent: #38E5EC;
  --bc-border: rgba(255,255,255,.12); --bc-border-strong: rgba(255,255,255,.22); --bc-border-subtle: rgba(255,255,255,.07);
  --bc-grey-100: #1B1638; --bc-grey-50: #100C29; --bc-grey-25: #0F0B29; --bc-white: #F4F3FA; --bc-brand-100: #2A2352; --bc-brand-50: #1B1638; --bc-accent-50: rgba(56,229,236,.10); --bc-accent-100: rgba(56,229,236,.18);
  --bc-focus-ring: 0 0 0 3px rgba(56,229,236,.45);
  --bc-sh-xs: 0 0 0 1px rgba(255,255,255,.06); --bc-sh-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  --bc-sh-md: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); --bc-sh-lg: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  color-scheme: dark;
}
/* Action: cyan with ink text (12:1), never white-on-teal */
.bcx .bc-btn--primary { --_bg: #38E5EC; --_fg: #180E3F; --_sh: 0 2px 12px rgba(56,229,236,.28); }
.bcx .bc-btn--primary:hover { --_bg: #6FEFF3; --_sh: 0 6px 20px rgba(56,229,236,.38); }
.bcx .bc-btn--ghost { --_fg: #F4F3FA; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.bcx .bc-btn--ghost:hover { --_bg: rgba(255,255,255,.08); --_fg: #FFFFFF; }
.bcx .bc-btn--secondary { --_bg: #1B1638; --_fg: #F4F3FA; }
.bcx a:not(.bc-btn) { color: #38E5EC; }
.bcx .bc-btn { color: var(--_fg); }
.bcx .im-nav__link, .bcx .im-chapters a, .bcx .im-nav__brand { color: #F4F3FA; }
.bcx .im-nav__link::after { background: #38E5EC; }
.bcx .im-eyebrow { color: #9590B0; } .bcx .im-eyebrow::before { background: #38E5EC; opacity: .9; }
.bcx .im-display, .bcx .im-h2 { color: #F4F3FA; }
.bcx .im-display em { color: #38E5EC; }
.bcx .im-footer { background: #07061A; color: rgba(244,243,250,.7); }
.bcx .im-footer__legal { border-top-color: rgba(255,255,255,.1); }
.bcx .im-cursor { mix-blend-mode: screen; background: #38E5EC; } .bcx .im-cursor__ring { border-color: rgba(56,229,236,.7); }
.bcx .im-cursor__ring[data-label]::after { color: #F4F3FA; }
.bcx .im-step__n { background: #1B1638; color: #F4F3FA; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.bcx .im-step.is-active .im-step__n { background: #38E5EC; color: #180E3F; }
.bcx .im-panel--scrim { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
@media (max-width: 760px) { .bcx .im-panel--scrim-mobile { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); } }
.bcx .im-veil { background: #0B0920; }
.bcx .im-cue { color: #9590B0; }
.bcx .im-chip { background: rgba(56,229,236,.08); color: #9BEFF3; }

/* Brand lockup inside the immersive nav/footer */
.bcx { --im-nav-h: 92px; }                       /* taller bar for the larger lockup */
.bcx-brand { display: inline-flex; align-items: center; }
.bcx-brand .bcs-lockup svg { height: 58px; }
.im-footer .bcx-brand .bcs-lockup svg { height: 44px; }
@media (max-width: 760px) { .bcx { --im-nav-h: 72px; } .bcx-brand .bcs-lockup svg { height: 40px; } }
.bcx .bcs-lockup .lk-ink { fill: #F4F3FA; }   /* the logo ink is pearl on the dark site */
.im-veil .bcs-lockup svg { height: 44px; }

/* Phones and portrait tablets: the mark gets its own band under the nav — a fixed strip the copy
   scrolls beneath — instead of floating behind the copy scrim. The scene centres the mark in it. */
@media (max-width: 900px) {
  .bcx-home { --bcx-band: 36svh; }
  .bcx-home .im-stage { top: var(--im-nav-h); bottom: auto; height: var(--bcx-band); z-index: 5; background: var(--im-paper); }
  .bcx-home .im-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 44px; pointer-events: none;
    background: linear-gradient(var(--im-paper), rgba(11,9,32,0)); }
  .bcx-home .im-stage canvas { opacity: 1; }
  .bcx-home .im-poster svg { right: 0; left: 0; top: 4%; width: 100%; height: 92%; opacity: .9; }
  /* the band offset lives on <main> once; sections are only as tall as the reading area, so the
     copy runs on as one column with no dead space between chapters */
  .bcx-home main { padding-top: calc(var(--im-nav-h) + var(--bcx-band)); }
  .bcx-home .im-section { min-height: calc(100svh - var(--im-nav-h) - var(--bcx-band)); padding-top: var(--bc-s-5); padding-bottom: var(--bc-s-5); }
  .bcx-home .im-section--end { padding-bottom: var(--bc-s-9); }
  .bcx-home .im-section .im-panel--scrim, .bcx-home .im-section .im-panel--scrim-mobile { background: rgba(19,15,48,.55); }
  .bcx-home .im-cue { display: none; }
}
@media (max-width: 900px) and (max-height: 640px) { .bcx-home { --bcx-band: 42svh; } }   /* short landscape phones */
.bcx .im-nav__link { white-space: nowrap; }
@media (max-width: 900px) { .bcx .im-nav__inner { gap: var(--bc-s-5); } .bcx .im-nav__links { gap: var(--bc-s-5); } }

/* Poster (lite mode) */
.bcx-poster { background: radial-gradient(90% 70% at 72% 45%, #1A1442 0%, #0F0B2A 45%, #0B0920 100%); }

/* Labels the scene positions */
.bcx-labels { position: absolute; inset: 0; pointer-events: none; }
.bcx-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); opacity: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  }
.bcx-label svg { width: 16px; height: 16px; stroke: #38E5EC; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bcx-label {
  padding: 7px 12px; border-radius: 999px; background: rgba(21,17,47,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px -14px rgba(0,0,0,.6); font-size: .8125rem; font-weight: 600; color: #F4F3FA; }
.bcx-label--core { border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.bcx-label--core b { font-family: var(--bc-font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.125rem; letter-spacing: -.01em; }
.bcx-label--core b { color: #38E5EC; }
.bcx-label--core span { font-weight: 500; color: var(--bc-text-muted); font-size: .75rem; }
@media (max-width: 900px) { .bcx-labels { display: none; } }

/* Hero */
.bcx-hero .im-display { max-width: 12ch; }
.bcx-hero .im-display em { color: var(--bc-accent-500); }

/* Capabilities list */
.bcx-caps { list-style: none; margin: var(--bc-s-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.bcx-caps a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 -12px; border-radius: 10px; text-decoration: none; color: var(--im-ink); font-weight: 600; font-size: .9375rem; transition: background var(--im-dur-1) var(--im-ease-out); }
.bcx-caps a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bc-accent-500); flex: none; opacity: .5; transition: opacity var(--im-dur-1); }
.bcx-caps a::before { background: #38E5EC; }
.bcx-caps a:hover { background: rgba(255,255,255,.06); } .bcx-caps a:hover::before { opacity: 1; }
.bcx-caps li.is-active a { background: rgba(56,229,236,.12); } .bcx-caps li.is-active a::before { opacity: 1; }
@media (max-width: 480px) { .bcx-caps { grid-template-columns: 1fr; } }

/* Checks */
.bcx-checks { list-style: none; margin: var(--bc-s-6) 0 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; color: var(--bc-text-body); }
.bcx-checks li { display: flex; gap: 10px; align-items: flex-start; }
.bcx-checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #38E5EC;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }

/* Proof figures */
.bcx-proof { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--bc-s-5); }
.bcx-proof > div { padding: var(--bc-s-6); border-radius: var(--bc-r-lg); background: rgba(21,17,47,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.08); display: grid; gap: 8px; }
.bcx-proof > div:first-child { grid-column: 1 / -1; }
.bcx-proof dt { font-size: .8125rem; color: var(--bc-text-muted); order: 2; }
.bcx-proof dd { margin: 0; order: 1; font-family: var(--bc-font-display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.02em; line-height: 1; color: var(--im-ink); font-variant-numeric: tabular-nums; }
.bcx-proof dd.bc-money { font-size: clamp(1.75rem, 3.4vw, 3rem); color: var(--im-ink); }
.bcx-proof dd small { font-size: .5em; color: #38E5EC; margin-left: 2px; }
@media (max-width: 600px) { .bcx-proof { grid-template-columns: 1fr; } }

/* Footer extras */
.bcx-footer__badge { display: inline-block; margin-top: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .75rem; letter-spacing: .04em; }

/* Inner pages: the fixed nav needs headroom; page heads use the editorial scale */
.bcx-inner main { padding-top: var(--im-nav-h); }
.bcx-inner .bcs-pagehead h1 { font-family: var(--bc-font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; font-size: clamp(2rem, 4.2vw, 3.5rem); text-wrap: balance; }
.bcx-inner .bcs-pagehead__inner { padding-block: var(--bc-s-11) var(--bc-s-10); }
.bcx-inner .bcs-pagehead p { font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.55; }
.bcx-inner .bc-section h2 { font-family: var(--bc-font-display); letter-spacing: -.02em; }
.bcx-inner .bc-footer { display: none; }
.bcx-inner .bcs-pagehead { background: #100C29; }
.bcx-inner .bcs-pagehead .bc-eyebrow { color: #38E5EC !important; }
.bcx-inner .bc-section:nth-of-type(even) { background: #0F0B29; }
.bcx-inner .bc-card { background: var(--bc-bg-surface); border-color: var(--bc-border); }
.bcx-inner .bc-input, .bcx-inner .bc-textarea, .bcx-inner .bc-select { background: #100C29; color: #F4F3FA; border-color: var(--bc-border-strong); }
.bcx-inner .bcs-marquee { border-color: var(--bc-border-subtle); }
.bcx-inner .bcs-stats { background: #07061A; }
.bcx .bcs-map { background: #15112F; }