/* ==========================================================================
   Business aid — base + components
   Requires tokens.css first. Class-based, framework-agnostic.
   ========================================================================== */

*,*::before,*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ba-paper);
  color: var(--ba-navy);
  font-family: var(--ba-font);
  font-size: var(--ba-fs-body);
  line-height: var(--ba-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--ba-amber); text-decoration: none; }
a:hover { color: var(--ba-amber-hover); }
::selection { background: var(--ba-amber); color: var(--ba-navy); }
img, svg, canvas { display: block; max-width: 100%; }

/* ---------- Layout ---------------------------------------------------- */
.ba-container { max-width: var(--ba-container); margin: 0 auto; padding: 0 var(--ba-gutter); }
.ba-measure   { max-width: var(--ba-measure);   margin: 0 auto; padding: 0 var(--ba-gutter); }
.ba-section   { padding: var(--ba-section) 0; }
.ba-section--sm { padding: var(--ba-section-sm) 0; }
.ba-section--mist { background: var(--ba-mist); border-top: 1px solid var(--ba-border); border-bottom: 1px solid var(--ba-border); }
.ba-section--dark { background: var(--ba-navy-deep); }

/* Auto-collapsing grid — this is how the whole site goes responsive.
   Never hard-code column counts. */
/* auto-fill, not auto-fit: auto-fit collapses the empty tracks and lets
   the surviving cards stretch across them — one offer on /cloudflare/
   rendered 1192px wide, the full container. */
.ba-grid      { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ba-grid--wide{ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(36px,5vw,70px); }
.ba-grid--tight{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }

/* ---------- Typography ------------------------------------------------ */
.ba-display { margin:0; font-weight:700; font-size:var(--ba-fs-display); line-height:var(--ba-lh-tight); letter-spacing:var(--ba-ls-display); }
.ba-h1 { margin:0; font-weight:700; font-size:var(--ba-fs-h1); line-height:.96; letter-spacing:var(--ba-ls-h1); }
.ba-h2 { margin:0; font-weight:700; font-size:var(--ba-fs-h2); line-height:var(--ba-lh-head); letter-spacing:var(--ba-ls-h2); }
.ba-h3 { margin:0; font-weight:600; font-size:var(--ba-fs-h3); letter-spacing:var(--ba-ls-h3); }
.ba-h4 { margin:0; font-weight:600; font-size:var(--ba-fs-h4); letter-spacing:var(--ba-ls-h4); }
.ba-lead { margin:0; font-size:var(--ba-fs-lead); line-height:var(--ba-lh-body); color:var(--ba-slate); }
.ba-body { margin:0; font-size:var(--ba-fs-sm); line-height:var(--ba-lh-dense); color:var(--ba-slate); }

.ba-kicker {
  display:block; font-family:var(--ba-font-mono); font-size:var(--ba-fs-kicker);
  letter-spacing:var(--ba-ls-kicker); text-transform:uppercase; color:var(--ba-amber);
  margin-bottom:var(--ba-4);
}
.ba-meta {
  font-family:var(--ba-font-mono); font-size:var(--ba-fs-meta);
  letter-spacing:var(--ba-ls-meta); text-transform:uppercase; color:var(--ba-muted);
}

/* On dark */
.ba-on-dark .ba-display,
.ba-on-dark .ba-h1,
.ba-on-dark .ba-h2,
.ba-on-dark .ba-h3 { color: var(--ba-on-dark); }
.ba-on-dark .ba-lead,
.ba-on-dark .ba-body { color: var(--ba-on-dark-soft); }
.ba-dim { color: var(--ba-on-dark-softer); }

/* Section header: title left, one-line note right */
.ba-sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,54px); }
.ba-sec-head__note { margin:0; max-width:330px; font-size:15.5px; line-height:var(--ba-lh-body); color:var(--ba-slate); }

/* ---------- Buttons --------------------------------------------------- */
.ba-btn {
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--ba-font); font-weight:600; font-size:16.5px;
  padding:18px 30px; border-radius:var(--ba-r-pill); border:0; cursor:pointer;
  min-height:44px; text-decoration:none;
  transition:transform var(--ba-t-hover) var(--ba-ease), box-shadow var(--ba-t-hover) var(--ba-ease),
             border-color var(--ba-t-fast), background-color var(--ba-t-fast);
}
.ba-btn__arrow { font-size:19px; line-height:1; }

.ba-btn--primary { background:var(--ba-amber); color:var(--ba-navy); box-shadow:0 10px 28px rgba(246,162,30,.32); }
.ba-btn--primary:hover { transform:translateY(-3px); box-shadow:var(--ba-sh-amber); color:var(--ba-navy); }

.ba-btn--ghost-dark { background:transparent; color:var(--ba-on-dark); border:1px solid rgba(255,255,255,.22); }
.ba-btn--ghost-dark:hover { border-color:#fff; background:rgba(255,255,255,.06); transform:translateY(-3px); color:#fff; }

.ba-btn--ghost { background:var(--ba-paper); color:var(--ba-navy); border:1px solid var(--ba-border-2); }
.ba-btn--ghost:hover { border-color:var(--ba-navy); transform:translateY(-3px); color:var(--ba-navy); }

.ba-btn--sm { font-size:14.5px; padding:11px 19px; }
.ba-btn--block { width:100%; }

.ba-link { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color:var(--ba-amber); }

/* ---------- Badges, chips, status ------------------------------------- */
.ba-badge {
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--ba-border); background:var(--ba-paper);
  border-radius:var(--ba-r-pill); padding:7px 14px;
  font-family:var(--ba-font-mono); font-size:11.5px; letter-spacing:.12em; color:var(--ba-slate);
}
.ba-badge--dark { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--ba-on-dark-bright); }
.ba-badge--amber { border-color:rgba(246,162,30,.3); background:rgba(246,162,30,.1); color:var(--ba-amber); }
.ba-badge--price { font-size:11px; letter-spacing:.1em; color:var(--ba-amber); background:rgba(246,162,30,.12); border:0; padding:5px 10px; }

/* Amber status dot with ping — the brand signature. Use sparingly. */
.ba-dot { position:relative; width:8px; height:8px; flex:none; display:inline-block; }
.ba-dot::before,
.ba-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--ba-amber); }
.ba-dot::after { animation: ba-ping 2s ease-out infinite; }
.ba-dot--ok::before, .ba-dot--ok::after { background: var(--ba-ok); }
@keyframes ba-ping { 0% { transform:scale(1); opacity:.75; } 70%,100% { transform:scale(2.8); opacity:0; } }

.ba-chip {
  font-family:var(--ba-font); font-size:14px; font-weight:500; color:var(--ba-slate-dark);
  background:var(--ba-mist); border:1px solid var(--ba-border);
  border-radius:var(--ba-r-pill); padding:10px 16px; cursor:pointer; min-height:44px;
  transition:all var(--ba-t-fast);
}
.ba-chip[aria-pressed="true"], .ba-chip.is-active { background:var(--ba-navy); border-color:var(--ba-navy); color:#fff; }

/* ---------- Nav ------------------------------------------------------- */
.ba-nav {
  position:fixed; top:0; left:0; right:0; z-index:var(--ba-z-nav);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px var(--ba-gutter);
  background:transparent;
  transition:background-color var(--ba-t-theme) var(--ba-ease), box-shadow var(--ba-t-theme) var(--ba-ease);
}
/* .is-light is toggled by effects.js once the dark hero has scrolled past */
.ba-nav.is-light {
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--ba-sh-nav);
}
.ba-nav__brand { display:flex; align-items:center; gap:10px; flex:none; }
.ba-nav__word { display:flex; align-items:baseline; }
.ba-nav__word b { font-weight:700; font-size:18px; letter-spacing:-0.03em; color:#fff; }
.ba-nav__word i { font-style:normal; font-weight:500; font-size:18px; color:var(--ba-on-dark-soft); margin-left:5px; }
.ba-nav__word s { text-decoration:none; width:5px; height:5px; border-radius:50%; background:var(--ba-amber); margin-left:3px; }
.ba-nav.is-light .ba-nav__word b,
.ba-nav.is-light .ba-nav__word i { color:var(--ba-navy); }

.ba-nav__desk { display:flex; align-items:center; gap:26px; }
.ba-nav__links { display:flex; align-items:center; gap:22px; font-size:14.5px; font-weight:500; }
.ba-nav__links a { color:var(--ba-on-dark-soft); }
.ba-nav__links a:hover { color:#fff; }
.ba-nav.is-light .ba-nav__links a { color:var(--ba-slate-dark); }
.ba-nav.is-light .ba-nav__links a:hover { color:var(--ba-navy); }

.ba-burger {
  display:none; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:var(--ba-r-md);
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); cursor:pointer;
}
.ba-burger span { display:block; width:18px; height:2px; background:#fff; border-radius:2px; }
.ba-burger span + span { margin-top:5px; }
.ba-nav.is-light .ba-burger { border-color:var(--ba-border-2); background:#fff; }
.ba-nav.is-light .ba-burger span { background:var(--ba-navy); }

/* Mobile overlay menu */
.ba-menu {
  position:fixed; inset:0; z-index:var(--ba-z-menu); background:var(--ba-navy-deep);
  display:none; flex-direction:column;
}
.ba-menu.is-open { display:flex; }
.ba-menu__head { display:flex; align-items:center; justify-content:space-between; padding:16px var(--ba-gutter); flex:none; }
.ba-menu__close { width:44px; height:44px; border-radius:var(--ba-r-md); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.ba-menu__list { flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--ba-gutter); }
.ba-menu__list a { font-weight:700; font-size:clamp(30px,9vw,46px); letter-spacing:-0.035em; color:#fff; padding:10px 0; }
.ba-menu__list a[aria-current] { color:var(--ba-amber); }
.ba-menu__foot { flex:none; padding:0 var(--ba-gutter) 34px; }

/* ---------- Hero ------------------------------------------------------ */
.ba-hero {
  position:relative; min-height:100vh; background:var(--ba-navy-deep);
  overflow:hidden; display:flex; flex-direction:column; justify-content:center;
}
.ba-hero__canvas { position:absolute; inset:0; width:100%; height:100%; }
.ba-hero__glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 72% 22%, rgba(246,162,30,.16), rgba(246,162,30,0) 60%),
    radial-gradient(60% 50% at 10% 90%, rgba(30,80,150,.18), rgba(30,80,150,0) 65%);
}
.ba-hero__scrim {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,20,33,.45) 0%, rgba(11,20,33,0) 26%, rgba(11,20,33,0) 66%, rgba(11,20,33,.85) 100%);
}
.ba-hero__inner { position:relative; z-index:5; width:100%; padding:150px 0 60px; }
.ba-hero__actions { display:flex; gap:12px; flex-wrap:wrap; }
.ba-hero__foot { position:relative; z-index:5; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:40px; }

/* Page hero (inner pages — no canvas) */
/* Two values from the scale, not six numbers picked one at a time. */
.ba-phero { position:relative; background:var(--ba-navy-deep); overflow:hidden; padding:clamp(120px,12vw,184px) 0 clamp(56px,6vw,88px); }
.ba-phero__glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 70% at 80% 10%, rgba(246,162,30,.16), rgba(246,162,30,0) 60%); }
.ba-phero__inner { position:relative; }

