/* Below Baseline redesign — v5 theme styles */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--slate-50)}
a{color:var(--purple-600);text-decoration:none}
a:hover{color:var(--purple-700)}

/* ---- keyframes ---- */
@keyframes bbFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes bbDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes bbRule{from{transform:scaleX(0)}}
@keyframes bbSettle{from{opacity:.8}}
@keyframes bbDrawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bbBarDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bbGrowDown{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bbIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;animation-delay:0s !important;transition-delay:0s !important}
}

/* ---- routing / structure ---- */
/* Footer pinning (F21): short pages (Contact) no longer leave a blank band below the
   footer — the content region stretches, the footer sits at the viewport bottom. */
#bb-scroll{display:flex;flex-direction:column;min-height:100vh}
.bb-screen{display:block;animation:bbFade .3s var(--ease-out);flex:1 0 auto}
.bb-drop{display:none}
.bb-drop.bb-open{display:block}
.bb-nav-mobile{display:none}
html.js #bb-mobile-menu{display:none}  /* no-JS renders the menu expanded — ugly but navigable (M3) */
@media(max-width:1040px){.bb-nav-desktop{display:none}.bb-nav-mobile{display:block}}
@media(max-width:640px){.bb-h1{font-size:40px !important}.bb-hero-cta{width:100%;justify-content:center}}

/* ---- anchored targets land clear of the 70px sticky header even without JS (F24) ---- */
[id^="svc-"],[id^="sol-"],#get-it{scroll-margin-top:96px}

/* ---- animated section rule (draws left→right; re-plays each time its route is shown) ---- */
.bb-ruled{position:relative}
.bb-ruled::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--blue-700);transform-origin:left}
.bb-ruled-light::before{background:rgba(255,255,255,.45)}
.bb-hrule{height:2px;background:var(--blue-700);transform-origin:left;margin-bottom:32px}
.bb-ruled::before{animation:bbRule .55s var(--ease-out) backwards}
.bb-hrule{animation:bbRule .55s var(--ease-out)}
@media (prefers-reduced-motion: reduce){
  .bb-ruled::before,.bb-hrule{animation:none}
}

/* ---- interaction states (semantic, reusable) ---- */
.bb-navi{transition:background var(--dur-fast) var(--ease-out)}
.bb-navi:hover{background:var(--slate-100)}
.bb-navi-muted:hover{background:var(--slate-100);color:var(--ink)}