.ba-stat__label { font-family:var(--ba-font-mono); font-size:10.5px; letter-spacing:var(--ba-ls-meta); color:var(--ba-on-dark-softer); margin-bottom:6px; }
.ba-stat__value { font-weight:600; font-size:19px; color:#fff; }
.ba-stat__value--amber { color:var(--ba-amber); }

/* Scroll hint */
.ba-scrollhint { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ba-scrollhint__rail { position:relative; width:1px; height:40px; background:rgba(255,255,255,.14); overflow:hidden; }
.ba-scrollhint__rail::after { content:''; position:absolute; top:0; left:0; width:1px; height:14px; background:var(--ba-amber); animation:ba-scrollhint 2.2s ease-in-out infinite; }
@keyframes ba-scrollhint { 0% { transform:translateY(0); opacity:0; } 30% { opacity:1; } 100% { transform:translateY(16px); opacity:0; } }

/* ---------- Marquee --------------------------------------------------- */
.ba-marquee { background:var(--ba-amber); overflow:hidden; padding:16px 0; border-top:1px solid rgba(15,27,45,.12); }
.ba-marquee__track { display:flex; width:max-content; animation:ba-marquee 34s linear infinite; }
.ba-marquee__group { display:flex; align-items:center; gap:34px; padding-right:34px; }
.ba-marquee__group span { font-weight:600; font-size:16px; color:var(--ba-navy); white-space:nowrap; }
.ba-marquee__group i { width:5px; height:5px; border-radius:50%; background:rgba(15,27,45,.4); }
@keyframes ba-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ---------- Editorial rows (the hover-sweep list) --------------------- */
.ba-rows { display:flex; flex-direction:column; border-top:1px solid var(--ba-border); }
.ba-row { position:relative; border-bottom:1px solid var(--ba-border); overflow:hidden; cursor:pointer; }
.ba-row__sweep { position:absolute; inset:0; background:var(--ba-navy); transform:translateY(101%); transition:transform var(--ba-t-sweep) var(--ba-ease); }
.ba-row__inner { position:relative; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; padding:30px 6px; }
.ba-row__num   { font-family:var(--ba-font-mono); font-size:13px; color:var(--ba-muted); width:34px; flex:none; transition:color .4s; }
.ba-row__title { flex:1 1 200px; transition:color .4s; }
.ba-row__desc  { flex:1 1 320px; max-width:520px; margin:0; font-size:15px; line-height:var(--ba-lh-dense); color:var(--ba-slate); transition:color .4s; }
.ba-row__arrow { flex:none; font-size:21px; color:#C3CBD4; transition:color .4s, transform .4s; }

@media (hover:hover) {
  .ba-row:hover .ba-row__sweep { transform:translateY(0); }
  .ba-row:hover .ba-row__title { color:#fff; }
  .ba-row:hover .ba-row__desc  { color:var(--ba-on-dark-soft); }
  .ba-row:hover .ba-row__num   { color:var(--ba-amber); }
  .ba-row:hover .ba-row__arrow { color:var(--ba-amber); transform:translateX(6px); }
}

/* ---------- Cards ----------------------------------------------------- */
.ba-card {
  background:var(--ba-paper); border:1px solid var(--ba-border); border-radius:var(--ba-r-xl);
  padding:clamp(24px,3vw,30px);
  transition:transform var(--ba-t-hover) var(--ba-ease), box-shadow var(--ba-t-hover), border-color var(--ba-t-hover);
}
.ba-card--link { cursor:pointer; }
@media (hover:hover) {
  .ba-card--link:hover { transform:translateY(-6px); box-shadow:var(--ba-sh-card); border-color:var(--ba-border-2); }
}
.ba-card--dark { background:var(--ba-navy); border-color:var(--ba-navy); }
.ba-card--dark .ba-h3, .ba-card--dark .ba-h4 { color:#fff; }
.ba-card--dark p { color:var(--ba-on-dark-soft); }
.ba-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.ba-card__media { height:200px; overflow:hidden; border-radius:var(--ba-r-xl) var(--ba-r-xl) 0 0; }
.ba-card--media { padding:0; overflow:hidden; }
.ba-card--media .ba-card__body { padding:26px; }

/* Layer card — L1/L2/L3, highlighted while in viewport centre */
.ba-layer { background:var(--ba-paper); border:1px solid var(--ba-border); border-radius:var(--ba-r-xl); padding:clamp(24px,3vw,34px); transition:border-color .4s, box-shadow .4s; }
.ba-layer.is-active { border-color:var(--ba-amber); box-shadow:0 22px 60px rgba(15,27,45,.10); }
.ba-layer__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
.ba-layer__num { font-family:var(--ba-font-mono); font-size:clamp(30px,4vw,42px); font-weight:500; line-height:1; color:var(--ba-border); transition:color .4s; }
.ba-layer.is-active .ba-layer__num { color:var(--ba-amber); }

/* Accent-top card */
.ba-topcard { background:var(--ba-paper); border:1px solid var(--ba-border); border-radius:var(--ba-r-lg); overflow:hidden; }
.ba-topcard__rule { height:4px; background:var(--ba-amber); }
.ba-topcard__rule--navy { background:var(--ba-navy); }
.ba-topcard__rule--muted { background:var(--ba-muted); }
.ba-topcard__body { padding:26px; }

/* Arrow list */
.ba-alist { display:flex; flex-direction:column; gap:12px; }
.ba-alist > * { display:flex; gap:11px; align-items:baseline; font-size:15px; color:var(--ba-slate-dark); }
.ba-alist > * > span:first-child { color:var(--ba-amber); flex:none; }

/* ---------- Numbers (counters) ---------------------------------------- */
.ba-num { border-top:1px solid var(--ba-on-dark-line); padding-top:24px; }
.ba-num--amber { border-top-color:rgba(246,162,30,.5); }
.ba-num__value { display:flex; align-items:baseline; gap:3px; margin-bottom:10px; }
.ba-num__value b { font-weight:700; font-size:clamp(40px,5vw,68px); letter-spacing:-0.04em; line-height:1; color:#fff; }
.ba-num__value i { font-style:normal; font-weight:700; font-size:clamp(22px,2.4vw,32px); color:var(--ba-amber); }
.ba-num__value b.is-amber { color:var(--ba-amber); }
.ba-num__label { font-size:14.5px; line-height:1.5; color:var(--ba-on-dark-soft); }

/* Statement — words light up on scroll */
.ba-statement { margin:0; font-weight:600; font-size:clamp(19px,2.8vw,36px); line-height:1.34; letter-spacing:-0.03em; color:#2C3D55; max-width:940px; }
.ba-statement span { transition:color .2s linear; }
.ba-statement span.is-lit { color:#fff; }
.ba-statement__wrap { margin-top:clamp(48px,7vw,76px); padding:clamp(26px,4vw,42px); border:1px solid var(--ba-on-dark-line); border-radius:22px; background:rgba(255,255,255,.03); }

/* ---------- Timeline -------------------------------------------------- */
.ba-timeline { position:relative; }
.ba-timeline__rail { position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--ba-border); }
.ba-timeline__fill { position:absolute; left:0; top:8px; width:2px; height:0; background:var(--ba-amber); transition:height .1s linear; }
.ba-step { position:relative; padding:28px 0 28px 40px; }
.ba-step + .ba-step { border-top:1px solid #F1F3F5; }
.ba-step__dot { position:absolute; left:-6px; top:36px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #C3CBD4; transition:border-color .4s, background-color .4s, transform .4s; }
.ba-step.is-active .ba-step__dot { border-color:var(--ba-amber); background:var(--ba-amber); transform:scale(1.15); }
.ba-step__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; align-items:baseline; }
.ba-step__label { display:flex; align-items:baseline; gap:12px; }
.ba-step__label span { font-family:var(--ba-font-mono); font-size:13px; color:var(--ba-amber); }

/* ---------- Forms ----------------------------------------------------- */
.ba-form { background:var(--ba-paper); border-radius:var(--ba-r-2xl); padding:clamp(26px,3.6vw,38px); box-shadow:var(--ba-sh-panel); }
.ba-field { margin-bottom:18px; }
.ba-label { display:block; font-size:13px; font-weight:600; color:var(--ba-navy); margin-bottom:8px; }
.ba-label span { color:var(--ba-amber); }
.ba-input, .ba-textarea {
  width:100%; border:1px solid var(--ba-border-2); border-radius:var(--ba-r-md);
  padding:14px 15px; font-size:15px; font-family:var(--ba-font); color:var(--ba-navy);
  background:#fff; outline:none; transition:border-color var(--ba-t-fast), box-shadow var(--ba-t-fast);
}
.ba-textarea { resize:vertical; min-height:104px; }
.ba-input:focus, .ba-textarea:focus { border-color:var(--ba-amber); box-shadow:var(--ba-ring-amber); }
.ba-input::placeholder, .ba-textarea::placeholder { color:var(--ba-muted); }
.ba-form__foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ba-form__note { font-size:13px; color:var(--ba-muted); max-width:190px; line-height:1.45; }
.ba-field--split { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:18px; margin-bottom:18px; }

/* ---------- FAQ accordion --------------------------------------------- */
.ba-faq { background:var(--ba-paper); border:1px solid var(--ba-border); border-radius:var(--ba-r-lg); overflow:hidden; }
.ba-faq__item + .ba-faq__item { border-top:1px solid #EEF0F2; }
.ba-faq__q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; cursor:pointer; width:100%; background:none; border:0; text-align:left; font-family:var(--ba-font); }
.ba-faq__q span:first-child { font-weight:600; font-size:16.5px; color:var(--ba-navy); }
.ba-faq__i { font-size:20px; color:var(--ba-amber); flex:none; transition:transform .3s; }
.ba-faq__item.is-open .ba-faq__i { transform:rotate(180deg); }
.ba-faq__a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.ba-faq__a p { margin:0; padding:0 26px 22px; font-size:15px; line-height:var(--ba-lh-body); color:var(--ba-slate); }

/* ---------- Terminal block -------------------------------------------- */
.ba-terminal {
  font-family:var(--ba-font-mono); font-size:13px; line-height:2; color:var(--ba-on-dark-softer);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:22px 24px; overflow-x:auto;
}
.ba-terminal div { white-space:nowrap; }
.ba-terminal .cmd { color:var(--ba-amber); }
.ba-terminal .ok  { color:#fff; }
.ba-terminal .bad { color:var(--ba-err); }
.ba-terminal .caret { animation:ba-caret 1.1s steps(1) infinite; color:var(--ba-amber); }
@keyframes ba-caret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }

/* ---------- Status list ----------------------------------------------- */
.ba-status { border:1px solid var(--ba-border); border-radius:var(--ba-r-lg); overflow:hidden; }
.ba-status__row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }
.ba-status__row + .ba-status__row { border-top:1px solid #EEF0F2; }
.ba-status__name { font-weight:500; font-size:15.5px; color:var(--ba-navy); }
.ba-status__state { display:inline-flex; align-items:center; gap:8px; font-family:var(--ba-font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--ba-ok-ink); }
.ba-status__state i { width:7px; height:7px; border-radius:50%; background:var(--ba-ok); }
.ba-status__state--warn { color:#B5790F; }
.ba-status__state--warn i { background:var(--ba-amber); }

/* ---------- Article -------------------------------------------------- */
.ba-article p { margin:0 0 24px; font-size:17.5px; line-height:1.7; color:var(--ba-slate-dark); }
.ba-article h2 { margin:38px 0 16px; font-weight:700; font-size:clamp(24px,3vw,32px); letter-spacing:-0.035em; color:var(--ba-navy); }
.ba-article__code { background:var(--ba-navy); border-radius:var(--ba-r-lg); padding:24px; margin:32px 0; overflow-x:auto; font-family:var(--ba-font-mono); font-size:13px; line-height:1.9; color:var(--ba-on-dark-soft); }
.ba-article__code .comment { color:var(--ba-on-dark-softer); }
.ba-article__code .cmd { color:var(--ba-amber); }
/* Column, not row: a callout with a heading above its body had the
   heading squeezed into a flex track a few words wide. */
.ba-callout { display:flex; flex-direction:column; gap:8px; background:var(--ba-mist); border-left:3px solid var(--ba-amber); border-radius:var(--ba-r-md); padding:22px 26px; margin:32px 0; }
.ba-callout p { margin:0; font-size:16px; line-height:1.65; color:var(--ba-navy); }

/* ---------- CTA band + footer ----------------------------------------- */
.ba-cta { position:relative; background:var(--ba-navy); overflow:hidden; padding:clamp(60px,8vw,96px) 0; }
.ba-cta__glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 70% at 82% 10%, rgba(246,162,30,.18), rgba(246,162,30,0) 60%); }
.ba-cta__inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }

.ba-footer { background:var(--ba-navy-black); padding:clamp(56px,8vw,80px) 0 0; overflow:hidden; }
.ba-footer__cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:36px; padding-bottom:clamp(44px,6vw,64px); }
.ba-footer__title { font-family:var(--ba-font-mono); font-size:11px; letter-spacing:var(--ba-ls-meta); color:var(--ba-slate-dark); margin-bottom:18px; }
.ba-footer__links { display:flex; flex-direction:column; gap:12px; font-size:14.5px; }
.ba-footer__links a { color:var(--ba-on-dark-soft); }
.ba-footer__links a:hover { color:#fff; }
.ba-footer__word { display:flex; align-items:baseline; justify-content:center; border-top:1px solid #141F2E; padding-top:clamp(28px,4vw,40px); user-select:none; }
.ba-footer__word b { font-weight:700; font-size:clamp(44px,12.5vw,190px); line-height:.85; letter-spacing:-0.055em; color:#111C2B; }
.ba-footer__word i { font-style:normal; font-weight:500; font-size:clamp(44px,12.5vw,190px); line-height:.85; letter-spacing:-0.045em; color:#111C2B; margin-left:.2em; }
.ba-footer__word s { text-decoration:none; width:clamp(9px,2vw,26px); height:clamp(9px,2vw,26px); border-radius:50%; background:var(--ba-amber); margin-left:.12em; }
.ba-footer__legal { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:24px 0; }
.ba-footer__legal span, .ba-footer__legal a { font-size:13px; color:var(--ba-slate-dark); }

/* ---------- Scroll reveal --------------------------------------------- */
.ba-reveal { opacity:0; transform:translateY(24px); transition:opacity var(--ba-t-reveal) var(--ba-ease), transform var(--ba-t-reveal) var(--ba-ease); }
.ba-reveal.is-in { opacity:1; transform:none; }
/* Stagger children: the delays below only bite if the children have a
   transition of their own, so give them the reveal treatment and let the
   ancestor .ba-reveal.is-in release them. */
.ba-reveal [data-stagger] > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--ba-t-reveal) var(--ba-ease),
              transform var(--ba-t-reveal) var(--ba-ease),
              border-color .4s, box-shadow .4s;
}
.ba-reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ba-reveal [data-stagger] > * { opacity: 1; transform: none; transition: none; }
}

/* stagger children: add data-stagger to the parent */
[data-stagger] > *:nth-child(2) { transition-delay:.07s; }
[data-stagger] > *:nth-child(3) { transition-delay:.14s; }
[data-stagger] > *:nth-child(4) { transition-delay:.21s; }
[data-stagger] > *:nth-child(5) { transition-delay:.28s; }
[data-stagger] > *:nth-child(6) { transition-delay:.35s; }

/* ---------- Custom cursor (desktop, fine pointer only) ---------------- */
.ba-cursor-ring, .ba-cursor-dot { position:fixed; left:0; top:0; pointer-events:none; z-index:var(--ba-z-cursor); opacity:0; border-radius:50%; }
.ba-cursor-ring { width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(246,162,30,.9); transition:width .22s ease, height .22s ease, margin .22s ease, background-color .22s ease; }
.ba-cursor-ring.is-hot { width:58px; height:58px; margin:-29px 0 0 -29px; background:rgba(246,162,30,.14); }
.ba-cursor-dot { width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--ba-amber); }

/* ---------- Media queries -------------------------------------------- */
@media (max-width: 899px) {
  .ba-nav__desk { display:none; }
  .ba-burger { display:flex; }
  .ba-btn { width:100%; }             /* buttons go full-width on mobile */
  .ba-hero__actions .ba-btn { width:100%; }
  .ba-marquee__track { animation-duration:22s; }
}
@media (max-width: 639px) {
  .ba-grid, .ba-grid--wide, .ba-grid--tight { grid-template-columns:1fr; }
  .ba-row__inner { padding:24px 4px; }
  .ba-form { padding:24px 20px; }
}
@media (pointer: coarse) {
  .ba-cursor-ring, .ba-cursor-dot { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .ba-reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   Redesign extras — header/footer/menu additions (2026-09-09).
   Only uses existing tokens; no hard-coded colours or magic numbers.
   ============================================================ */

/* Nav inner wrapper — constrains fixed nav content to container width */
.ba-nav__inner {
  max-width: var(--ba-container);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* .ba-nav sets its own padding + fixed positioning; the wrapper only lays
   its children out. Undo the outer padding-on-.ba-nav so it doesn't
   double up. */
.ba-nav { padding-left: var(--ba-gutter); padding-right: var(--ba-gutter); }

/* Mono utility — for kickers, meta, ON CALL badges. */
.ba-mono {
  font-family: var(--ba-font-mono);
  font-size: var(--ba-fs-meta);
  font-weight: 500;
  letter-spacing: var(--ba-ls-meta);
  text-transform: uppercase;
  color: var(--ba-on-dark-soft);
}
.ba-nav.is-light .ba-mono,
:not(.ba-menu):not(.ba-footer) > .ba-mono { color: var(--ba-slate-dark); }

/* CTA band content */
.ba-cta__copy    { flex: 1 1 auto; max-width: 640px; }
.ba-cta__title   {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--ba-on-dark);
  margin: 0 0 12px;
}
.ba-cta__lead    {
  font-size: var(--ba-fs-lead);
  line-height: var(--ba-lh-body);
  color: var(--ba-on-dark-soft);
  margin: 0;
  max-width: 520px;
}

/* Footer brand column */
.ba-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.ba-footer__tagline {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ba-on-dark-soft);
  margin: 4px 0 0;
  max-width: 260px;
}
.ba-footer__oncall,
.ba-menu__oncall {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.ba-menu__oncall {
  justify-content: center;
  margin-top: 20px;
  color: var(--ba-on-dark);
}
.ba-menu__oncall .ba-mono { color: var(--ba-on-dark); }

/* Giant decorative footer wordmark — dot after "aid" */
.ba-footer__word-dot {
  display: inline-block;
  width: clamp(9px, 2vw, 26px);
  height: clamp(9px, 2vw, 26px);
  border-radius: 50%;
  background: var(--ba-amber);
  margin-left: .18em;
  align-self: baseline;
  position: relative;
  top: -0.05em;
}

/* Reduce horizontal overflow from the giant wordmark on very narrow screens */
@media (max-width: 480px) {
  .ba-footer__word b,
  .ba-footer__word i { font-size: clamp(38px, 14vw, 68px); }
}

/* ============================================================
   Redesign extras — front-page fixes (2026-09-09).
   ============================================================ */

/* .ba-row is applied to an <a> in front-page.php. Anchors are inline
   by default, which means overflow:hidden doesn't clip its child
   .ba-row__sweep at translateY(101%) — the sweep stays visible and
   the row permanently looks like it's in hover state. Force block
   layout and reset the amber anchor colour so title stays navy. */
a.ba-row,
a.ba-row:visited,
a.ba-row:hover {
  display: block;
  color: var(--ba-navy);
  text-decoration: none;
}

/* Nav CTA button — the small pill sitting to the right of the desk
   link row. Ensure the link inside doesn't inherit body/anchor
   colour and doesn't underline. */
.ba-nav .ba-btn { text-decoration: none; }

/* Hero "So do we." — the design specifies a specific muted navy
   colour, not the generic body slate. Class .ba-dim already sets
   the token, ensure it wins inside .ba-display. */
.ba-display .ba-dim { color: var(--ba-on-dark-softer); }

/* -----------------------------------------------------------
   Nav sizing pass — align to Business aid Homepage (standalone)
   (2026-09-09). Design intent: mark 30px, brand 19px, links 14.5px
   with 28px gap, 32px gap between links and CTA, 20px 44px nav
   padding, .is-light brand tone slightly lighter (#AEB9C7) than
   the default --ba-on-dark-soft (#9DAAB9). Base.css shipped
   smaller values; these overrides keep the visual weight the
   comp expects.
   ----------------------------------------------------------- */
.ba-nav { padding-top: 20px; padding-bottom: 20px; }

.ba-nav__brand > .ba-nav__mark > svg { width: 30px; height: 30px; }
.ba-nav__word b,
.ba-nav__word i { font-size: 19px; }
.ba-nav__word i { color: #AEB9C7; }

.ba-nav__desk  { gap: 32px; }
.ba-nav__links { gap: 28px; }
.ba-nav__links a { color: #AEB9C7; }

/* CTA pill in the nav — match the comp's 12/20 padding and
   14.5px 600 weight. .ba-btn--sm is close but its 11/19 is
   slightly tighter than the design. */
.ba-nav .ba-btn--sm { font-size: 14.5px; font-weight: 600; padding: 12px 20px; }

/* -----------------------------------------------------------
   Hero content layout — matches the standalone HTML (2026-09-09).
   The design puts the lead + CTA row inline, flex-wrap, aligned
   to the baseline of the last line — not stacked vertically.
   ----------------------------------------------------------- */
.ba-hero__badge { margin-bottom: 34px; }
.ba-hero__title { margin: 0 0 30px; max-width: 1120px; }
.ba-hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.ba-hero__lead {
  margin: 0;
  max-width: 470px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ba-on-dark-soft);
}
.ba-hero__actions { gap: 14px; }

/* -----------------------------------------------------------
   Breadcrumbs — used at the top of every inner-page hero.
   Mono 12px per design §3, parent link muted, current amber.
   ----------------------------------------------------------- */
.ba-crumbs {
  font-family: var(--ba-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ba-on-dark-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.ba-crumbs a {
  color: var(--ba-on-dark-soft);
  text-decoration: none;
  transition: color .2s;
}
.ba-crumbs a:hover { color: #fff; }
.ba-crumbs span[aria-hidden] { opacity: .55; }
.ba-crumbs__current { color: var(--ba-amber); }

/* ===========================================================
   Home-page grid corrections — measured off
   "Business aid Homepage (standalone).html" (2026-09-09).
   base.css shipped flexbox approximations; the comp uses fixed
   CSS Grid tracks. These overrides bring them in line.
   =========================================================== */

/* --- Section head: title left, 330px note right ----------- */
.ba-sec-head { align-items: flex-end; gap: 36px; margin-bottom: 60px; }
/* The heading block has to yield, or a long h2 takes the whole row and
   drops the note onto its own line under the left column. */
.ba-sec-head > :first-child { flex: 1 1 min(560px, 100%); min-width: 0; }
.ba-sec-head__note { flex: 0 1 330px; }
/* A note nested under its heading rather than sitting beside it needs
   the room: 330px there is a ragged offcut against a 60px h2, and it
   ends up crowding the heading it belongs to. */
.ba-sec-head > * > .ba-sec-head__note { max-width: 660px; margin-top: 20px; }
.ba-sec-head .ba-kicker { font-size: 12px; letter-spacing: .16em; margin-bottom: 18px; }
.ba-sec-head__note { max-width: 330px; font-size: 15.5px; line-height: 1.6; color: var(--ba-slate); }

/* --- Editorial rows: grid, not flex ----------------------- */
.ba-row__inner {
  display: grid;
  grid-template-columns: 70px 1.1fr 1.4fr 44px;
  gap: 24px;
  align-items: center;
  padding: 34px 8px;
}
.ba-row__num   { width: auto; font-size: 13px; color: var(--ba-muted); }
.ba-row__title { font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.03em; }
.ba-row__desc  { max-width: none; font-size: 15.5px; line-height: 1.55; }
.ba-row__arrow { font-size: 22px; justify-self: end; }

@media (max-width: 899px) {
  .ba-row__inner { grid-template-columns: 44px 1fr 32px; gap: 12px 16px; padding: 24px 4px; }
  .ba-row__desc  { grid-column: 2 / -1; }
}

/* --- Stack section: sticky intro + stacked layer cards ---- */
.ba-stack__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}
.ba-stack__intro { position: sticky; top: 130px; }
.ba-stack__cards { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 899px) {
  .ba-stack__grid  { grid-template-columns: 1fr; gap: 44px; }
  .ba-stack__intro { position: static; }
}

/* Brand callout under the stack intro */
.ba-brandnote {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; max-width: 400px;
  background: var(--ba-paper);
  border: 1px solid var(--ba-border);
  border-radius: 14px;
}
.ba-brandnote svg  { flex: none; }
.ba-brandnote span { font-size: 14.5px; line-height: 1.5; color: var(--ba-slate-dark); }

/* Layer card sizing to comp */
.ba-layer { padding: 36px; }
.ba-layer__head h3 { font-weight: 700; font-size: 26px; letter-spacing: -0.03em; }
.ba-layer__num { font-size: 44px; }
.ba-layer__list { display: flex; flex-direction: column; gap: 14px; }
.ba-layer__list a,
.ba-layer__list span.ba-layer__item {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 15.5px; color: var(--ba-slate-dark); text-decoration: none;
}
.ba-layer__list a:hover { color: var(--ba-navy); }
.ba-layer__list .ba-layer__arrow { color: var(--ba-amber); flex: none; }

/* --- Numbers: fixed 4-up on desktop ----------------------- */
.ba-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 899px) { .ba-nums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .ba-nums { grid-template-columns: 1fr; } }
.ba-num { padding-top: 26px; }
.ba-num__value b { font-size: clamp(44px, 5vw, 72px); }
.ba-num__value i { font-size: clamp(24px, 2.4vw, 34px); }
.ba-num__label   { font-size: 15px; line-height: 1.5; }

/* --- Process steps: 1fr 1.3fr, no SLA column -------------- */
.ba-step { padding: 24px 0 24px 46px; }
.ba-step__dot  { top: 32px; }
/* Three tracks, not two: with an SLA as the third child a two-column
   grid wrapped it onto its own row, stranding "SAME DAY" a long way
   under the step it belongs to. */
.ba-step__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px 30px; }
/* Fixed third track: each step is its own grid, so an auto column sized
   to its own SLA left the description edge ragged from row to row. */
.ba-step__grid:has(.ba-step__sla:not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 190px; }
.ba-step__sla { justify-self: end; text-align: right; color: var(--ba-amber); }
.ba-step__sla:empty { display: none; }
@media (max-width: 899px) {
  .ba-step__grid { grid-template-columns: 1fr; gap: 10px; }
  .ba-step__sla { justify-self: start; text-align: left; }
}
.ba-step__label { gap: 14px; }
.ba-step__label h3 { font-weight: 600; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -0.03em; }
.ba-step p { font-size: 15.5px; line-height: 1.6; color: var(--ba-slate); }
@media (max-width: 899px) {
  .ba-step__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* --- Section rhythm to comp (130/120) --------------------- */
.ba-home-section     { padding: 130px 0 120px; }
.ba-home-section--eq { padding: 130px 0; }
.ba-home-section--dk { padding: 120px 0; }
@media (max-width: 899px) {
  .ba-home-section,
  .ba-home-section--eq,
  .ba-home-section--dk { padding: 80px 0; }
}

/* .ba-rows is an <ol> — kill the browser's own markers so only the
   mono .ba-row__num shows (otherwise you get "1. 01", "2. 02", ...). */
.ba-rows,
.ba-rows > li { list-style: none; margin: 0; padding: 0; }

/* ===========================================================
   Layout + list-marker fixes (2026-09-09)
   =========================================================== */

/* .ba-hero__foot inherits .ba-container's `margin:0 auto`. In a column
   flex parent an auto cross-axis margin stops the item stretching, so
   the foot was shrinking to fit-content and floating mid-viewport
   instead of spanning the hero. .ba-hero__inner already sets width:100%;
   the foot needs the same. */
.ba-hero__foot { width: 100%; padding-bottom: 44px; }

/* Every .ba-* list component is a real <ul>/<ol>. Kill the UA markers
   and indent so the design's own numbering / arrows / checks are the
   only glyphs on screen. */
.ba-nav__links,
.ba-menu__list,
.ba-footer__links,
.ba-alist,
.ba-plan__list,
.ba-int-trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Footer legal row used <small>, which base.css's span/a selector
   missed — it was rendering navy on the near-black footer. */
.ba-footer__legal small,
.ba-footer__legal span,
.ba-footer__legal a { font-size: 13px; color: var(--ba-slate-dark); }
.ba-footer__legal a:hover { color: var(--ba-on-dark-soft); }

/* ===========================================================
   Intersection page components (2026-09-09)
   =========================================================== */

/* Hero: copy left, facts panel right. The panel is short next to a
   four-line h1, so it rides the middle of the copy rather than sitting
   against the top edge. */
.ba-int-hero__grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
.ba-int-hero__grid > .ba-phero__trust { align-self: end; }
@media (max-width: 899px) {
  .ba-int-hero__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Facts panel — design §3: rgba white .04 fill, .12 hairline, r18 */
.ba-int-facts {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 26px;
}
.ba-int-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.ba-int-facts__row + .ba-int-facts__row { border-top: 1px solid rgba(255,255,255,.10); }
.ba-int-facts__label { color: var(--ba-on-dark-softer); }
.ba-int-facts__value { font-weight: 600; font-size: 17px; color: #fff; text-align: right; }
.ba-int-facts__value--amber { color: var(--ba-amber); font-size: 26px; }

/* Trust chip strip under the hero */
.ba-int-trust {
  background: var(--ba-mist);
  border-bottom: 1px solid var(--ba-border);
  padding: 22px 0;
}
.ba-int-trust__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.ba-int-trust__item { display: flex; align-items: center; gap: 12px; }
.ba-int-trust__item svg { flex: none; color: var(--ba-amber); }
.ba-int-trust__item strong {
  display: block; font-weight: 600; font-size: 14.5px;
  color: var(--ba-navy); margin-bottom: 2px;
}
.ba-int-trust__item small { display: block; font-size: 13px; color: var(--ba-slate); }

/* Drop-cap lead on the intro article */
.ba-article--dropcap > p:first-of-type::first-letter {
  font-family: var(--ba-font);
  font-size: 4.1em;
  font-weight: 700;
  float: left;
  line-height: .84;
  margin: 6px 12px 0 0;
  color: var(--ba-amber);
}

/* Pricing plan cards */
.ba-plan { position: relative; display: flex; flex-direction: column; }
.ba-plan { overflow: hidden; }
/* In the card, not straddling its edge — half a badge hanging over the
   border read as a rendering fault. */
.ba-plan__badge { position: absolute; top: clamp(22px, 2.6vw, 28px); right: clamp(22px, 2.6vw, 28px); }
.ba-plan--top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ba-amber);
}
.ba-plan__label { padding-right: 130px; }
.ba-plan__label {
  color: var(--ba-slate-dark);
  margin-bottom: 14px;
}
.ba-card--dark .ba-plan__label { color: var(--ba-on-dark-soft); }
.ba-plan__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; }
.ba-plan__price b {
  font-weight: 700; font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.04em; line-height: 1; color: var(--ba-navy);
}
.ba-card--dark .ba-plan__price b { color: #fff; }
.ba-plan__price span { font-size: 14.5px; color: var(--ba-muted); }
.ba-plan__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1; }
.ba-plan__list li {
  display: flex; gap: 11px; align-items: baseline;
  font-size: 15px; line-height: 1.5; color: var(--ba-slate-dark);
}
.ba-card--dark .ba-plan__list li { color: var(--ba-on-dark-soft); }
.ba-plan__list li > span:first-child { color: var(--ba-amber); flex: none; }

/* Tech tag cloud */
.ba-int-tech { display: flex; flex-wrap: wrap; gap: 10px; }

/* Callout body inherits article-ish sizing */
.ba-callout__body p { margin: 0 0 .7em; font-size: 15px; line-height: 1.6; }
.ba-callout__body p:last-child { margin-bottom: 0; }

/* ===========================================================
   Mobile + hero fixes (2026-09-09)
   =========================================================== */

/* .ba-hero__inner's shorthand padding (150px 0 60px) wiped the horizontal
   gutter it inherits from .ba-container, so on phones the badge, h1 and
   lead sat flush against the left edge. Restore the gutter. */
.ba-hero__inner { padding: clamp(120px, 12vw, 152px) var(--ba-gutter) 56px; }
.ba-hero__foot  { padding-left: var(--ba-gutter); padding-right: var(--ba-gutter); }

/* Hero CTAs sit under the lead, left-aligned, not pushed to the far right. */
.ba-hero__sub { flex-direction: column; align-items: flex-start; gap: 32px; }

/* Editorial rows on phones: number + title + arrow on one line,
   description underneath spanning the text columns. */
@media (max-width: 899px) {
  .ba-row__inner {
    grid-template-columns: 44px 1fr 32px;
    grid-template-areas:
      "num title arrow"
      ".   desc  desc";
    gap: 10px 16px;
    padding: 24px 4px;
    align-items: baseline;
  }
  .ba-row__num   { grid-area: num; }
  .ba-row__title { grid-area: title; }
  .ba-row__desc  { grid-area: desc; }
  .ba-row__arrow { grid-area: arrow; align-self: center; }
}

/* Post / archive helpers */
.ba-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ba-placeholder {
  height: 100%; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ba-navy-2); color: rgba(255,255,255,.55);
}
.ba-pagination { margin-top: 48px; display: flex; justify-content: center; }
.ba-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ba-pagination .page-numbers {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--ba-border-2); border-radius: var(--ba-r-pill);
  font-size: 14.5px; font-weight: 600; color: var(--ba-navy); text-decoration: none;
}
.ba-pagination .page-numbers.current { background: var(--ba-navy); border-color: var(--ba-navy); color: #fff; }
.ba-empty { text-align: center; padding: 64px 0; display: flex; flex-direction: column; gap: 24px; align-items: center; }

/* Numbers: the amber suffix <i> inherited the body line-height (1.6), so
   rows with a suffix (4h, 30d) were taller than rows without (3, 0) and
   their labels sat ~5px lower. Lock the value row height. */
.ba-num__value { min-height: clamp(44px, 5vw, 72px); }
.ba-num__value i { line-height: 1; }

/* ===========================================================
   Contact section — design §8 (2026-09-09)
   =========================================================== */
.ba-contact { position: relative; background: var(--ba-navy-deep); overflow: hidden; padding: 120px 0; }
.ba-contact__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 82% 8%, rgba(246,162,30,.18), rgba(246,162,30,0) 60%);
}
.ba-contact__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 70px; align-items: start;
}
.ba-contact__title { color: #fff; font-size: clamp(34px, 4.6vw, 62px); line-height: .98; margin: 0 0 22px; }
.ba-contact__lead  { margin: 0 0 40px; max-width: 400px; font-size: 16.5px; line-height: 1.6; color: var(--ba-on-dark-soft); }
.ba-contact .ba-kicker { font-size: 12px; letter-spacing: .16em; margin-bottom: 18px; }
.ba-terminal__tail { color: var(--ba-on-dark-soft); }
.ba-chipgroup { display: flex; gap: 9px; flex-wrap: wrap; }
.ba-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ba-form__alert { margin: 0 0 18px; }
.ba-form__alert--error { border-left-color: var(--ba-err); }
.ba-form .ba-btn { padding: 16px 30px; }
@media (max-width: 899px) {
  .ba-contact { padding: 80px 0; }
  .ba-contact__grid { grid-template-columns: 1fr; gap: 44px; }
}

/* Bare <h3> inside layer cards / timeline steps picked up the UA's 1em
   margins, opening a big gap above "Servers & panels" and pushing the
   list down. The design uses flush headings. */
.ba-layer__head h3,
.ba-step__label h3 { margin: 0; }
.ba-layer__head { margin-bottom: 26px; }

/* Editorial rows: the number and the arrow need real room inside the
   navy sweep, not the comp's 8px. Wider side padding plus a roomier
   number column and a bigger gap before the arrow. */
.ba-row__inner {
  padding: 34px 48px;
  grid-template-columns: 92px 1.1fr 1.4fr 64px;
  gap: 32px;
}
@media (max-width: 899px) {
  .ba-row__inner { padding: 24px 24px; grid-template-columns: 52px 1fr 40px; gap: 10px 16px; }
}

/* Burger: base.css sets display:flex without a direction, so the three
   bars laid out in a row and read as a single dash. Stack them. */
.ba-burger { flex-direction: column; gap: 5px; }
.ba-burger span + span { margin-top: 0; }

/* The list-marker reset above zeroed padding on .ba-menu__list, which
   also killed the overlay's horizontal gutter — links sat flush against
   the screen edge. Restore it (and keep the vertical rhythm). */
.ba-menu__list { padding: 0 var(--ba-gutter); }
.ba-menu__head { padding: 16px var(--ba-gutter); }

/* With 8 items the overlay gets tight on short screens: let the list
   scroll instead of pushing the CTA off-screen. */
.ba-menu__list { overflow-y: auto; }
@media (max-height: 720px) {
  .ba-menu__list a { font-size: clamp(24px, 6vw, 34px); padding: 7px 0; }
}

/* ===========================================================
   Mobile rules from the design's own spec sheet (2026-09-09):
   gutter 20, single column <640, rhythm 110→70, display →46,
   H2 →32, buttons full-width, marquee 22s, mesh ~45%.
   =========================================================== */
@media (max-width: 899px) {
  /* Section rhythm: the legacy home wrappers only. .ba-section is left to
     its own clamp — this block spans 375 to 899, and pinning it flat gave
     a 768 tablet the phone's rhythm at double the content width. At 375
     the token already computes to exactly 70, so the override bought
     nothing there either. */
  .ba-home-section,
  .ba-home-section--eq,
  .ba-home-section--dk { padding: 70px 0; }

  /* The scroll rail is a desktop affordance — on a touch screen it
     wrapped onto its own line under the stat pairs and read as a stray
     orphan. The mobile frames don't show it. */
  .ba-scrollhint { display: none; }

  /* Stat pairs: hairline above, tighter gap, two-up before wrapping. */
  .ba-hero__foot > div:first-child {
    gap: 24px 32px !important;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 22px;
    width: 100%;
  }

  /* Marquee slows to 22s per loop. */
  .ba-marquee__track { animation-duration: 22s; }
}

@media (max-width: 479px) {
  .ba-hero__foot > div:first-child { gap: 20px 28px !important; }
}

/* .ba-nav carried its own horizontal gutter while .ba-nav__inner also
   has .ba-container (which pads by the same gutter) — the brand and CTA
   ended up inset by 2× the gutter and no longer lined up with the page
   content below. Only the inner container pads now. */
.ba-nav { padding-left: 0; padding-right: 0; }

/* Mobile overlay: 46px links × 8 WP menu items overflowed the column and
   the amber CTA drew on top of the last one. Smaller type, and
   min-height:0 so the flex child can actually shrink and scroll instead
   of spilling past its box. */
.ba-menu__list {
  min-height: 0;
  gap: 2px;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
.ba-menu__list a { font-size: clamp(22px, 5.5vw, 32px); padding: 8px 0; }
@media (max-height: 720px) {
  .ba-menu__list a { font-size: clamp(20px, 5vw, 26px); padding: 6px 0; }
}

/* ===========================================================
   Slide stage — hero → "01 — What breaks" as an instant screen
   change (desktop only). main.js sets --ba-p (0 → 1) from scroll and
   sizes the stage. Hero pins and exits left; panel B (marquee + 01)
   enters from the right and lands in its natural flow position, after
   which the page scrolls vertically as usual.
   =========================================================== */
.ba-slidestage { position: relative; --ba-p: 0; }
.ba-slidestage__mark { display: none; }
#work.ba-reveal,
#work.ba-reveal.is-in,
#setup.ba-reveal,
#setup.ba-reveal.is-in { opacity: 1; transition: none; }
/* One anchor offset for the whole site, from the token. scroll-padding-top
   on the scroll container and scroll-margin-top on the target ADD, and the
   two were set independently — a hardcoded 90 in the legacy sheet plus 72
   on the target gave #pricing a 232px landing while #contact got 90. */
html { scroll-padding-top: calc(var(--ba-nav-h) + 16px); }

@media (prefers-reduced-motion: no-preference) {
  .ba-slidestage.is-armed { overflow: clip; }
  .ba-slidestage.is-armed .ba-slidestage__a {
    position: sticky; top: 0; z-index: 2;
    height: 100vh; height: 100svh; overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateX(calc(var(--ba-p) * -100%));
    will-change: transform;
  }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero { flex: 1; min-height: 0; }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-marquee { flex: none; }
  .ba-slidestage.is-armed .ba-slidestage__b {
    position: absolute; left: 0; top: 100svh; width: 100%; z-index: 1;
    background: var(--ba-paper);
    transform: translate(calc((1 - var(--ba-p)) * 100%), calc((1 - var(--ba-p)) * -100svh));
    will-change: transform;
  }
  /* Nav swap marker: sits at the top of the stage, 55vh tall, so the
     nav flips to light once the hero is more than half-way out. */
  .ba-slidestage.is-armed .ba-slidestage__mark {
    display: block; position: absolute; top: 0; left: 0;
    width: 1px; height: 55svh; pointer-events: none;
  }
}
html { overflow-x: clip; }

/* ===========================================================
   Nav holds back until "02 — The stack" is about to arrive:
   the first two screens (hero and "01 — What breaks") run
   chrome-free, then the bar drops in just before the stack.
   =========================================================== */
.ba-nav {
  transition: background-color var(--ba-t-theme) var(--ba-ease),
              box-shadow var(--ba-t-theme) var(--ba-ease),
              transform var(--ba-t-theme) var(--ba-ease);
}
.ba-nav.is-stowed { transform: translateY(-100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ba-nav.is-stowed { transition: none; }
}

/* ===========================================================
   "The stack" pins and its cards run right → left as one track,
   the same scroll-linked logic as the second slide. JS adds
   .is-pinned and sizes the section; without it the block is a
   plain vertical list.
   =========================================================== */
.ba-stackpin { padding: 0; }
.ba-stackpin__vp { padding: var(--ba-section) 0; }

/* Slide counter: hidden until the block is pinned. */
.ba-stack__count { display: none; align-items: center; gap: 10px; margin-top: 28px; }
.ba-stack__count b { font-family: var(--ba-font-mono); font-size: 13px; color: var(--ba-navy); font-weight: 500; }
.ba-stack__count i { font-style: normal; font-family: var(--ba-font-mono); font-size: 13px; color: var(--ba-muted); }
.ba-stack__count span {
  flex: 1; max-width: 120px; height: 2px; background: var(--ba-border);
  position: relative; overflow: hidden; border-radius: 2px;
}
.ba-stack__count span::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--ba-slidep, 0) * 100%);
  background: var(--ba-amber); transition: width .25s var(--ba-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .ba-stackpin.is-pinned .ba-stackpin__vp {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; align-items: center;
    padding: 0;
    overflow: hidden;
  }
  .ba-stackpin.is-pinned .ba-stack__grid { width: 100%; align-items: center; }
  /* The intro no longer needs its own sticky — the whole block is pinned. */
  .ba-stackpin.is-pinned .ba-stack__intro { position: static; }
  .ba-stackpin.is-pinned .ba-stack__cards { overflow: hidden; }
  .ba-stackpin.is-pinned .ba-stack__track {
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0;
    transform: translateX(calc(var(--ba-sx, 0px) * -1));
    will-change: transform;
    /* The driver moves a whole slide at a time, so the transition carries
       the movement — without it the change would read as a jump cut. */
    transition: transform .45s var(--ba-ease);
  }
  /* One card per screen — each layer is its own slide, never a strip of
     half-visible cards. */
  .ba-stackpin.is-pinned .ba-stack__track > * { flex: 0 0 100%; }

  /* Slide counter under the intro copy. */
  .ba-stackpin.is-pinned .ba-stack__count { display: flex; }
}

/* ===========================================================
   Timeline steps read as "you are here" while scrolling: the
   whole row lifts, not just the dot. effects.js toggles
   .is-active continuously as each step passes the middle.
   =========================================================== */
.ba-step { transition: opacity .4s var(--ba-ease); opacity: .45; }
.ba-step.is-active { opacity: 1; }
.ba-step__label span,
.ba-step h3,
.ba-step p { transition: color .4s var(--ba-ease); }
.ba-step h3 { color: var(--ba-slate); }
.ba-step.is-active h3 { color: var(--ba-navy); }
.ba-step.is-active p  { color: var(--ba-slate-dark); }
.ba-step.is-active .ba-step__label span { color: var(--ba-amber); }
@media (prefers-reduced-motion: reduce) {
  .ba-step { opacity: 1; }
}

/* ===========================================================
   Pinned screens on phones: the panels are locked to one
   viewport, so the hero and the stack intro have to fit inside
   it. Tighter rhythm, no scroll rail, brand note stood down.
   =========================================================== */
@media (max-width: 899px) {
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__inner { padding: 96px var(--ba-gutter) 20px; }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__sub { gap: 20px; }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__title { margin-bottom: 20px; }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__foot { padding-bottom: 18px; }

  .ba-stackpin.is-pinned .ba-stack__grid { gap: 24px; }
  .ba-stackpin.is-pinned .ba-brandnote { display: none; }
  .ba-stackpin.is-pinned .ba-stack__intro .ba-body { margin-bottom: 16px; }
  .ba-stackpin.is-pinned .ba-stack__count { margin-top: 16px; }
  .ba-stackpin.is-pinned .ba-layer { padding: 24px; }
}

/* Short viewports of any width — 13" laptops land here too. The pinned
   screens must fit one viewport, so trim the rhythm and put the hero
   buttons side by side. */
@media (max-height: 820px) {
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__inner { padding: 72px var(--ba-gutter) 12px; }
  /* Scale against the viewport height rather than snapping to a phone
     size — a 1468x758 laptop lands in this block too, and a 40px cap
     there left the hero looking like a footnote. */
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__title {
    margin-bottom: 12px;
    font-size: min(clamp(34px, 5.7vw, 90px), 9.4vh);
  }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__lead {
    font-size: min(clamp(15px, 1.25vw, 19px), 2.1vh);
    line-height: 1.5;
  }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__foot .ba-stat__value {
    font-size: min(clamp(17px, 1.45vw, 21px), 2.6vh);
  }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__foot .ba-stat__label {
    font-size: min(11px, 1.4vh);
  }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__sub { gap: 14px; }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__actions { flex-direction: row; gap: 10px; }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__actions .ba-btn {
    padding: min(17px, 2vh) 26px; font-size: min(16px, 2vh);
  }
  @media (max-width: 899px) {
    .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__actions .ba-btn { width: auto; flex: 1; padding: 14px 16px; }
  }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__foot { padding-bottom: 10px; }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__foot > div:first-child { gap: 14px 22px !important; padding-top: 14px; }

  .ba-stackpin.is-pinned .ba-stack__intro .ba-h2 { font-size: clamp(26px, 7vw, 32px); margin-bottom: 12px; }
  .ba-stackpin.is-pinned .ba-stack__intro .ba-body { font-size: 14.5px; line-height: 1.5; margin-bottom: 12px; }
  .ba-stackpin.is-pinned .ba-stack__count { margin-top: 12px; }
  .ba-stackpin.is-pinned .ba-layer { padding: 18px; }
  .ba-stackpin.is-pinned .ba-layer__head { margin-bottom: 14px; }
  .ba-stackpin.is-pinned .ba-layer__head h3 { font-size: 22px; }
  .ba-stackpin.is-pinned .ba-layer__num { font-size: 32px; }
  .ba-stackpin.is-pinned .ba-layer__list { gap: 10px; }
  .ba-stackpin.is-pinned .ba-layer__list a { font-size: 14.5px; }
}

/* Icon tile used on target setup cards. */
.ba-icontile {
  width: 44px; height: 44px; border-radius: var(--ba-r-md);
  background: var(--ba-accent-soft, rgba(246,162,30,.12));
  color: var(--ba-amber);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

/* ===========================================================
   Trust row lives inside the dark page hero now, so it lands on
   the first screen instead of as a separate light strip below.
   =========================================================== */
.ba-phero__trust {
  list-style: none;
  margin: 44px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 28px;
}
.ba-phero__trust li { display: flex; align-items: center; gap: 12px; }
.ba-phero__trust svg { flex: none; color: var(--ba-amber); }
.ba-phero__trust strong {
  display: block; font-weight: 600; font-size: 14.5px;
  color: #fff; margin-bottom: 2px;
}
.ba-phero__trust small { display: block; font-size: 13px; line-height: 1.4; color: var(--ba-on-dark-soft); }

/* On the intersection hero the row spans under both columns. */
.ba-int-hero__grid > .ba-phero__trust { grid-column: 1 / -1; }

@media (max-height: 820px) {
  .ba-phero__trust { margin-top: 30px; padding-top: 18px; gap: 16px 24px; }
}

/* ===========================================================
   Slide block — the screen that arrives from the right on the
   target pages ("What we handle on ..."). Two columns: a
   standing intro on the left, a numbered ladder on the right.
   Sits on mist, fills the viewport while the stage is armed.
   =========================================================== */
.ba-slidestage__b--mist { background: var(--ba-mist) !important; }

.ba-slideblock {
  background: var(--ba-mist);
  padding: clamp(64px, 8vw, 104px) 0;
  display: flex; align-items: center;
}
.ba-slidestage.is-armed .ba-slideblock { min-height: 100vh; min-height: 100svh; }

.ba-slideblock__grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}
.ba-slideblock__h { margin: 14px 0 20px; }
.ba-slideblock__lead {
  margin: 0; max-width: 38ch;
  font-size: 16px; line-height: 1.6; color: var(--ba-slate);
}
.ba-slideblock__count {
  display: flex; align-items: baseline; gap: 10px;
  margin: 30px 0 0; padding-top: 22px;
  border-top: 1px solid var(--ba-border);
}
.ba-slideblock__count b {
  font-family: var(--ba-font-mono); font-weight: 500;
  font-size: 30px; line-height: 1; color: var(--ba-navy);
}
.ba-slideblock__count i {
  font-style: normal; font-family: var(--ba-font-mono);
  font-size: var(--ba-fs-meta); letter-spacing: var(--ba-ls-meta);
  text-transform: uppercase; color: var(--ba-muted);
}

/* ---- numbered ladder ---- */
.ba-ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ba-border); }
.ba-ladder__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 74px) minmax(0, 1fr) 24px;
  gap: clamp(12px, 1.8vw, 24px);
  align-items: start;
  padding: clamp(16px, 2vw, 24px) clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--ba-border);
  transition: background-color .35s var(--ba-ease);
}
.ba-ladder__item::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--ba-amber);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ba-ease);
}
.ba-ladder__item:hover { background: var(--ba-paper); }
.ba-ladder__item:hover::before { transform: scaleY(1); }

.ba-ladder__num {
  font-family: var(--ba-font-mono); font-weight: 500; line-height: 1;
  font-size: clamp(24px, 2.6vw, 36px);
  color: var(--ba-border-2);
  transition: color .35s var(--ba-ease), -webkit-text-stroke-color .35s var(--ba-ease);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .ba-ladder__num { color: transparent; -webkit-text-stroke: 1px var(--ba-border-2); }
  .ba-ladder__item:hover .ba-ladder__num { color: var(--ba-amber); -webkit-text-stroke-color: transparent; }
}
.ba-ladder__title {
  margin: 0; font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: var(--ba-ls-h4); color: var(--ba-navy);
}
.ba-ladder__text {
  margin: 6px 0 0; max-width: 52ch;
  font-size: 15px; line-height: 1.55; color: var(--ba-slate);
}
.ba-ladder__icon {
  display: flex; align-items: center; justify-content: flex-end;
  color: var(--ba-muted); transition: color .35s var(--ba-ease);
}
.ba-ladder__icon svg { width: 20px; height: 20px; }
.ba-ladder__item:hover .ba-ladder__icon { color: var(--ba-amber); }

@media (max-width: 899px) {
  .ba-slideblock__grid { grid-template-columns: 1fr; gap: 30px; }
  .ba-slideblock__count { margin-top: 22px; padding-top: 16px; }
}
/* Armed, the block has one screen to work with, so its rhythm keys
   off the viewport height instead of a fixed scale. */