.bb-btn{transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.bb-btn:hover{background:var(--purple-700)}
.bb-btn:active{background:var(--purple-800);transform:translateY(1px)}
.bb-btn:focus{outline:3px solid var(--focus-ring);outline-offset:2px}

.bb-btn-white{transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.bb-btn-white:hover{background:var(--purple-100)}
.bb-btn-white:active{background:var(--purple-200);transform:translateY(1px)}
.bb-btn-white:focus{outline:3px solid var(--focus-ring);outline-offset:2px}

.bb-btn-ghost{transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.bb-btn-ghost:hover{border-color:var(--purple-600);color:var(--purple-600)}

.bb-link{transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.bb-link:hover{opacity:1;color:var(--purple-600)}

.bb-mega-item{transition:background var(--dur-fast) var(--ease-out)}
.bb-mega-item:hover{background:var(--purple-50)}
.bb-svc-link{transition:color var(--dur-fast) var(--ease-out)}
.bb-svc-link:hover{color:var(--purple-600)}

.bb-door{transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.bb-door:hover{box-shadow:var(--shadow-md);border-color:var(--purple-600);transform:translateY(-2px)}

.bb-rowcard{transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.bb-rowcard:hover{border-color:var(--purple-400);box-shadow:var(--shadow-md)}

.bb-acc-row{transition:background var(--dur-fast) var(--ease-out)}
.bb-acc-row:hover{background:var(--slate-50)}
.bb-chev{transition:transform var(--dur-base) var(--ease-out)}

.bb-pill{transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.bb-pill-solid:hover{background:var(--purple-700)}

.bb-input{transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.bb-input:focus{border-color:var(--purple-500);box-shadow:0 0 0 3px rgba(103,85,169,.18)}

.bb-flink{transition:color var(--dur-fast) var(--ease-out)}
.bb-flink:hover{color:#fff}
.bb-flink-cta:hover{color:var(--purple-200)}

.bb-logo{cursor:pointer}

/* ---- long-form page content (page.php: Privacy Policy, etc.) ---- */
.bb-content h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--ink);letter-spacing:-.01em;margin:34px 0 12px}
.bb-content h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--blue-700);margin:26px 0 10px}
.bb-content p,.bb-content li{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--slate-700)}
.bb-content ul,.bb-content ol{padding-left:22px;margin:12px 0}
.bb-content li{margin:6px 0}
.bb-content a{color:var(--purple-700);text-decoration:underline}
.bb-content a:hover{color:var(--purple-800)}

/* ---- visible keyboard focus everywhere (mouse clicks unaffected) ---- */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,.bb-acc-row:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px
}

/* ---- Bookings collapsible (book-assessment): native details/summary, no JS needed to toggle ---- */
.bb-bookings-acc summary{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--slate-50);border:1px solid var(--border);border-radius:16px;padding:22px 28px;cursor:pointer;list-style:none;transition:background .2s var(--ease-out)}
.bb-bookings-acc summary::-webkit-details-marker{display:none}
.bb-bookings-acc summary::marker{content:""}
.bb-bookings-acc summary:hover{background:var(--purple-50)}
.bb-bk-chev{transition:transform .2s var(--ease-out)}
.bb-bookings-acc[open] .bb-bk-chev{transform:rotate(180deg)}

/* ============================================================
   Design review pass (22/07/2026) — eyebrows, reveals, data art
   ============================================================ */

/* ---- Section eyebrows (mono-caps; purple-700 on light, purple-200 on dark) ---- */
.bb-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--purple-700);text-transform:uppercase;display:block}
.bb-eyebrow-dark{color:var(--purple-200)}

/* ---- Reveal system: sections gate on viewport entry, play once per page view.
   Hidden states apply ONLY when JS is running (html.js) — no invisible content without JS. ---- */
.bb-reveal .bb-rv{transition:opacity .24s var(--ease-out),transform .24s var(--ease-out)}
html.js .bb-reveal:not(.bb-inview) .bb-rv{opacity:0;transform:translateY(6px)}
html.js .bb-reveal:not(.bb-inview) .bb-ruled::before{animation:none;transform:scaleX(0)}
.bb-reveal.bb-inview .bb-ruled::before{animation:bbRule .55s var(--ease-out) both}

/* ---- Hero data-art choreography (plays on page load; 1.25s total, then still) ---- */
.bb-art-base{transform-box:fill-box;transform-origin:left center;animation:bbDrawX .42s var(--ease-out) both}
.bb-art-lbl{animation:bbIn .2s var(--ease-out) .3s both}
.bb-art-bar{animation:bbBarDrop .24s var(--ease-out) both}
.bb-art-tick{animation:bbIn .2s var(--ease-out) .55s both}
.bb-art-green{transform-box:fill-box;transform-origin:center top;animation:bbGrowDown .3s var(--ease-out) .8s both}
.bb-art-tag{animation:bbIn .2s var(--ease-out) .95s both}
.bb-art-dot{animation:bbIn .15s var(--ease-out) 1.1s both}

/* ---- Compact hero (≤1040px — M1: covers tablet, where the stacked desktop chart would land
   below the CTAs as an appendix): compact descent between H1 and intro; the dot layer goes too,
   because its baseline is drawn in the H1/intro gap — exactly where the compact art now sits. ---- */
.bb-hero-art-m{display:none}
@media(max-width:1040px){
  #bb-hero-dotgrid{display:none}
  .bb-hero-art-d{display:none}
  .bb-hero-art-m{display:block;margin:20px 0 4px;height:120px;width:100%;max-width:520px}
}