.ba-slidestage.is-armed .ba-slideblock { padding: clamp(34px, 5vh, 72px) 0; }
.ba-slidestage.is-armed .ba-ladder__item { padding-top: clamp(10px, 1.7vh, 22px); padding-bottom: clamp(10px, 1.7vh, 22px); }
.ba-slidestage.is-armed .ba-slideblock__h { margin: clamp(8px, 1.4vh, 14px) 0 clamp(10px, 1.8vh, 20px); }
.ba-slidestage.is-armed .ba-slideblock__count { margin-top: clamp(16px, 2.6vh, 30px); padding-top: clamp(12px, 2vh, 22px); }
@media (max-height: 820px) {
  .ba-slidestage.is-armed .ba-slideblock__h { font-size: clamp(28px, 3.4vw, 44px); }
  .ba-slidestage.is-armed .ba-slideblock__lead { font-size: 15px; }
  .ba-slidestage.is-armed .ba-ladder__title { font-size: 18px; }
  .ba-slidestage.is-armed .ba-ladder__text { font-size: 14px; line-height: 1.5; }
}

/* Panel A on the target pages is the dark page hero. */
@media (prefers-reduced-motion: no-preference) {
  .ba-slidestage.is-armed .ba-slidestage__a .ba-phero {
    flex: 1; min-height: 0;
    display: flex; align-items: center;
  }
  .ba-slidestage.is-armed .ba-slidestage__a .ba-phero__inner { width: 100%; }
}
@media (max-height: 820px) {
  .ba-slidestage.is-armed .ba-slidestage__a .ba-phero__inner { padding-top: 90px; padding-bottom: 30px; }
}

/* ===========================================================
   Offer tiles — the cross-link grid that sends people between
   services, platforms and the intersections. Used by "What we
   do here" on the target pages, "…for every platform" on the
   service pages and the services overview.
   =========================================================== */
.ba-offers {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 1.8vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ba-offers > li { display: flex; }

a.ba-offer, a.ba-offer:visited, a.ba-offer:hover {
  color: var(--ba-navy); text-decoration: none;
}
.ba-offer {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; width: 100%;
  min-height: 280px;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--ba-paper);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-r-xl);
  transition: transform var(--ba-t-hover) var(--ba-ease),
              border-color var(--ba-t-hover) var(--ba-ease),
              box-shadow var(--ba-t-hover) var(--ba-ease);
}
/* Amber rule that draws itself across the top edge. */
.ba-offer::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--ba-amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ba-t-sweep) var(--ba-ease);
}
.ba-offer:hover { transform: translateY(-6px); border-color: var(--ba-border-2); box-shadow: var(--ba-sh-card); }
.ba-offer:hover::before { transform: scaleX(1); }
.ba-offer:focus-visible { outline: 2px solid var(--ba-amber); outline-offset: 3px; }

.ba-offer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(20px, 2.4vw, 30px);
}
.ba-offer__ghost {
  font-family: var(--ba-font-mono); font-weight: 500; line-height: .8;
  font-size: clamp(40px, 4.4vw, 58px);
  color: var(--ba-border-2);
  transition: color var(--ba-t-hover) var(--ba-ease), -webkit-text-stroke-color var(--ba-t-hover) var(--ba-ease);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .ba-offer__ghost { color: transparent; -webkit-text-stroke: 1px var(--ba-border-2); }
  .ba-offer:hover .ba-offer__ghost { color: var(--ba-amber); -webkit-text-stroke-color: transparent; }
}
.ba-offer__title {
  margin: 0 0 12px; font-weight: 700;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.15; letter-spacing: var(--ba-ls-h3);
  color: var(--ba-navy);
}
.ba-offer__text {
  margin: 0; font-size: 15.5px; line-height: var(--ba-lh-body);
  color: var(--ba-slate); max-width: 42ch;
}
.ba-offer__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: auto; padding-top: clamp(22px, 2.6vw, 30px);
}
.ba-offer__cta {
  font-family: var(--ba-font-mono); font-size: var(--ba-fs-meta);
  letter-spacing: var(--ba-ls-meta); text-transform: uppercase;
  color: var(--ba-muted);
  transition: color var(--ba-t-hover) var(--ba-ease);
}
.ba-offer:hover .ba-offer__cta { color: var(--ba-navy); }
.ba-offer__arrow {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ba-border-2); color: var(--ba-navy);
  font-size: 15px; line-height: 1;
  transition: background-color var(--ba-t-hover) var(--ba-ease),
              border-color var(--ba-t-hover) var(--ba-ease),
              color var(--ba-t-hover) var(--ba-ease),
              transform var(--ba-t-hover) var(--ba-ease);
}
.ba-offer:hover .ba-offer__arrow {
  background: var(--ba-amber); border-color: var(--ba-amber);
  color: var(--ba-navy); transform: translateX(4px);
}