/* ---- Problem-band dark descent art (right 40%, ≥1040px only; plays once on section entry) ---- */
.bb-darkart{display:none}
@media(min-width:1040px){.bb-darkart{display:block}}
html.js .bb-reveal:not(.bb-inview) .bbp-anim{opacity:0}
.bb-reveal.bb-inview .bbp-base{transform-box:fill-box;transform-origin:left center;animation:bbDrawX .42s var(--ease-out) both}
.bb-reveal.bb-inview .bbp-lbl{animation:bbIn .2s var(--ease-out) .3s both}
.bb-reveal.bb-inview .bbp-bar{animation:bbBarDrop .24s var(--ease-out) both}
.bb-reveal.bb-inview .bbp-green{transform-box:fill-box;transform-origin:center top;animation:bbGrowDown .3s var(--ease-out) .62s both}
.bb-reveal.bb-inview .bbp-tag{animation:bbIn .2s var(--ease-out) .8s both}

/* ---- Outcome sparklines: stroke draws on entry; endpoint dot pops after the line ---- */
.bb-spark{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-out) .12s}
html.js .bb-reveal:not(.bb-inview) .bb-spark{stroke-dashoffset:1}
.bb-spark-dot{transform-box:fill-box;transform-origin:center;transition:opacity .15s var(--ease-out) .74s,transform .15s var(--ease-out) .74s}
html.js .bb-reveal:not(.bb-inview) .bb-spark-dot{opacity:0;transform:scale(.6)}

/* ---- Problem-band enumeration rows ---- */
.bb-enum{border-top:1px solid rgba(255,255,255,.18);padding:13px 0;font-family:var(--font-body);font-weight:300;font-size:19px;line-height:1.5;color:rgba(255,255,255,.92)}
.bb-enum:first-of-type{border-top:0}

/* ---- Print / rasteriser safety: consumers that freeze CSS animation or never scroll
   (print, screenshot bots) must see the settled final frame, never frame 0.
   Note: the entrance art's hidden states already live ONLY in keyframe from{} (via fill-mode);
   static CSS is the settled state. These blocks cover renderers that freeze the animation
   clock at t=0 — print media and non-updating render targets. ---- */
@media (update: none), (update: slow){
  .bb-art-base,.bb-art-lbl,.bb-art-bar,.bb-art-tick,.bb-art-green,.bb-art-tag,.bb-art-dot,
  .bb-reveal.bb-inview .bbp-base,.bb-reveal.bb-inview .bbp-lbl,.bb-reveal.bb-inview .bbp-bar,
  .bb-reveal.bb-inview .bbp-green,.bb-reveal.bb-inview .bbp-tag{animation:none !important}
  html.js .bb-reveal:not(.bb-inview) .bb-rv,
  html.js .bb-reveal:not(.bb-inview) .bbp-anim{opacity:1 !important;transform:none !important}
  html.js .bb-reveal:not(.bb-inview) .bb-spark{stroke-dashoffset:0 !important}
  html.js .bb-reveal:not(.bb-inview) .bb-spark-dot{opacity:1 !important;transform:none !important}
  html.js .bb-reveal:not(.bb-inview) .bb-ruled::before{transform:none !important;animation:none !important}
}
@media print{
  html.js .bb-reveal:not(.bb-inview) .bb-rv,
  html.js .bb-reveal:not(.bb-inview) .bbp-anim{opacity:1 !important;transform:none !important}
  .bb-art-base,.bb-art-lbl,.bb-art-bar,.bb-art-tick,.bb-art-green,.bb-art-tag,.bb-art-dot{animation:none !important}
  html.js .bb-reveal:not(.bb-inview) .bb-spark{stroke-dashoffset:0 !important}
  html.js .bb-reveal:not(.bb-inview) .bb-spark-dot{opacity:1 !important;transform:none !important}
  html.js .bb-reveal:not(.bb-inview) .bb-ruled::before{transform:none !important;animation:none !important}
}