/* Inverted tile — one per grid, to break the white run. */
a.ba-offer--dark, a.ba-offer--dark:visited, a.ba-offer--dark:hover { color: var(--ba-on-dark); }
.ba-offer--dark { background: var(--ba-navy); border-color: var(--ba-navy); }
.ba-offer--dark .ba-offer__title { color: #fff; }
.ba-offer--dark .ba-offer__text { color: var(--ba-on-dark-soft); }
.ba-offer--dark .ba-offer__ghost { color: var(--ba-on-dark-softer); }
@supports (-webkit-text-stroke: 1px currentColor) {
  .ba-offer--dark .ba-offer__ghost { color: transparent; -webkit-text-stroke-color: var(--ba-on-dark-softer); }
}
.ba-offer--dark .ba-offer__arrow { border-color: var(--ba-on-dark-line); color: #fff; }
.ba-offer--dark:hover { border-color: var(--ba-navy); }
.ba-offer--dark:hover .ba-offer__cta { color: #fff; }

@media (max-width: 639px) {
  .ba-offers { grid-template-columns: 1fr; }
  .ba-offer { min-height: 0; }
}

/* ===========================================================
   Prose sections — the standing-text blocks ("Where this fits",
   "When to call us", "On retainers", "Scope"). One skeleton, a
   rail on the left and the copy on the right, in three moods:
   statement, dark signal, and link index.
   =========================================================== */
.ba-prose__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(26px, 4.5vw, 76px);
  align-items: start;
}
.ba-prose__rail { position: sticky; top: calc(var(--ba-nav-h) + 26px); }
.ba-prose__num {
  display: block; margin-bottom: 14px;
  font-family: var(--ba-font-mono); font-weight: 500; line-height: 1;
  font-size: clamp(30px, 3.2vw, 42px);
  color: var(--ba-border-2);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .ba-prose__num { color: transparent; -webkit-text-stroke: 1px var(--ba-border-2); }
}
.ba-prose__h {
  margin: 14px 0 0;
  font-size: clamp(27px, 3vw, 42px); line-height: 1.05;
  letter-spacing: var(--ba-ls-h2);
}
.ba-prose__body > :first-child { margin-top: 0; }
.ba-prose__body > :last-child { margin-bottom: 0; }
.ba-prose__body p {
  margin: 0 0 22px;
  font-size: 17.5px; line-height: 1.7; color: var(--ba-slate-dark);
}
.ba-prose__body ul, .ba-prose__body ol { margin: 0 0 22px; padding-left: 20px; }
.ba-prose__body li { margin-bottom: 8px; font-size: 17px; line-height: 1.65; color: var(--ba-slate-dark); }

/* Links read as a deliberate index: an amber underline that fills
   the whole line on hover. */
.ba-prose__body a {
  color: var(--ba-navy); font-weight: 500; text-decoration: none;
  background-image: linear-gradient(var(--ba-amber), var(--ba-amber));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% 2px;
  padding: 1px 2px;
  transition: background-size var(--ba-t-hover) var(--ba-ease), color var(--ba-t-hover) var(--ba-ease);
}
.ba-prose__body a:hover { background-size: 100% 100%; color: var(--ba-navy); }

/* ---- statement: a position we hold, set on a mist panel ---- */
.ba-prose--statement .ba-prose__body {
  position: relative;
  padding: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) clamp(30px, 3.4vw, 46px);
  background: var(--ba-mist);
  border-radius: var(--ba-r-xl);
}
.ba-prose--statement .ba-prose__body::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px; background: var(--ba-amber);
}
.ba-prose--statement .ba-prose__body p { font-size: 18px; color: var(--ba-navy); }

/* ---- signal: dark band, for "when to call us" ---- */
.ba-prose--dark { background: var(--ba-navy-deep); }
.ba-prose--dark .ba-prose__h { color: #fff; }
.ba-prose--dark .ba-kicker { color: var(--ba-amber); }
.ba-prose--dark .ba-prose__body p,
.ba-prose--dark .ba-prose__body li { color: var(--ba-on-dark-bright); }
.ba-prose--dark .ba-prose__body a { color: #fff; }
.ba-prose--dark .ba-prose__body a:hover { color: var(--ba-navy); }
.ba-prose__signal {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  font-family: var(--ba-font-mono); font-size: var(--ba-fs-meta);
  letter-spacing: var(--ba-ls-meta); text-transform: uppercase;
  color: var(--ba-on-dark-soft);
}
.ba-prose__signal i {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ba-amber);
}
.ba-prose__signal i::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--ba-amber); opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .ba-prose__signal i::after { animation: ba-ping 2.4s var(--ba-ease) infinite; }
}
@keyframes ba-ping {
  0%   { transform: scale(.7); opacity: .7; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---- index: link-heavy cross-references, one rule per para ---- */
.ba-prose--index .ba-prose__body p { padding-bottom: 22px; border-bottom: 1px solid var(--ba-border); }
.ba-prose--index .ba-prose__body p:last-child { padding-bottom: 0; border-bottom: 0; }

/* ---- stack: two or more statements in a row. Each heading rail pins
   near the top of the screen while its own body scrolls past, then
   releases and the next one takes the slot. ---- */
/* The row is tall enough to pin through, but the panel stays the size
   of its copy and rides the middle of it — a full-height mist block
   behind four lines of text reads as a hole in the page. */
.ba-prose--stack .ba-prose__row {
  min-height: clamp(260px, 44vh, 400px);
  align-items: center;
}
.ba-prose--stack .ba-prose__rail { align-self: start; top: calc(var(--ba-nav-h) + 44px); }
.ba-prose--stack .ba-prose__body p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }
.ba-prose--stack .ba-prose__row + .ba-prose__row { margin-top: clamp(36px, 5vw, 72px); }

@media (max-width: 899px) {
  .ba-prose__grid { grid-template-columns: 1fr; gap: 26px; }
  .ba-prose__rail { position: static; }
  .ba-prose__body p { font-size: 16.5px; }
  .ba-prose--stack .ba-prose__row { min-height: 0; align-items: start; }
  .ba-prose--stack .ba-prose__row + .ba-prose__row { margin-top: 44px; }
}

/* ===========================================================
   Lede — the opening narrative on the target, intersection and
   service pages. The page's own subject is set huge and hollow
   in the left column, the copy runs beside it. The word holds
   while the copy scrolls past.
   =========================================================== */
.ba-lede__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.ba-lede__mark { position: sticky; top: calc(var(--ba-nav-h) + 46px); }
.ba-lede__rule {
  display: block; width: 56px; height: 3px; border-radius: 3px;
  background: var(--ba-amber); margin-bottom: clamp(18px, 2vw, 26px);
}
.ba-lede__word {
  display: block;
  font-weight: 700; line-height: .86;
  font-size: clamp(46px, 5.6vw, 88px);
  letter-spacing: -0.045em;
  color: var(--ba-amber);
  overflow-wrap: anywhere;
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .ba-lede__word { color: transparent; -webkit-text-stroke: 1.5px var(--ba-amber); }
}

.ba-lede__body { max-width: 62ch; }
.ba-lede__body > :first-child { margin-top: 0; }
.ba-lede__body p:last-child { margin-bottom: 0; }
.ba-lede__body p {
  margin: 0 0 22px;
  font-size: 17px; line-height: 1.75; color: var(--ba-slate-dark);
}
/* The opening paragraph carries the argument, so it gets the weight. */
.ba-lede__body > p:first-child {
  margin-bottom: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  font-size: clamp(19px, 1.75vw, 23px);
  line-height: 1.5; letter-spacing: -0.015em;
  color: var(--ba-navy);
}
.ba-lede__body ul, .ba-lede__body ol { margin: 0 0 22px; padding-left: 20px; }
.ba-lede__body li { margin-bottom: 7px; font-size: 17px; line-height: 1.7; color: var(--ba-slate-dark); }
.ba-lede__body a {
  color: var(--ba-navy); font-weight: 500; text-decoration: none;
  background-image: linear-gradient(var(--ba-amber), var(--ba-amber));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% 2px; padding: 1px 2px;
  transition: background-size var(--ba-t-hover) var(--ba-ease);
}
.ba-lede__body a:hover { background-size: 100% 100%; }

@media (max-width: 899px) {
  .ba-lede__grid { grid-template-columns: 1fr; gap: 26px; }
  .ba-lede__mark { position: static; }
  .ba-lede__word { font-size: clamp(38px, 11vw, 60px); }
  .ba-lede__body { max-width: none; }
}

/* Scope list across the full container: two columns of hairline rows,
   so a nine-item list stops running down a narrow measure. Multicol
   rather than grid — grid equalises row heights across the columns and
   leaves ragged gaps between short and wrapped items. */
.ba-alist--split {
  display: block;
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--ba-border);
}
.ba-alist--split > * {
  break-inside: avoid;
  align-items: flex-start;
  padding: 15px 2px;
  font-size: 16px; line-height: 1.55;
  border-bottom: 1px solid var(--ba-border);
}
.ba-alist--split > * > span:first-child { line-height: 1.55; }
@media (max-width: 899px) {
  .ba-alist--split { columns: 1; }
}

/* ===========================================================
   Home hero — scaled up. It is the only screen with nothing
   else competing for attention, so it carries larger type than
   the inner-page heroes: title, lead, buttons and the stat row
   all step up roughly 40%.
   =========================================================== */
.ba-hero__title { font-size: clamp(38px, 5.7vw, 90px); }
.ba-hero__lead {
  max-width: 560px;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.55;
}
.ba-hero__actions .ba-btn { padding: 17px 28px; font-size: 16px; }
.ba-hero__foot .ba-stat__label { font-size: 11px; margin-bottom: 7px; }
.ba-hero__foot .ba-stat__value { font-size: clamp(19px, 1.45vw, 21px); }
.ba-hero__foot > div:first-child { gap: 44px !important; }

/* Phones keep the tighter hero: the height-relative sizes above are for
   short desktops, and at 375px a 17px button label with 20px padding
   wraps "Report an incident" onto two lines. */
@media (max-width: 899px) {
  .ba-hero__title,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__title { font-size: min(clamp(34px, 8.6vw, 44px), 12.5vh); }
  .ba-hero__lead,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__lead { font-size: 16px; }
  .ba-hero__actions .ba-btn,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__actions .ba-btn { padding: 15px 18px; font-size: 15px; }
  .ba-hero__foot .ba-stat__label,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__foot .ba-stat__label { font-size: 10.5px; margin-bottom: 6px; }
  .ba-hero__foot .ba-stat__value,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__foot .ba-stat__value { font-size: 19px; }
  .ba-hero__foot > div:first-child { gap: 24px 32px !important; }
}

/* Ladder rows carrying only a title (the solution bundle contents) sit
   tighter than the ones with a description under them. */
.ba-ladder--tight .ba-ladder__item { padding-top: clamp(11px, 1.4vh, 16px); padding-bottom: clamp(11px, 1.4vh, 16px); }
.ba-ladder--tight .ba-ladder__num { font-size: clamp(19px, 1.9vw, 26px); }
.ba-ladder--tight .ba-ladder__title { font-weight: 500; font-size: clamp(15.5px, 1.25vw, 17px); }

/* Badge that is a link — the bundled-service chips. */
a.ba-badge--link, a.ba-badge--link:visited {
  color: var(--ba-slate-dark); text-decoration: none;
  transition: border-color var(--ba-t-hover) var(--ba-ease),
              color var(--ba-t-hover) var(--ba-ease),
              background-color var(--ba-t-hover) var(--ba-ease);
}
a.ba-badge--link:hover { color: var(--ba-navy); border-color: var(--ba-amber); background: rgba(246,162,30,.10); }

/* A rich-text note under a heading is a block, not a 330px column. */
.ba-sec-head .ba-prose__body.ba-sec-head__note { max-width: 760px; margin-top: 20px; flex: 1 1 100%; }
.ba-sec-head .ba-prose__body.ba-sec-head__note p { font-size: 16.5px; }

/* The lede's subject word breaks on spaces, never mid-word. */
.ba-lede__word { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* ===========================================================
   "What we don't do" — the counterpoint list. Dark band, amber
   crosses, the heading struck through, so a list of refusals
   doesn't read like another list of features.
   =========================================================== */
.ba-nots { background: var(--ba-navy-deep); }
.ba-nots .ba-kicker { color: var(--ba-amber); }
.ba-nots__h { color: #fff; }
.ba-nots .ba-sec-head__note { color: var(--ba-on-dark-soft); }
.ba-alist--no { border-top-color: var(--ba-on-dark-line); }
.ba-alist--no > * {
  border-bottom-color: var(--ba-on-dark-line);
  color: var(--ba-on-dark-bright);
}
.ba-alist--no > * > span:first-child {
  color: var(--ba-amber);
  font-size: 18px; line-height: 1.4;
}

/* ===========================================================
   Principles — a numbered set where each item is a short title
   and a sentence ("How we work", "Who it's for"). Two balanced
   columns of hairline rows rather than cards: five of these in
   an auto-fit card grid left an orphan on its own row and
   wrapped every title a word at a time.
   =========================================================== */
.ba-principles {
  list-style: none; margin: 0; padding: 0;
  columns: 2;
  column-gap: clamp(30px, 4vw, 70px);
  border-top: 1px solid var(--ba-border);
}
.ba-principles > li {
  break-inside: avoid;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--ba-border);
}
.ba-principles__num {
  display: block; margin-bottom: 14px;
  font-family: var(--ba-font-mono); font-weight: 500; line-height: 1;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--ba-border-2);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .ba-principles__num { color: transparent; -webkit-text-stroke: 1px var(--ba-border-2); }
}
.ba-principles__title {
  margin: 0 0 8px; font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: var(--ba-ls-h4); color: var(--ba-navy);
}
.ba-principles__text {
  margin: 0; max-width: 46ch;
  font-size: 15.5px; line-height: 1.6; color: var(--ba-slate);
}
@media (max-width: 899px) {
  .ba-principles { columns: 1; }
}

/* Journal rows: the date column carries a stacked day/year and an
   optional category, so it needs more room than the home page's 92px
   index track. */
.ba-rows--journal .ba-row__inner { grid-template-columns: 124px 1.35fr 1.15fr 56px; padding-top: 26px; padding-bottom: 26px; }
/* A headline, not a section title — the home rows carry six items, the
   journal carries ten per page. */
.ba-rows--journal .ba-row__title { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.28; letter-spacing: -0.02em; }
.ba-rows--journal .ba-row__desc { font-size: 14.5px; }
.ba-rows--journal .ba-row__num {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--ba-font-mono); text-transform: uppercase;
}
.ba-rows--journal .ba-row__num b { font-weight: 500; font-size: 13px; color: var(--ba-navy); transition: color .4s; }
.ba-rows--journal .ba-row__num i { font-style: normal; font-size: 12px; color: var(--ba-muted); }
.ba-rows--journal .ba-row__num s {
  margin-top: 6px; text-decoration: none;
  font-size: var(--ba-fs-meta); letter-spacing: var(--ba-ls-meta);
  color: var(--ba-amber);
}
@media (hover: hover) {
  .ba-rows--journal .ba-row:hover .ba-row__num b { color: #fff; }
}
@media (max-width: 899px) {
  .ba-rows--journal .ba-row__inner { grid-template-columns: 1fr; gap: 10px; }
  .ba-rows--journal .ba-row__num { flex-direction: row; align-items: baseline; gap: 8px; }
  .ba-rows--journal .ba-row__num s { margin-top: 0; }
}

/* ===========================================================
   Journal article
   =========================================================== */
.ba-post__byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 30px 0 0; padding-top: 24px;
  border-top: 1px solid var(--ba-on-dark-line);
  font-family: var(--ba-font-mono); font-size: var(--ba-fs-meta);
  letter-spacing: var(--ba-ls-meta); text-transform: uppercase;
  color: var(--ba-on-dark-soft);
}
.ba-post__cat { color: var(--ba-amber); }
/* Featured image as the hero's ground. A real <img> rather than a
   background, so it keeps srcset and can be prioritised. */
/* A cover hero needs the image to read, not a band of empty scrim: the
   crop below the byline shows cropped illustration, not composition. */
.ba-phero--cover { padding-top: clamp(120px, 11vw, 152px); padding-bottom: clamp(56px, 5vw, 72px); }
.ba-phero__cover { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ba-phero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Two scrims: one across, so the copy column stays the darkest part of
   the frame, and one down, so the nav and the section edge both land on
   solid ground. */
.ba-phero__cover::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,20,33,.95) 0%, rgba(11,20,33,.88) 46%, rgba(11,20,33,.52) 100%),
    linear-gradient(180deg, rgba(11,20,33,.80) 0%, rgba(11,20,33,.30) 38%, rgba(11,20,33,.88) 100%);
}
.ba-phero--cover .ba-phero__glow { z-index: 1; }
.ba-phero--cover .ba-phero__inner { z-index: 5; }
@media (max-width: 899px) {
  /* Portrait screens show almost none of the image beside the text, so
     the horizontal scrim is dropped and the vertical one carries it. */
  .ba-phero__cover::after {
    background: linear-gradient(180deg, rgba(11,20,33,.88) 0%, rgba(11,20,33,.78) 45%, rgba(11,20,33,.93) 100%);
  }
}

.ba-post__body h2 { margin: 44px 0 16px; }
.ba-post__body h3 {
  margin: 34px 0 12px; font-weight: 600;
  font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -0.025em; color: var(--ba-navy);
}
.ba-post__body ul, .ba-post__body ol { margin: 0 0 24px; padding-left: 22px; }
.ba-post__body li { margin-bottom: 10px; font-size: 17px; line-height: 1.65; color: var(--ba-slate-dark); }
.ba-post__body blockquote {
  margin: 32px 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--ba-amber);
  font-size: 19px; line-height: 1.6; color: var(--ba-navy);
}
.ba-post__body blockquote p:last-child { margin-bottom: 0; }
.ba-post__body img { max-width: 100%; height: auto; border-radius: var(--ba-r-lg); margin: 28px 0; }
.ba-post__body pre {
  background: var(--ba-navy); border-radius: var(--ba-r-lg); padding: 22px;
  margin: 28px 0; overflow-x: auto;
  font-family: var(--ba-font-mono); font-size: 13.5px; line-height: 1.8; color: var(--ba-on-dark-bright);
}
.ba-post__body :not(pre) > code {
  font-family: var(--ba-font-mono); font-size: .88em;
  background: var(--ba-mist); border: 1px solid var(--ba-border);
  border-radius: 6px; padding: 2px 6px; color: var(--ba-navy);
}
.ba-post__body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15.5px; }
.ba-post__body th, .ba-post__body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ba-border); }
.ba-post__body th { font-weight: 600; color: var(--ba-navy); }
.ba-post__body a {
  color: var(--ba-navy); font-weight: 500; text-decoration: none;
  background-image: linear-gradient(var(--ba-amber), var(--ba-amber));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px;
  padding: 1px 2px;
  transition: background-size var(--ba-t-hover) var(--ba-ease);
}
.ba-post__body a:hover { background-size: 100% 100%; }
.ba-post__tags { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ba-border); }

/* ---- Article layout: sticky contents rail beside the body ---- */
.ba-post__grid {
  display: grid;
  /* The body column is capped, not fluid: left to fill the container it
     ran to 100 characters a line, well past comfortable reading. */
  grid-template-columns: 250px minmax(0, 74ch);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
  justify-content: start;
}
/* The rail must span the article's height, or the sticky element inside
   it has only its own 509px to travel and lets go almost immediately —
   .ba-post__grid aligns to start, so the aside opts back into stretch. */
.ba-post__aside { align-self: stretch; }
.ba-post__asideinner { position: sticky; top: calc(var(--ba-nav-h) + 30px); }
.ba-post__time {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--ba-r-pill);
  background: var(--ba-mist); border: 1px solid var(--ba-border);
  font-family: var(--ba-font-mono); font-size: var(--ba-fs-meta);
  letter-spacing: var(--ba-ls-meta); text-transform: uppercase;
  color: var(--ba-slate-dark);
}
.ba-post__time svg { color: var(--ba-amber); flex: none; }

.ba-toc { margin-top: 28px; }
.ba-toc__label {
  display: block; margin-bottom: 16px;
  font-family: var(--ba-font-mono); font-size: var(--ba-fs-meta);
  letter-spacing: var(--ba-ls-meta); text-transform: uppercase;
  color: var(--ba-muted);
}
.ba-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--ba-border); }
.ba-toc__list a {
  display: block; padding: 8px 0 8px 16px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.45; color: var(--ba-slate);
  text-decoration: none;
  transition: color var(--ba-t-hover) var(--ba-ease), border-color var(--ba-t-hover) var(--ba-ease);
}
.ba-toc__list a:hover { color: var(--ba-navy); }
.ba-toc__list a.is-current { color: var(--ba-navy); font-weight: 500; border-left-color: var(--ba-amber); }

/* Headings clear the sticky nav when the contents list jumps to them. */
.ba-post__body h2 { scroll-margin-top: 0; }

@media (max-width: 1023px) {
  .ba-post__grid { grid-template-columns: 1fr; gap: 26px; }
  .ba-post__asideinner { position: static; }
  .ba-toc { margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--ba-border); }
  .ba-toc__list { columns: 2; column-gap: 30px; border-left: 0; }
  .ba-toc__list a { padding-left: 0; border-left: 0; }
  .ba-toc__list a.is-current { border-left: 0; color: var(--ba-amber); }
}
@media (max-width: 639px) {
  .ba-toc__list { columns: 1; }
}

/* Footer legal row: policy link and developer credit sit together at the
   right edge, so the copyright keeps the left. */
.ba-footer__legalend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; }
.ba-footer__legal a.ba-credit { display: inline-flex; align-items: center; gap: 5px; color: var(--ba-on-dark-softer); }
.ba-footer__legal a.ba-credit b { font-weight: 600; color: var(--ba-slate-dark); transition: color var(--ba-t-hover) var(--ba-ease); }
.ba-footer__legal a.ba-credit:hover b { color: var(--ba-amber); }
@media (max-width: 599px) {
  .ba-footer__legalend { width: 100%; justify-content: space-between; }
}

/* ===========================================================
   Archive filters
   =========================================================== */
.ba-filters { display: flex; flex-direction: column; gap: 18px; }
.ba-filters__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.ba-filters__label {
  flex: none; min-width: 74px;
  font-family: var(--ba-font-mono); font-size: var(--ba-fs-meta);
  letter-spacing: var(--ba-ls-meta); text-transform: uppercase;
  color: var(--ba-muted);
}
a.ba-chip, a.ba-chip:visited { text-decoration: none; color: var(--ba-slate-dark); }
a.ba-chip.is-active, a.ba-chip.is-active:visited { color: #fff; }

/* ===========================================================
   Blank state — what an empty archive actually shows, so it
   gets a real block rather than a centred apology.
   =========================================================== */
.ba-blank {
  max-width: 720px;
  padding: clamp(34px, 4.4vw, 56px);
  background: var(--ba-mist);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-r-2xl);
  position: relative; overflow: hidden;
}
.ba-blank::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ba-amber);
}
.ba-blank__h { margin: 14px 0 18px; font-size: clamp(26px, 3vw, 40px); }
.ba-blank__text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ba-slate-dark); }
.ba-blank__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Node mesh behind a page hero. Same canvas the home hero uses; the
   scrim keeps the copy column readable over the busiest part of it. */
.ba-phero__canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.ba-phero--mesh .ba-phero__glow { z-index: 1; }
.ba-phero--mesh .ba-phero__inner { z-index: 5; }
.ba-phero--mesh::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,20,33,.86) 0%, rgba(11,20,33,.62) 40%, rgba(11,20,33,0) 78%);
}
@media (max-width: 899px) {
  .ba-phero--mesh::after {
    background: linear-gradient(180deg, rgba(11,20,33,.72) 0%, rgba(11,20,33,.52) 50%, rgba(11,20,33,.82) 100%);
  }
}

/* ===========================================================
   Contrast pass. Amber measures 2.08:1 on white and --ba-muted
   2.53:1, and between them they were carrying prices, the CTA
   line on every offer tile and the required-field marker. The
   accent keeps its job on fills, rules and dark grounds; text
   on a light ground moves to the ink variants.
   =========================================================== */
.ba-kicker { color: var(--ba-amber-ink); }
.ba-phero .ba-kicker,
.ba-hero .ba-kicker,
.ba-nots .ba-kicker,
.ba-prose--dark .ba-kicker,
.ba-contact .ba-kicker,
.ba-section--dark .ba-kicker,
.ba-slidestage__a .ba-kicker { color: var(--ba-amber); }

.ba-badge--price { color: var(--ba-amber-ink); background: rgba(154,98,6,.10); }
.ba-card--dark .ba-badge--price,
.ba-offer--dark .ba-badge--price { color: var(--ba-amber); background: rgba(246,162,30,.14); }

.ba-offer__cta,
.ba-form__note,
.ba-plan__price span,
.ba-toc__label,
.ba-slideblock__count i,
.ba-stack__count i,
.ba-filters__label,
.ba-rows--journal .ba-row__num i { color: var(--ba-muted-ink); }
.ba-offer--dark .ba-offer__cta { color: var(--ba-on-dark-soft); }

.ba-toc__list a { color: var(--ba-muted-ink); }
.ba-input::placeholder, .ba-textarea::placeholder { color: var(--ba-muted-ink); }
.ba-label b, .ba-label .req, .ba-field .req { color: var(--ba-amber-ink); }

/* Timeline steps were dimmed to .45 opacity at rest — 1.92:1, and
   permanently so if the script never runs. The inactive state is carried
   by colour alone now, which is legible on its own. */
.ba-step { opacity: 1; }
.ba-step.is-active { opacity: 1; }

/* Footer legal row used a light-ground ink on near-black: 2.14:1. */
.ba-footer__legal small,
.ba-footer__legal span,
.ba-footer__legal a { color: var(--ba-on-dark-soft); }
.ba-footer__legal a:hover { color: #fff; }
.ba-footer__legal a.ba-credit { color: var(--ba-on-dark-soft); }
.ba-footer__legal a.ba-credit b { color: #fff; }

/* Footer links were 18.5px tall on a 35px pitch — under WCAG 2.5.8's
   24px minimum, and the only route to Solutions, Cases and Journal. */
.ba-footer__links { gap: 4px; }
.ba-footer__links a { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 0; }

/* ---- skip link ---- */
.ba-skip {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  transform: translateY(-160%);
  padding: 12px 20px; border-radius: var(--ba-r-pill);
  background: var(--ba-amber); color: var(--ba-navy);
  font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform var(--ba-t-fast) var(--ba-ease);
}
.ba-skip:focus { transform: translateY(0); outline: 2px solid var(--ba-navy); outline-offset: 2px; }
#ba-main:focus { outline: none; }

/* The hero's "See pricing" jumps here; clear the fixed nav. */
#pricing { scroll-margin-top: 0; }

/* 3 — two sections that opted out of the rhythm for no reason. */
#process { padding-top: var(--ba-section); padding-bottom: var(--ba-section); }
.ba-contact { padding-top: var(--ba-section); padding-bottom: var(--ba-section); }

/* ===========================================================
   Fixes from the 2026-09-11 UX audit, each measured first.
   =========================================================== */

/* The horizontal slide is a desktop gesture. On a phone the incoming panel
   spent the first ~900px of scroll translated off the right edge — the
   services list measured 355px of overflow at the top of the page and only
   became whole once the slide finished. Below 900px the stage renders as
   ordinary flow. */
@media (max-width: 899px) {
  /* and with it, the compaction that only existed to fit a pinned hero */
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__inner,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-phero__inner { padding-top: clamp(112px, 22vw, 130px); }
  .ba-slidestage.is-armed .ba-slidestage__a,
  .ba-slidestage.is-armed .ba-slidestage__b {
    position: static !important;
    transform: none !important;
    height: auto !important;
    top: auto !important;
  }
  .ba-slidestage.is-armed { height: auto !important; overflow: visible; }
}

/* Hero CTAs. The labels were wrapping to a second line at every width up
   to 768 — "Report an incident" in a 174px button — which gave both a 78px
   height. Keeping each label on one line lets the row wrap instead of the
   words, and under 480px they go full width. .ba-hero__sub aligns its
   children to flex-start, so the row needs align-self to stretch at all.
   The armed-stage compaction still wins on specificity even though the
   stage no longer pins below 900px, so it has to be named here too. */
.ba-hero__actions .ba-btn,
.ba-slidestage.is-armed .ba-slidestage__a .ba-hero__actions .ba-btn {
  white-space: nowrap;
  min-height: 56px;
}
@media (max-width: 480px) {
  .ba-hero__actions,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__actions {
    flex-direction: column; align-items: stretch; align-self: stretch; gap: 10px; width: 100%;
  }
  .ba-hero__actions .ba-btn,
  .ba-slidestage.is-armed .ba-slidestage__a .ba-hero__actions .ba-btn {
    width: 100%; flex: none; padding: 15px 18px;
  }
}

/* Five layer chips summed 490.1px against 485px available and broke 4+1. */
.ba-form .ba-chip { padding: 10px 14px; }

/* Footer links were 29px tall on a 4px gap — above the 24px minimum, but
   fiddly, and they are the only route to Solutions, Cases and Journal. */
.ba-footer__links a { min-height: 36px; padding: 6px 0; }

/* ===========================================================
   Second contrast pass. The first one caught the price badge and
   the tile CTA; these are what it missed — every one measured on
   the ground it actually sits on.
   =========================================================== */

/* Reveal is opt-in now. .ba-reveal{opacity:0} with nothing to turn it
   back on meant a page without JavaScript hid most of itself: 88% of the
   text on /security/, 79% on an intersection, 43% on the home page. The
   flag is set by an inline script in the head, so no script means no
   hiding rather than an empty page. */
.ba-reveal { opacity: 1; transform: none; }
.ba-js .ba-reveal { opacity: 0; transform: translateY(24px); }
.ba-js .ba-reveal.is-in { opacity: 1; transform: none; }
.ba-reveal [data-stagger] > * { opacity: 1; transform: none; }
.ba-js .ba-reveal [data-stagger] > * { opacity: 0; transform: translateY(20px); }
.ba-js .ba-reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }

/* Footer column headings were a light-ground ink on near-black: 2.14:1,
   36 of them across the site. */
.ba-footer__title { color: var(--ba-on-dark-soft); }

/* The arrow is the only sign a services row is a link, at 1.64:1. */
.ba-row__arrow { color: var(--ba-slate); }
.ba-rows--journal .ba-row__arrow { color: var(--ba-slate); }

/* Hero stat labels 3.55:1, facts-panel labels 3.32:1 — both on dark, both
   the word that says what the number means. */
.ba-stat__label,
.ba-int-facts__label,
.ba-plan__label { color: var(--ba-on-dark-soft); }
.ba-card--dark .ba-plan__label { color: var(--ba-on-dark-soft); }

/* Amber list markers on a light ground: 2.08:1. */
.ba-alist > * > span:first-child,
.ba-layer__arrow { color: var(--ba-amber-ink); }

/* The active contents entry was the least visible one on the page. */
.ba-toc__list a.is-current { color: var(--ba-navy); }

/* Row ordinals are numbered text, not decoration — 2.53:1 was the raw
   --ba-muted value, which the token comment already marks as decorative. */
.ba-row__num { color: var(--ba-muted-ink); }

/* Outlined numerals are decoration, but at 1.21:1 they were not even
   that — they read as a rendering fault. */
.ba-layer__num { color: var(--ba-border-2); }
@supports (-webkit-text-stroke: 1px currentColor) {
  .ba-layer__num { color: transparent; -webkit-text-stroke: 1px #8A97A6; }
}

/* One focus style for the whole site. There was a single :focus-visible
   rule against 49 focusable elements on the home page alone, so almost
   everything fell back to the browser's 1px default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ba-amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.ba-phero :focus-visible,
.ba-hero :focus-visible,
.ba-contact :focus-visible,
.ba-footer :focus-visible,
.ba-menu :focus-visible { outline-color: var(--ba-amber); }

/* The status region is always present so a screen reader has something to
   announce into; it takes no space when there is nothing to say. */
.ba-form__status:empty { display: none; }
.ba-input[aria-invalid="true"],
.ba-textarea[aria-invalid="true"] { border-color: #C1121F; box-shadow: 0 0 0 3px rgba(193,18,31,.14); }

/* ---------------------------------------------------------------------
   Chosen plan, carried from the pricing table into the form so the lead
   records which tier was clicked. Quiet by design — it is a receipt, not
   a field the visitor has to deal with.
   --------------------------------------------------------------------- */
.ba-form__plan {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 2px solid var(--ba-amber);
  background: var(--ba-paper-2, #F6F7F9);
  font-family: var(--ba-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ba-muted-ink);
}
.ba-form__plan b {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  color: var(--ba-navy);
}
.ba-form__planclear {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 4px 2px;
  font: inherit;
  color: var(--ba-amber-ink);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Batch: header scrim, mobile display line-height, collapsible index.
   --------------------------------------------------------------------- */

/* The bar was fully transparent for as long as the dark hero stayed on
   screen, so hero text scrolled through the menu instead of behind it. */
.ba-nav.is-dark {
  background: rgba(11, 20, 33, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* .92 reads as one tight line at 75px and as three collided lines at 34px. */
@media (max-width: 639px) {
  .ba-display { line-height: 1.04; }
  /* .96 puts the line box below the font size: 30.7px at 32px, so three
     stacked lines collide on their descenders. */
  .ba-h1 { line-height: 1.06; }
}

/* The index is a disclosure everywhere; the marker and the pointer only
   appear where it actually opens and closes. */
.ba-toc__box > summary { list-style: none; cursor: default; }
.ba-toc__box > summary::-webkit-details-marker { display: none; }

@media (max-width: 767px) {
  .ba-toc__box > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 12px 0;
    margin-bottom: 0;
  }
  .ba-toc__box > summary::after {
    content: "▾";
    font-size: 13px;
    color: var(--ba-amber-ink);
    transition: transform .2s ease;
  }
  .ba-toc__box[open] > summary::after { transform: rotate(180deg); }
  /* Eight 36px links with no gap between them read as one block and are
     hard to hit individually. */
  .ba-toc__list a { padding-block: 11px; }
}

/* ---------------------------------------------------------------------
   Polish pass: reclaiming vertical space the page was spending on
   nothing. Each rule here answers a measured figure from the UX audit.
   --------------------------------------------------------------------- */

/* A caption on a chip list, not a chapter: 350px of section wrapper and a
   60px H2 around seven badges came to 384px for 34px of content. */
.ba-techstrip-sec { padding: clamp(26px, 3vw, 40px) 0; }
.ba-techstrip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 3vw, 40px);
}
.ba-techstrip__label {
  flex: none;
  margin: 0;
  font-family: var(--ba-font-mono);
  font-size: var(--ba-fs-meta);
  font-weight: 500;
  letter-spacing: var(--ba-ls-meta);
  text-transform: uppercase;
  color: var(--ba-muted-ink);
}
.ba-techstrip .ba-int-tech { flex: 1 1 340px; margin: 0; }
.ba-techstrip .ba-link { margin-left: auto; flex: none; }

/* The timeline's auto-fit grid split every row in half, so a 74px word
   like "Audit" sat in a 485px column — 411px of dead width per step,
   four steps deep, in three separate timelines. */
@media (min-width: 900px) {
  .ba-step__grid { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); }
  /* Same :has() specificity as the rule above it, or the 1fr label column
     keeps winning and "Audit" gets 378px to itself. */
  .ba-step__grid:has(.ba-step__sla:not(:empty)) {
    grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 190px;
  }
}

/* The watermark took 234px of a 652px footer at 1.12:1 — a third of the
   footer's height for a word already on the page three times. It stays,
   at a size that reads as a sign-off rather than as a block. */
.ba-footer__word b,
.ba-footer__word i { font-size: clamp(34px, 7vw, 108px); }

/* At 375 the dropcap takes 52px out of a 335px measure and squeezes the
   first three lines of a technical article into a gutter. */
@media (max-width: 639px) {
  .ba-article--dropcap > p:first-of-type::first-letter {
    font-size: inherit; float: none; margin: 0; line-height: inherit;
    color: inherit; font-weight: inherit;
  }
}

/* ---------------------------------------------------------------------
   "How it runs" on a phone. The three-track rule above is written with
   :has(), which outranks the plain .ba-step__grid rules in the mobile
   media queries — so the grid never collapsed. At 375 that left 190px of
   a 289px row to the SLA chip and split the remaining 99px between the
   step's title and its paragraph: a 40px column wrapping one character
   per line, and a section 2038px tall.

   Kept as its own rule rather than added to the selector list above, so
   a browser without :has() still gets the single-column fallback.
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
  .ba-step__grid:has(.ba-step__sla:not(:empty)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}