@charset "UTF-8";
/* ==========================================================================
   Beyond Blue Digital — Neon Tide
   Design system + homepage sections. Loaded by the Divi 5 child theme and by
   /preview/index.html (identical file, no duplication).

   DIRECTION CONTRACT
   THESIS ......... A digital studio rendered as a bioluminescent deep-sea
                    expedition. The page is a dive: surface, descent, the light
                    passage, the treasure. It refuses the agency card-grid.
   OWN-WORLD ...... Abyssal teal-black ground, bioluminescent cyan as energy,
                    hot magenta as the jolly roger, brass as treasure. Waterline
                    seams instead of torn paper. Cel-shaded crew cut-outs that
                    break every seam. Archivo 800 display with its true italic
                    for every accent, Poppins body, Chakra Petch for instrument
                    readouts. Readable glass wherever copy meets the chart.
   STORY .......... This crew designs, builds, hosts and grows the site. It has
                    swagger and it ships. Board at R2000 + R500pm.
   FIRST VIEWPORT . Scroll-driven undersea stage told in three beats: the offer,
                    the four trades, the price. The ship sails right to left
                    across all three. One H1, one primary action.
   FORM ........... Nautical chart / expedition log.
   FINISH ......... unreviewed and undocumented is unfinished; this build ends
                    with the finish review, the verdict, and DESIGN.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ground — abyssal teal-black */
  --bb-abyss:      #04101a;
  --bb-hull:       #061219;
  --bb-deep:       #071c28;
  --bb-tide:       #0b2a38;
  --bb-surf:       #10394a;

  /* Light passage */
  --bb-foam:       #e8f6f6;
  --bb-foam-2:     #d3ebec;

  /* Neon */
  --bb-cyan:       #29f0dc;
  --bb-cyan-lo:    #12b6a8;
  --bb-cyan-hi:    #8ffdf1;
  --bb-magenta:    #ff2d9b;
  --bb-magenta-lo: #c2126e;
  --bb-magenta-hi: #ff7cc2;

  /* Treasure */
  --bb-brass:      #f5b845;
  --bb-brass-lo:   #b8811f;

  /* Type colour */
  --bb-ink:        #eaf7f8;   /* on dark  — 18.9:1 */
  --bb-mist:       #9fbfc9;   /* on dark  —  9.8:1 */
  --bb-ink-dk:     #06222c;   /* on foam  — 14.6:1 */
  --bb-mist-dk:    #3d6472;   /* on foam  —  6.1:1 */

  /* Lines */
  --bb-line:       rgba(41, 240, 220, 0.18);
  --bb-line-soft:  rgba(234, 247, 248, 0.10);
  --bb-line-dk:    rgba(6, 34, 44, 0.16);

  /* Type — Archivo carries the display voice. A neo-grotesque with open
     apertures, generous counters and wide, even rhythm: it stays readable in
     all-caps at 80px and at 20px on a card, which the condensed faces did not.
     True italic for every accent phrase. */
  --bb-display: "Archivo", "Segoe UI", sans-serif;
  --bb-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bb-hud:     "Chakra Petch", "Poppins", sans-serif;

  --bb-display-w:  800;
  --bb-display-ls: -0.005em;
  --bb-display-lh: 1.04;

  /* Fluid scale — clamp(min, preferred, max) */
  --bb-t-hero:  clamp(2.25rem, 5.6vw, 5.6rem);
  --bb-t-big:   clamp(1.7rem, 4vw, 3.9rem);
  --bb-t-h2:    clamp(1.8rem, 4.5vw, 4rem);
  --bb-t-h3:    clamp(1.24rem, 2.1vw, 1.85rem);
  --bb-t-lead:  clamp(1.02rem, 1.25vw, 1.2rem);
  --bb-t-body:  clamp(0.96rem, 1.02vw, 1.06rem);
  --bb-t-hud:   clamp(0.66rem, 0.78vw, 0.79rem);

  /* Rhythm */
  --bb-gut:     clamp(1.25rem, 4.4vw, 3.5rem);
  --bb-pad-y:   clamp(4.5rem, 9vw, 9.5rem);
  --bb-max:     84rem;
  --bb-radius:  1.35rem;
  --bb-radius-s: 0.8rem;

  /* Motion */
  --bb-ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --bb-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --bb-dur:     0.55s;

  /* Chrome sizes */
  --bb-nav-h:    4.75rem;   /* desktop bar */
  --bb-top-h:    3.9rem;    /* mobile bar */
  --bb-ribbon-h: 2.4rem;    /* proclaim ribbon */
  --bb-dock-h:   4.4rem;
  --bb-chrome-h: var(--bb-nav-h);
  --bb-header-h: calc(var(--bb-ribbon-h) + var(--bb-nav-h));
}
@media (max-width: 63.9375rem) {
  :root {
    --bb-chrome-h: var(--bb-top-h);
    --bb-header-h: calc(var(--bb-ribbon-h) + var(--bb-top-h));
  }
}

/* --------------------------------------------------------------------------
   2. RESET / BASE  (scoped so it cannot fight the rest of a WordPress site)
   -------------------------------------------------------------------------- */
/* The user agent's 8px body margin would otherwise leave a pale frame down
   every edge of the page. WordPress themes already zero this; repeating it
   costs nothing and makes the standalone preview match the live site. */
html { background: var(--bb-abyss); }
body { margin: 0; }

/* Horizontal containment, applied at every level that can leak.
   `clip` rather than `hidden` on purpose: `hidden` turns the element into a
   scroll container and breaks `position: sticky` for everything inside it,
   which would kill the hero. `overflow-x: clip` with `overflow-y: visible`
   contains the bleed and leaves sticky working.
   In the standalone preview `.bb-page` does this; on WordPress that element
   does not exist, which is why the live site could be panned sideways. */
html,
body { overflow-x: clip; max-width: 100%; }
body.bb-body #page-container,
body.bb-body #et-main-area,
body.bb-body .et-l--body,
body.bb-body .et_builder_inner_content { overflow-x: clip; max-width: 100%; }

/* Two scopes, one system. `.bb-page` is the wrapper in the standalone preview;
   `.bb-divi` is the class Divi puts on every one of our sections and rows. The
   resets never reach a module we did not author. */
.bb-page, .bb-page *, .bb-page *::before, .bb-page *::after,
.bb-divi, .bb-divi *, .bb-divi *::before, .bb-divi *::after { box-sizing: border-box; }

.bb-page, .bb-divi {
  font-family: var(--bb-body);
  font-size: var(--bb-t-body);
  line-height: 1.62;
  color: var(--bb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb-page { background: var(--bb-abyss); overflow-x: clip; }

/* `:where()` keeps every reset at zero specificity, so a component rule always
   wins without needing !important. `:is()` here would out-specify `.bb-h2`. */
.bb-page :where(img, svg),
.bb-divi :where(img, svg) { max-width: 100%; height: auto; display: block; }

/* `color: inherit` is load-bearing, not tidiness. Divi ships
   `h1, h2, h3, h4, h5, h6 { color: #333 }` as a plain type selector, and an
   inherited value always loses to a directly-matching rule however low its
   specificity. Without this every heading renders Divi grey on the abyss.
   These selectors are (0,1,0) — enough to beat Divi's (0,0,1), still low
   enough that any component class overrides them. */
.bb-page :where(h1, h2, h3, h4, h5, h6),
.bb-divi :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  color: inherit;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.bb-page :where(p), .bb-divi :where(p) { margin: 0; padding: 0; color: inherit; }
.bb-page :where(ul, ol, li), .bb-divi :where(ul, ol, li) { margin: 0; padding: 0; color: inherit; list-style: none; }
.bb-page :where(a), .bb-divi :where(a) { color: inherit; text-decoration: none; }
.bb-page :where(button), .bb-divi :where(button) { font: inherit; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.bb-page :where(a, button, input, textarea, select):focus-visible,
.bb-divi :where(a, button, input, textarea, select):focus-visible,
.bb-dock :where(a, button):focus-visible,
.bb-sheet :where(a, button):focus-visible {
  outline: 3px solid var(--bb-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.bb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. DIVI NEUTRALISERS
   Divi wraps every code module in section > row > column. Strip its spacing so
   our sections own the full bleed.
   -------------------------------------------------------------------------- */
.et_pb_section.bb-divi,
.bb-divi.et_pb_section { padding: 0 !important; margin: 0 !important; background-color: transparent !important; }
.bb-divi .et_pb_row,
.bb-divi .et_pb_row_inner {
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; padding: 0 !important;
}
.bb-divi .et_pb_column { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.bb-divi .et_pb_module { margin-bottom: 0 !important; }
.bb-divi .et_pb_code_inner { line-height: normal; }
body.bb-body { background: var(--bb-abyss); overflow-x: clip; }
body.bb-body #page-container { background: var(--bb-abyss); }

/* --------------------------------------------------------------------------
   3b. DIVI THEME BUILDER — the header module used as a global header
   --------------------------------------------------------------------------
   The header markup is already `position: fixed`. Two things break it inside a
   Theme Builder template:

   1. Divi wraps the template in `.et-l--header`, which sits in `#page-container`
      alongside the body content. A fixed child can only rise as high as its
      nearest stacking-context ancestor allows, so `z-index: 60` gets trapped
      under the page content and the bar renders behind the hero.

   2. Divi's Sticky option drives its bar with `transform` while it is inactive,
      and switches to `position: fixed` once you scroll past the trigger. This is
      the one that actually bites: ANY ancestor carrying `transform`, `filter`,
      `perspective`, `backdrop-filter`, `will-change` or `contain` stops being
      merely an ancestor and becomes the containing block for every
      `position: fixed` descendant. Our bar then sizes and positions itself
      against a zero-width builder wrapper instead of the viewport — invisible on
      first paint, correct the moment Divi's sticky takes over on scroll.

   Fix: lift the wrapper, strip the builder chrome, and above all keep every
   containing-block-creating property off the ancestor chain.
   -------------------------------------------------------------------------- */
.et-l--header {
  position: relative;
  z-index: 90000;
}
.et-l--header,
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_row_inner,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module,
.et-l--header .et_pb_code,
.et-l--header .et_pb_code_inner,
.et-l--header .et_pb_sticky,
.et-l--header .et_pb_sticky_module {
  /* these six are what capture a fixed descendant — none may survive */
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  contain: none !important;
}
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_row_inner,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module,
.et-l--header .et_pb_code,
.et-l--header .et_pb_code_inner,
.et-l--header .et_pb_sticky,
.et-l--header .et_pb_sticky_module {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.et-l--header .et_pb_sticky_placeholder { display: none !important; }

/* The template header renders on every page, but only the homepage has a hero
   sitting deliberately underneath it. Everywhere else, reserve its height. */
body.bb-body:not(.bb-front) #page-container { padding-top: var(--bb-header-h); }

/* --------------------------------------------------------------------------
   3c. DIVI THEME BUILDER — the footer module used as a global footer
   --------------------------------------------------------------------------
   The footer itself is in normal flow, but it carries the four legal modals,
   which are `position: fixed` at z-index 200. Same trap as the header: a
   builder wrapper with a transform or its own stacking context would pin them
   behind the page. The wrappers are neutralised, but unlike the header the
   footer is NOT lifted — it must stay below the page content it follows.
   -------------------------------------------------------------------------- */
.et-l--footer .et_pb_section,
.et-l--footer .et_pb_row,
.et-l--footer .et_pb_row_inner,
.et-l--footer .et_pb_column,
.et-l--footer .et_pb_module,
.et-l--footer .et_pb_code,
.et-l--footer .et_pb_code_inner {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  contain: none !important;
  position: static !important;
  z-index: auto !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   4. SHARED PRIMITIVES
   -------------------------------------------------------------------------- */
.bb-shell {
  width: 100%;
  max-width: var(--bb-max);
  margin-inline: auto;
  padding-inline: var(--bb-gut);
}
.bb-shell--wide { max-width: 96rem; }

.bb-sec {
  position: relative;
  padding-block: var(--bb-pad-y);
  isolation: isolate;
  /* decorative art is allowed to bleed off the edge, never to widen the page */
  overflow-x: clip;
}
/* anchored sections must clear the fixed bar */
.bb-hero, .bb-sec[id], .bb-sec[aria-labelledby] { scroll-margin-top: calc(var(--bb-chrome-h) + 0.75rem); }
.bb-sec--tight { padding-block: clamp(3rem, 6vw, 6rem); }

/* Headings ------------------------------------------------------------- */
.bb-h2 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: var(--bb-t-h2);
  line-height: var(--bb-display-lh);
  text-transform: uppercase;
  letter-spacing: var(--bb-display-ls);
  overflow-wrap: break-word;
}
/* the quiet opener inside a heading — one heading, two weights, never a label */
.bb-h2 .bb-h2__soft {
  display: block;
  font-family: var(--bb-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.9vw, 1.7rem);
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--bb-mist);
  margin-bottom: 0.5em;
}
.bb-h2 .bb-hit { color: var(--bb-magenta); font-style: italic; }
.bb-h2 .bb-hit-c { color: var(--bb-cyan); font-style: italic; }

.bb-h3 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: var(--bb-t-h3);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: var(--bb-display-ls);
  overflow-wrap: break-word;
}

.bb-lead {
  font-size: var(--bb-t-lead);
  color: var(--bb-mist);
  max-width: 58ch;
  line-height: 1.7;
}
.bb-body-copy { color: var(--bb-mist); max-width: 66ch; line-height: 1.72; }
.bb-body-copy + .bb-body-copy { margin-top: 1.15em; }

/* Instrument readout label --------------------------------------------- */
.bb-hud {
  font-family: var(--bb-hud);
  font-size: var(--bb-t-hud);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--bb-cyan);
}

/* Buttons — NEVER move. Effects are internal: sheen, fill, glow, border. --- */
.bb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.4rem;
  padding: 0 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--bb-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform: none !important;      /* hard guarantee: no motion on the button */
  transition: box-shadow 0.3s var(--bb-ease),
              border-color 0.3s var(--bb-ease),
              color 0.3s var(--bb-ease),
              background-color 0.3s var(--bb-ease);
}
.bb-btn__t { position: relative; z-index: 2; }
.bb-btn svg { position: relative; z-index: 2; flex: 0 0 auto; }
/* sheen sweeps inside the pill; the pill itself is fixed */
.bb-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.42) 50%, transparent 68%);
  transform: translate3d(-130%, 0, 0);
  transition: transform 0.72s var(--bb-ease);
  pointer-events: none;
}
.bb-btn:hover::after,
.bb-btn:focus-visible::after { transform: translate3d(130%, 0, 0); }

.bb-btn--primary {
  background: var(--bb-magenta);
  color: #0a0f14;
  box-shadow: 0 10px 26px -12px rgba(255, 45, 155, 0.85),
              0 0 0 0 rgba(255, 45, 155, 0);
}
.bb-btn--primary:hover,
.bb-btn--primary:focus-visible {
  background: var(--bb-magenta-hi);
  box-shadow: 0 14px 34px -12px rgba(255, 45, 155, 0.95),
              0 0 0 6px rgba(255, 45, 155, 0.18);
}

.bb-btn--cyan {
  background: var(--bb-cyan);
  color: #05171a;
  box-shadow: 0 10px 26px -12px rgba(41, 240, 220, 0.8);
}
.bb-btn--cyan:hover,
.bb-btn--cyan:focus-visible {
  background: var(--bb-cyan-hi);
  box-shadow: 0 14px 34px -12px rgba(41, 240, 220, 0.95),
              0 0 0 6px rgba(41, 240, 220, 0.16);
}

.bb-btn--ghost {
  background: rgba(234, 247, 248, 0.03);
  border-color: rgba(41, 240, 220, 0.42);
  color: var(--bb-ink);
}
.bb-btn--ghost:hover,
.bb-btn--ghost:focus-visible {
  border-color: var(--bb-cyan);
  color: var(--bb-cyan-hi);
  background: rgba(41, 240, 220, 0.09);
  box-shadow: 0 0 0 5px rgba(41, 240, 220, 0.10);
}

.bb-btn--dark {
  background: var(--bb-ink-dk);
  color: var(--bb-foam);
}
.bb-btn--dark:hover,
.bb-btn--dark:focus-visible {
  background: #0a3140;
  box-shadow: 0 0 0 5px rgba(6, 34, 44, 0.14);
}

.bb-btn--lg { min-height: 3.85rem; padding-inline: 2.2rem; font-size: 1.01rem; }
.bb-btn--block { width: 100%; }

/* Text link with a drawn underline that fills, no movement --------------- */
.bb-tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--bb-cyan);
  padding-bottom: 3px;
}
.bb-tlink::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0.24);
  transition: transform 0.45s var(--bb-ease);
}
.bb-tlink:hover::before,
.bb-tlink:focus-visible::before { transform: scaleX(1); }
.bb-tlink--dark { color: var(--bb-magenta-lo); }

/* Chips ----------------------------------------------------------------- */
.bb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bb-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  background: rgba(41, 240, 220, 0.05);
  font-size: 0.79rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--bb-ink);
}
.bb-chip svg { color: var(--bb-cyan); }

/* Readable glass — used wherever body copy sits over the chart background.
   Same recipe as the numbers board: a dark transparent ground plus a real
   backdrop blur, so the art stays visible but the text never fights it. */
.bb-glass {
  position: relative;
  padding: clamp(1.4rem, 2.5vw, 2.3rem);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  background: rgba(4, 16, 26, 0.66);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  box-shadow: 0 26px 60px -38px rgba(0, 0, 0, 0.95);
}

/* Panels ---------------------------------------------------------------- */
.bb-panel {
  position: relative;
  border: 1px solid var(--bb-line-soft);
  border-radius: var(--bb-radius);
  background:
    linear-gradient(180deg, rgba(41,240,220,0.055), rgba(41,240,220,0) 42%),
    var(--bb-deep);
  box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.95);
}

/* Waterline seam — replaces the torn-paper edge.
   Sits in the flow between two sections: the div carries the colour above,
   the filled path carries the colour below, so the join is a crossed waterline. */
.bb-seam {
  --bb-from: var(--bb-abyss);
  --bb-to: var(--bb-deep);
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  background: var(--bb-from);
  overflow: hidden;
}
.bb-seam svg { width: 100%; height: clamp(34px, 4.8vw, 78px); display: block; }
.bb-seam--tall svg { height: clamp(48px, 7vw, 112px); }
.bb-seam__fill { fill: var(--bb-to); }
.bb-seam__line { fill: none; stroke: var(--bb-cyan); stroke-width: 2.5; opacity: 0.5; }
.bb-seam__glow { fill: none; stroke: var(--bb-cyan-hi); stroke-width: 9; opacity: 0.22; filter: blur(7px); }

.bb-seam--abyss-deep    { --bb-from: var(--bb-abyss); --bb-to: var(--bb-deep); }
.bb-seam--deep-tide     { --bb-from: var(--bb-deep);  --bb-to: var(--bb-tide); }
.bb-seam--tide-abyss    { --bb-from: var(--bb-tide);  --bb-to: var(--bb-abyss); }
.bb-seam--abyss-foam    { --bb-from: var(--bb-abyss); --bb-to: var(--bb-foam); }
.bb-seam--foam-abyss    { --bb-from: var(--bb-foam);  --bb-to: var(--bb-abyss); }
.bb-seam--abyss-tide    { --bb-from: var(--bb-abyss); --bb-to: var(--bb-tide); }
.bb-seam--tide-deep     { --bb-from: var(--bb-tide);  --bb-to: var(--bb-deep); }
.bb-seam--deep-abyss    { --bb-from: var(--bb-deep);  --bb-to: var(--bb-abyss); }
.bb-seam--abyss-magenta { --bb-from: var(--bb-abyss); --bb-to: var(--bb-magenta); }
.bb-seam--magenta-abyss { --bb-from: var(--bb-magenta); --bb-to: var(--bb-abyss); }
.bb-seam--magenta-abyss .bb-seam__line,
.bb-seam--abyss-magenta .bb-seam__line { stroke: var(--bb-cyan-hi); opacity: 0.7; }
.bb-seam--foam-abyss .bb-seam__line { stroke: var(--bb-ink-dk); opacity: 0.22; }

/* Swipe pagination dots (mobile only) ----------------------------------- */
.bb-dots { display: none; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; }
.bb-dots i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(234, 247, 248, 0.22);
  transition: width 0.35s var(--bb-ease), background-color 0.35s var(--bb-ease);
}
.bb-dots i.is-on { width: 22px; background: var(--bb-magenta); }

/* Chart background — 3840px holographic bathymetric chart. A phone-sized
   variant is swapped in below the breakpoint so mobile never fetches 4K. */
.bb-chart-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/chart.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.36;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* fine sonar grid, drawn not imported */
.bb-grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(41,240,220,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,240,220,0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 22%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 40%, #000 22%, transparent 76%);
  pointer-events: none;
}

/* Reveal on scroll — content is visible by default, JS opts in ----------- */
[data-bb-motion="on"] .bb-rev {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.72s var(--bb-ease), transform 0.72s var(--bb-ease);
  transition-delay: var(--bb-d, 0ms);
}
[data-bb-motion="on"] .bb-rev.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. HEADER SHELL — fixed, so it survives Divi's section wrappers
   (position: sticky cannot work inside a builder row: the containing block is
   only as tall as the bar itself.)
   -------------------------------------------------------------------------- */
.bb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  will-change: transform;
  transition: transform 0.45s var(--bb-ease);
}
/* on scroll the ribbon slides out of view and the bar docks against the top */
.bb-header.is-stuck { transform: translate3d(0, calc(var(--bb-ribbon-h) * -1), 0); }
@media (prefers-reduced-motion: reduce) { .bb-header { transition: none; } }

/* PROCLAIM RIBBON ------------------------------------------------------- */
.bb-proclaim {
  position: relative;
  height: var(--bb-ribbon-h);
  overflow: hidden;
  background: var(--bb-magenta);
  color: #12030b;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.bb-proclaim__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: bb-marquee 34s linear infinite;
}
.bb-proclaim__set {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 0 0 auto;
  gap: 2.4rem;
  padding-inline: 1.2rem;
  font-family: var(--bb-hud);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bb-proclaim__set span { display: inline-flex; align-items: center; gap: 0.7rem; }
.bb-proclaim__set svg { flex: 0 0 auto; }
@keyframes bb-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.bb-proclaim:hover .bb-proclaim__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .bb-proclaim__track { animation: none; }
}

/* --------------------------------------------------------------------------
   6. NAV — desktop bar
   -------------------------------------------------------------------------- */
.bb-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--bb-nav-h);
  padding-inline: var(--bb-gut);
  background: rgba(4, 16, 26, 0.72);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: background-color 0.35s var(--bb-ease), border-color 0.35s var(--bb-ease);
}
.bb-header.is-stuck .bb-nav {
  background: rgba(4, 16, 26, 0.94);
  border-bottom-color: var(--bb-line);
}
.bb-brand { display: inline-flex; align-items: center; gap: 0.72rem; flex: 0 0 auto; }
.bb-brand__mark { width: 2.55rem; height: 2.55rem; flex: 0 0 auto; }
.bb-brand__name {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: 1.02rem;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bb-ink);
}
.bb-brand__name b { display: block; font-weight: 400; color: var(--bb-cyan); }
.bb-brand__name i {
  display: block;
  font-family: var(--bb-hud);
  font-style: normal;
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--bb-mist);
  margin-top: 0.22em;
}

.bb-nav__links { display: flex; align-items: center; gap: 0.35rem; margin-inline: auto; }
.bb-nav__links a {
  position: relative;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--bb-mist);
  transition: color 0.3s var(--bb-ease), background-color 0.3s var(--bb-ease);
}
.bb-nav__links a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0.28rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bb-magenta);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s var(--bb-ease);
}
.bb-nav__links a:hover,
.bb-nav__links a:focus-visible { color: var(--bb-ink); background: rgba(41, 240, 220, 0.08); }
.bb-nav__links a.is-active { color: var(--bb-cyan); }
.bb-nav__links a.is-active::after { opacity: 1; }

.bb-nav__actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.bb-nav .bb-btn { min-height: 2.9rem; padding-inline: 1.25rem; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   7. MOBILE DOCK — app-style bottom navigation
   -------------------------------------------------------------------------- */
.bb-dock {
  position: fixed;
  z-index: 70;
  left: max(0.6rem, env(safe-area-inset-left));
  right: max(0.6rem, env(safe-area-inset-right));
  bottom: calc(0.6rem + env(safe-area-inset-bottom));
  display: none;
  padding: 0.34rem;
  border-radius: 1.45rem;
  border: 1px solid rgba(41, 240, 220, 0.22);
  background: rgba(6, 22, 31, 0.86);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 -2px 0 0 rgba(41, 240, 220, 0.16) inset,
              0 22px 46px -16px rgba(0, 0, 0, 0.95);
}
/* the console's glowing top rail */
.bb-dock::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: -1px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--bb-cyan), transparent);
  opacity: 0.9;
}
.bb-dock__list { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
/* the travelling glow sits behind the buttons */
.bb-dock__glow {
  position: absolute;
  top: 0; left: 0;
  width: 20%; height: 100%;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(255,45,155,0.30), rgba(255,45,155,0.06));
  box-shadow: 0 0 22px -4px rgba(255, 45, 155, 0.55) inset;
  transform: translate3d(0, 0, 0);
  transition: transform 0.42s var(--bb-ease);
  pointer-events: none;
}
.bb-dock__btn {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.35rem 0.1rem;
  border: 0;
  background: none;
  color: var(--bb-mist);
  font-family: var(--bb-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s var(--bb-ease);
}
.bb-dock__btn svg { width: 21px; height: 21px; }
.bb-dock__btn.is-active { color: #fff; }
.bb-dock__btn.is-active svg { color: var(--bb-magenta-hi); filter: drop-shadow(0 0 6px rgba(255,45,155,0.75)); }

/* mobile top bar */
.bb-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--bb-top-h);
  padding-inline: var(--bb-gut);
  background: rgba(4, 16, 26, 0.9);
  border-bottom: 1px solid var(--bb-line);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.bb-topbar .bb-brand__mark { width: 2.15rem; height: 2.15rem; }
.bb-topbar .bb-brand__name { font-size: 0.92rem; }
.bb-topbar__cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.6rem; padding: 0 1rem;
  border-radius: 999px;
  background: var(--bb-magenta);
  color: #12030b;
  font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(255,45,155,0.9);
}

/* full-screen sheet opened by the dock's More tab */
.bb-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  padding: calc(1.4rem + env(safe-area-inset-top)) var(--bb-gut)
           calc(var(--bb-dock-h) + 1.6rem + env(safe-area-inset-bottom));
  background: rgba(4, 16, 26, 0.97);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  opacity: 0;
  transition: opacity 0.32s var(--bb-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bb-sheet.is-open { display: flex; }
.bb-sheet.is-shown { opacity: 1; }
.bb-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.bb-sheet__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem;
  border: 1px solid var(--bb-line); border-radius: 50%;
  background: none; color: var(--bb-ink); cursor: pointer;
}
.bb-sheet__links { display: flex; flex-direction: column; gap: 0.15rem; }
.bb-sheet__links a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--bb-line-soft);
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
  color: var(--bb-ink);
}
.bb-sheet__links a span { font-family: var(--bb-hud); font-size: 0.62rem; letter-spacing: 0.24em; color: var(--bb-cyan); }
.bb-sheet__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.6rem; }

/* --------------------------------------------------------------------------
   8. HERO — scroll-driven stage
   -------------------------------------------------------------------------- */
/* THE DIVE
   One sticky stage, one scroll variable (--bb-p, 0 to 1), three beats of copy.
   Layer order is deliberate and load-bearing:
     0 sky · 1 ship · 2 veil · 3 wave · 4 captain · 5 deepen · 6 copy · 7 gauge
   The copy is last so nothing can ever draw over the text. */
.bb-hero {
  position: relative;
  height: 280vh;                 /* three-beat runway */
  background: var(--bb-abyss);
}
.bb-hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  display: grid;
  place-items: center;
  contain: paint;
}
.bb-hero__layer {
  position: absolute;
  inset: -6% -4%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
}
.bb-hero__sky {
  z-index: 0;
  background-image: url("../img/hero-sky.jpg");
  filter: saturate(1.12) contrast(1.06);
  transform: translate3d(0, calc(var(--bb-p, 0) * 12%), 0) scale(calc(1 + var(--bb-p, 0) * 0.2));
}
/* The scrim protects the copy column and leaves the right of the sea open, so
   the bioluminescent art is part of the composition rather than a dark texture. */
.bb-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(105% 76% at 76% 22%, rgba(255, 45, 155, 0.14), transparent 60%),
    linear-gradient(97deg,
      rgba(4, 16, 26, 0.95) 0%,
      rgba(4, 16, 26, 0.86) 26%,
      rgba(4, 16, 26, 0.34) 54%,
      rgba(4, 16, 26, 0.08) 78%,
      rgba(4, 16, 26, 0.18) 100%),
    linear-gradient(180deg,
      rgba(4, 16, 26, 0.62) 0%,
      rgba(4, 16, 26, 0.06) 24%,
      rgba(4, 16, 26, 0.06) 58%,
      rgba(4, 16, 26, 0.72) 88%,
      var(--bb-abyss) 100%);
  pointer-events: none;
}
/* the ship sails right to left across the whole dive, growing and heeling over */
.bb-hero__ship {
  position: absolute;
  z-index: 1;
  right: -7%;
  top: 40%;
  width: clamp(20rem, 42vw, 48rem);
  will-change: transform;
  transform: translate3d(calc(var(--bb-p, 0) * -62%), calc(-50% + var(--bb-p, 0) * -5%), 0)
             rotate(calc(var(--bb-p, 0) * -7deg))
             scale(calc(1 + var(--bb-p, 0) * 0.24));
  filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.72));
  pointer-events: none;
}
.bb-hero__ship img { width: 100%; }

/* the water closes over the scene as the dive deepens */
.bb-hero__deepen {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(120% 92% at 50% 46%, rgba(4, 16, 26, 0.10), rgba(4, 16, 26, 0.92) 76%),
    linear-gradient(180deg, rgba(4, 16, 26, 0.45), rgba(4, 16, 26, 0.9));
  opacity: calc(var(--bb-p, 0) * 0.88);
  pointer-events: none;
}

/* ---- the copy stack: three beats sharing one grid cell ------------------ */
.bb-hero__inner {
  position: relative;
  z-index: 6;
  display: grid;
  align-items: center;
  width: 100%;
  max-width: var(--bb-max);
  margin-inline: auto;
  padding: calc(var(--bb-header-h) + 1rem) var(--bb-gut) 21vh;
}
.bb-hero__phase {
  grid-area: 1 / 1;
  will-change: transform, opacity;
  pointer-events: none;
}
/* only the beat you are actually reading can be clicked */
.bb-hero[data-bb-beat="1"] .bb-hero__phase--1,
.bb-hero[data-bb-beat="2"] .bb-hero__phase--2,
.bb-hero[data-bb-beat="3"] .bb-hero__phase--3 { pointer-events: auto; }

.bb-hero__phase--1 {
  justify-self: start;
  max-width: 44rem;
  opacity: calc(1.08 - var(--bb-p, 0) * 4);
  transform: translate3d(0, calc(var(--bb-p, 0) * -24vh), 0);
}
/* Beats two and three sit over open water with the ship behind them, so each
   carries its own soft scrim. The ship stays readable; the words stay legible. */
.bb-hero__phase--2,
.bb-hero__phase--3 { position: relative; isolation: isolate; }
.bb-hero__phase--2::before,
.bb-hero__phase--3::before {
  content: "";
  position: absolute;
  inset: -18% -16%;
  z-index: -1;
  background: radial-gradient(closest-side,
    rgba(4, 16, 26, 0.88),
    rgba(4, 16, 26, 0.66) 58%,
    rgba(4, 16, 26, 0) 100%);
  pointer-events: none;
}

.bb-hero__phase--2 {
  justify-self: center;
  text-align: center;
  max-width: 46rem;
  opacity: min((var(--bb-p, 0) - 0.28) * 7, (0.70 - var(--bb-p, 0)) * 7);
  transform: translate3d(0, calc(18vh - var(--bb-p, 0) * 40vh), 0);
}
.bb-hero__phase--3 {
  justify-self: center;
  text-align: center;
  max-width: 42rem;
  opacity: calc((var(--bb-p, 0) - 0.64) * 7);
  transform: translate3d(0, calc(26vh - var(--bb-p, 0) * 28vh), 0);
}

.bb-hero__title {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: var(--bb-t-hero);
  line-height: var(--bb-display-lh);
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
}
.bb-hero__title .bb-hero__l { display: block; }
.bb-hero__title .bb-hero__soft {
  display: block;
  font-family: var(--bb-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.85vw, 1.6rem);
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bb-mist);
  margin-bottom: 0.62em;
}
.bb-hero__title .bb-hero__hit {
  color: var(--bb-magenta);
  font-style: italic;
  text-shadow: 0 0 46px rgba(255, 45, 155, 0.45);
}
.bb-hero__sub {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: var(--bb-t-lead);
  line-height: 1.66;
  color: var(--bb-ink);
  opacity: 0.88;
}
.bb-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; max-width: 40rem; }
.bb-hero__facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.45rem; max-width: 40rem; }

/* beats two and three */
.bb-hero__big {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: var(--bb-t-big);
  line-height: 1.02;
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
  text-wrap: balance;
}
.bb-hero__big em { font-style: italic; color: var(--bb-cyan); }
.bb-hero__big b  { font-weight: inherit; font-style: italic; color: var(--bb-magenta); }
.bb-hero__note {
  margin-top: 1.35rem;
  margin-inline: auto;
  max-width: 46ch;
  font-size: var(--bb-t-lead);
  line-height: 1.7;
  color: var(--bb-mist);
}
.bb-hero__phase--2 .bb-chips,
.bb-hero__phase--3 .bb-hero__cta { justify-content: center; margin-inline: auto; }
.bb-hero__phase--2 .bb-chips { margin-top: 1.9rem; justify-content: center; }

/* ---- the sea ----------------------------------------------------------- */
.bb-hero__wave {
  position: absolute;
  left: -6%; right: -6%;
  bottom: -10%;
  z-index: 3;
  will-change: transform;
  transform: translate3d(0, calc(var(--bb-p, 0) * -16%), 0) scale(calc(1 + var(--bb-p, 0) * 0.14));
  pointer-events: none;
}
.bb-hero__wave img { width: 100%; }

.bb-hero__captain {
  position: absolute;
  z-index: 4;
  right: 3%;
  bottom: -3%;
  width: clamp(10rem, 17.5vw, 21rem);
  will-change: transform;
  transform: translate3d(calc(var(--bb-p, 0) * 10%), calc(var(--bb-p, 0) * 34%), 0);
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

/* ---- depth gauge: makes the scroll legible ------------------------------ */
.bb-hero__gauge {
  position: absolute;
  z-index: 7;
  right: clamp(0.85rem, 2.1vw, 2.1rem);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.bb-hero__rail {
  position: relative;
  width: 2px;
  height: clamp(6rem, 15vh, 11rem);
  background: rgba(234, 247, 248, 0.14);
  border-radius: 2px;
}
.bb-hero__rail::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--bb-p, 0) * 100%);
  background: linear-gradient(180deg, rgba(41, 240, 220, 0.2), var(--bb-cyan));
  border-radius: 2px;
}
.bb-hero__rail i {
  position: absolute;
  left: 50%;
  top: calc(var(--bb-p, 0) * 100%);
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--bb-cyan);
  box-shadow: 0 0 14px 2px rgba(41, 240, 220, 0.65);
}
.bb-hero__gauge .bb-hud { color: var(--bb-mist); letter-spacing: 0.18em; }
.bb-hero__gauge b { color: var(--bb-cyan); font-weight: 700; }

.bb-hero__scroll {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 1.7rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  opacity: calc(1 - var(--bb-p, 0) * 5);
}
.bb-hero__scroll .bb-hud { color: var(--bb-mist); letter-spacing: 0.3em; }
.bb-hero__depth {
  position: relative;
  width: 2px; height: 2.6rem;
  background: rgba(234, 247, 248, 0.16);
  overflow: hidden;
  border-radius: 2px;
}
.bb-hero__depth::after {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 45%;
  background: var(--bb-cyan);
  border-radius: 2px;
  animation: bb-sound 2.1s var(--bb-ease-io) infinite;
}
@keyframes bb-sound {
  0%   { transform: translateY(-110%); }
  60%  { transform: translateY(230%); }
  100% { transform: translateY(230%); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-hero__depth::after { animation: none; transform: translateY(30%); }
}

/* --------------------------------------------------------------------------
   9. MANIFEST — two column intro
   -------------------------------------------------------------------------- */
.bb-manifest { background: var(--bb-deep); }
.bb-manifest__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.bb-manifest__rule { margin-top: 1.9rem; color: var(--bb-cyan); opacity: 0.75; max-width: 17rem; }
.bb-manifest__aside {
  display: grid;
  gap: 1.35rem;
  position: relative;
  padding: clamp(1.4rem, 2.5vw, 2.3rem);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  background: rgba(4, 16, 26, 0.66);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  box-shadow: 0 26px 60px -38px rgba(0, 0, 0, 0.95);
}
.bb-manifest__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }
@media (min-width: 62rem) {
  .bb-manifest__grid { grid-template-columns: 1.02fr 1.18fr; }
}

/* --------------------------------------------------------------------------
   10. BOUNTY — objectives orbiting the chest
   -------------------------------------------------------------------------- */
.bb-bounty { background: var(--bb-tide); overflow: hidden; }
.bb-bounty__head { text-align: center; display: grid; justify-items: center; gap: 1.15rem; }
.bb-bounty__head .bb-lead { text-align: center; max-width: 48ch; }

.bb-bounty__stage {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
}
.bb-bounty__chest {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 0.5rem;
}
.bb-bounty__chest img {
  width: clamp(15rem, 38vw, 34rem);
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.6));
  animation: bb-bob 7s var(--bb-ease-io) infinite;
}
.bb-bounty__chest::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(78%, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,240,220,0.30), transparent 66%);
  filter: blur(26px);
}
@keyframes bb-bob {
  0%, 100% { transform: translate3d(0, -1.1%, 0); }
  50%      { transform: translate3d(0, 1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) { .bb-bounty__chest img { animation: none; } }

.bb-obj {
  position: relative;
  display: block;
  padding: clamp(1.4rem, 1.7vw, 1.75rem);
  border: 1px solid var(--bb-line-soft);
  border-radius: var(--bb-radius-s);
  background: rgba(4, 16, 26, 0.5);
  transition: border-color 0.35s var(--bb-ease), background-color 0.35s var(--bb-ease), box-shadow 0.35s var(--bb-ease);
}
.bb-obj:hover, .bb-obj:focus-visible {
  border-color: rgba(41, 240, 220, 0.55);
  background: rgba(41, 240, 220, 0.07);
  box-shadow: 0 18px 40px -26px rgba(41, 240, 220, 0.7);
}
.bb-obj__ico { color: var(--bb-cyan); margin-bottom: 0.95rem; }
.bb-obj h3 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: clamp(1.12rem, 1.45vw, 1.3rem);
  line-height: 1.14;
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}
.bb-obj p { margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.65; color: var(--bb-mist); }
.bb-obj__go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.15rem;
  font-family: var(--bb-hud); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--bb-magenta-hi);
}
.bb-obj__go svg { transition: transform 0.35s var(--bb-ease); }
.bb-obj:hover .bb-obj__go svg { transform: translateX(4px); }

@media (min-width: 60rem) {
  .bb-bounty__stage {
    grid-template-columns: 1fr minmax(20rem, 1.15fr) 1fr;
    grid-template-rows: auto auto;
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
    align-items: center;
  }
  .bb-bounty__chest { grid-column: 2; grid-row: 1 / span 2; }
  .bb-obj--1 { grid-column: 1; grid-row: 1; text-align: right; }
  .bb-obj--2 { grid-column: 3; grid-row: 1; }
  .bb-obj--3 { grid-column: 1; grid-row: 2; text-align: right; }
  .bb-obj--4 { grid-column: 3; grid-row: 2; }
  .bb-obj--1 .bb-obj__go, .bb-obj--3 .bb-obj__go { flex-direction: row-reverse; }
  .bb-obj--1 .bb-obj__ico, .bb-obj--3 .bb-obj__ico { display: flex; justify-content: flex-end; }
  .bb-obj--1 .bb-obj__go svg, .bb-obj--3 .bb-obj__go svg { transform: rotate(180deg); }
  .bb-obj--1:hover .bb-obj__go svg, .bb-obj--3:hover .bb-obj__go svg { transform: rotate(180deg) translateX(4px); }
}

/* --------------------------------------------------------------------------
   11. SERVICES — deck plan, deliberately unequal panels
   -------------------------------------------------------------------------- */
.bb-services { background: var(--bb-abyss); }
.bb-services__head { display: grid; gap: 1.2rem; max-width: 46rem; }
.bb-deck {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
  grid-template-columns: minmax(0, 1fr);
}
.bb-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  border: 1px solid var(--bb-line-soft);
  border-radius: var(--bb-radius);
  background: var(--bb-deep);
  isolation: isolate;
  transition: border-color 0.4s var(--bb-ease), box-shadow 0.4s var(--bb-ease);
}
/* No `overflow: hidden` here on purpose: it would make the panel a scroll
   container, whose automatic minimum size is zero, and the grid row would then
   size to the shorter neighbour and clip this card's own content. Everything
   inside is positioned to stay in the box instead. */
.bb-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(90% 70% at 88% 8%, rgba(41,240,220,0.16), transparent 62%);
  opacity: 0.55;
  transition: opacity 0.45s var(--bb-ease);
}
.bb-svc:hover { border-color: rgba(41, 240, 220, 0.42); box-shadow: 0 26px 56px -34px rgba(41,240,220,0.55); }
.bb-svc:hover::before { opacity: 1; }
.bb-svc--pink::before { background: radial-gradient(90% 70% at 88% 8%, rgba(255,45,155,0.20), transparent 62%); }
.bb-svc--pink:hover { border-color: rgba(255, 45, 155, 0.45); box-shadow: 0 26px 56px -34px rgba(255,45,155,0.6); }
.bb-svc--brass::before { background: radial-gradient(90% 70% at 88% 8%, rgba(245,184,69,0.18), transparent 62%); }
.bb-svc--brass:hover { border-color: rgba(245, 184, 69, 0.45); box-shadow: 0 26px 56px -34px rgba(245,184,69,0.55); }

.bb-svc__ico { width: 3.4rem; height: 3.4rem; color: var(--bb-cyan); }
.bb-svc--pink .bb-svc__ico { color: var(--bb-magenta-hi); }
.bb-svc--brass .bb-svc__ico { color: var(--bb-brass); }
.bb-svc h3 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  line-height: 1.06;
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
}
.bb-svc p { color: var(--bb-mist); max-width: 44ch; line-height: 1.7; }
.bb-svc .bb-chips { margin-top: auto; padding-top: 0.6rem; }
.bb-svc__price {
  font-family: var(--bb-hud);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bb-brass);
}
.bb-svc__art {
  position: absolute;
  right: 3%;
  top: 5%;
  width: 30%;
  max-width: 12rem;
  opacity: 0.92;
  pointer-events: none;
  z-index: -1;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.6));
}
@media (min-width: 56rem) {
  .bb-deck { grid-template-columns: repeat(12, 1fr); }
  .bb-svc--a { grid-column: span 7; min-height: 24rem; }
  .bb-svc--b { grid-column: span 5; }
  .bb-svc--c { grid-column: span 5; }
  .bb-svc--d { grid-column: span 7; min-height: 21rem; }
}

/* --------------------------------------------------------------------------
   12. VOYAGE LOG — the light passage
   -------------------------------------------------------------------------- */
.bb-voyage {
  background: var(--bb-foam);
  color: var(--bb-ink-dk);
}
.bb-voyage .bb-h2 { color: var(--bb-ink-dk); }
.bb-voyage .bb-h2 .bb-h2__soft { color: var(--bb-mist-dk); }
.bb-voyage .bb-h2 .bb-hit { color: var(--bb-magenta-lo); }
.bb-voyage .bb-lead { color: var(--bb-mist-dk); }
.bb-voyage .bb-hud { color: var(--bb-magenta-lo); }
.bb-voyage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(rgba(6, 34, 44, 0.10) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
}
.bb-voyage__head { display: grid; gap: 1.2rem; max-width: 44rem; }
.bb-voyage__compass {
  position: absolute;
  right: clamp(-4rem, -2vw, 0rem);
  top: clamp(1rem, 4vw, 4rem);
  width: clamp(9rem, 20vw, 20rem);
  opacity: 0.95;
  pointer-events: none;
  animation: bb-spin 44s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bb-voyage__compass { animation: none; } }

.bb-log {
  position: relative;
  margin-top: clamp(2.6rem, 5vw, 4.2rem);
  display: grid;
  gap: 1.6rem;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: bb-step;
}
.bb-log__item {
  position: relative;
  padding-left: 3.4rem;
}
.bb-log__item::before {
  counter-increment: bb-step;
  content: counter(bb-step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--bb-ink-dk);
  background: var(--bb-foam);
  font-family: var(--bb-hud);
  font-size: 0.76rem; font-weight: 700;
  color: var(--bb-ink-dk);
}
.bb-log__item::after {
  content: "";
  position: absolute;
  left: 1.22rem; top: 2.8rem; bottom: -1.6rem;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--bb-ink-dk) 0 6px, transparent 6px 12px);
  opacity: 0.35;
}
.bb-log__item:last-child::after { display: none; }
.bb-log__item h3 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: clamp(1.15rem, 1.4vw, 1.32rem);
  text-transform: uppercase;
  line-height: 1.14;
  letter-spacing: var(--bb-display-ls);
}
.bb-log__item p { margin-top: 0.55rem; color: var(--bb-mist-dk); font-size: 0.92rem; line-height: 1.65; max-width: 40ch; }
.bb-log__t {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--bb-hud);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bb-magenta-lo);
}
@media (min-width: 60rem) {
  .bb-log { grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
  .bb-log__item { padding-left: 0; padding-top: 3.6rem; }
  .bb-log__item::before { top: 0; }
  .bb-log__item::after {
    left: 2.8rem; right: -1.4rem; top: 1.22rem; bottom: auto;
    width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, var(--bb-ink-dk) 0 6px, transparent 6px 12px);
  }
}
.bb-voyage__foot { margin-top: clamp(2.4rem, 4vw, 3.4rem); display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

/* --------------------------------------------------------------------------
   13. WORK — sample builds
   -------------------------------------------------------------------------- */
.bb-work { background: var(--bb-abyss); }
.bb-work__head { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: flex-end; justify-content: space-between; }
.bb-work__note {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border: 1px dashed rgba(245, 184, 69, 0.5);
  border-radius: 999px;
  font-family: var(--bb-hud); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bb-brass);
}
.bb-work__grid {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.8rem);
  grid-template-columns: minmax(0, 1fr);
}
.bb-case { position: relative; display: block; }
.bb-case__frame {
  position: relative;
  border: 1px solid var(--bb-line-soft);
  border-radius: var(--bb-radius-s);
  overflow: hidden;
  background: var(--bb-deep);
  transition: border-color 0.4s var(--bb-ease), box-shadow 0.4s var(--bb-ease);
}
.bb-case:hover .bb-case__frame {
  border-color: rgba(41, 240, 220, 0.5);
  box-shadow: 0 28px 60px -34px rgba(41, 240, 220, 0.65);
}
.bb-case__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--bb-line-soft);
  background: rgba(4, 16, 26, 0.75);
}
.bb-case__dots { display: flex; gap: 0.28rem; }
.bb-case__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(234,247,248,0.22); }
.bb-case__dots i:first-child { background: var(--bb-magenta); }
.bb-case__dots i:nth-child(2) { background: var(--bb-brass); }
.bb-case__dots i:last-child { background: var(--bb-cyan); }
.bb-case__url { font-family: var(--bb-hud); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--bb-mist); }
.bb-case__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.bb-case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bb-case__tag {
  position: absolute; left: 0.7rem; bottom: 0.7rem;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  background: rgba(4, 16, 26, 0.88);
  border: 1px solid rgba(245, 184, 69, 0.6);
  font-family: var(--bb-hud); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bb-brass);
}
.bb-case__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.95rem; }
.bb-case__meta h3 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: clamp(1.15rem, 1.4vw, 1.32rem);
  line-height: 1.12;
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
}
.bb-case__meta span { font-family: var(--bb-hud); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bb-cyan); white-space: nowrap; }
.bb-case p { margin-top: 0.55rem; font-size: 0.88rem; line-height: 1.65; color: var(--bb-mist); }
@media (min-width: 52rem) { .bb-work__grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   14. BOUNTY BOARD — figures as pinned notices
   -------------------------------------------------------------------------- */
.bb-board { background: var(--bb-tide); overflow: hidden; }
/* The beast surfaces from the murk: shown from the head down, faded into the
   waterline seam below so it never reads as a cropped rectangle. */
.bb-board__kraken {
  position: absolute;
  left: 50%; top: 34%;
  width: min(94%, 42rem);
  transform: translateX(-50%);
  opacity: 0.42;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 82%, transparent 100%);
}
.bb-board__grid {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  grid-template-columns: repeat(2, 1fr);
}
.bb-note {
  position: relative;
  padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-s);
  background: rgba(4, 16, 26, 0.66);
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bb-note::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bb-magenta);
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(255, 45, 155, 0.8);
}
.bb-note__n {
  display: block;
  font-family: var(--bb-hud);
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bb-cyan);
}
.bb-note__n small { font-size: 0.42em; color: var(--bb-brass); }
.bb-note__l {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--bb-mist);
  line-height: 1.55;
  text-wrap: balance;
}
@media (min-width: 56rem) { .bb-board__grid { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   15. PRICING
   -------------------------------------------------------------------------- */
.bb-pricing { background: var(--bb-deep); }
.bb-pricing__head { display: grid; gap: 1.15rem; max-width: 48rem; }
.bb-plans {
  margin-top: clamp(2.4rem, 4.6vw, 3.8rem);
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.bb-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border: 1px solid var(--bb-line-soft);
  border-radius: var(--bb-radius);
  background: rgba(4, 16, 26, 0.62);
  transition: border-color 0.4s var(--bb-ease), box-shadow 0.4s var(--bb-ease);
}
.bb-plan:hover { border-color: rgba(41, 240, 220, 0.42); }
.bb-plan__name {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: 1.32rem;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: var(--bb-display-ls);
}
/* Reserves three lines so a longer tier description cannot push its own price,
   badge, feature list and button out of line with the cards beside it. */
.bb-plan__for {
  margin-top: 0.5rem;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--bb-mist);
  min-height: 4.65em;
}
.bb-plan__price {
  display: flex; align-items: flex-end; gap: 0.28rem;
  flex-wrap: nowrap;
  margin-top: 1.2rem;
  font-family: var(--bb-hud);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bb-ink);
}
.bb-plan__from {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bb-mist); padding-bottom: 0.58rem;
}
.bb-plan__cur { font-size: 1.15rem; font-weight: 600; color: var(--bb-mist); padding-bottom: 0.42rem; }
.bb-plan__amt { font-size: clamp(2.1rem, 3.6vw, 2.8rem); font-weight: 700; line-height: 1; }
.bb-plan__per { font-size: 0.75rem; color: var(--bb-mist); padding-bottom: 0.42rem; }
/* A badge, so it centres and holds one height across all four cards. Without a
   min-height, a tier whose text wraps to two lines pushes its feature list down
   and the row stops lining up. */
.bb-plan__then {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.95rem;
  margin-top: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--bb-radius-s);
  background: rgba(245, 184, 69, 0.10);
  border: 1px solid rgba(245, 184, 69, 0.28);
  font-family: var(--bb-hud);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  color: var(--bb-brass);
}
.bb-plan__list { margin-top: 1.45rem; display: grid; gap: 0.72rem; }
.bb-plan__list li { display: flex; gap: 0.62rem; align-items: flex-start; font-size: 0.87rem; line-height: 1.5; color: var(--bb-ink); opacity: 0.9; }
.bb-plan__list svg { flex: 0 0 auto; margin-top: 0.28rem; color: var(--bb-cyan); }
/* The wrapper is the flex child, so the auto margin has to live here — on the
   button it had no free space to consume and the tiers ended up ragged. */
.bb-plan__cta { margin-top: auto; padding-top: 1.5rem; }

.bb-plan--best {
  border-color: rgba(255, 45, 155, 0.55);
  background:
    linear-gradient(180deg, rgba(255,45,155,0.16), rgba(255,45,155,0.02) 46%),
    rgba(4, 16, 26, 0.72);
  box-shadow: 0 30px 70px -40px rgba(255, 45, 155, 0.9);
}
.bb-plan--best:hover { border-color: var(--bb-magenta); }
.bb-plan--best .bb-plan__list svg { color: var(--bb-magenta-hi); }
.bb-plan__flag {
  position: absolute;
  top: -0.85rem; left: clamp(1.5rem, 2.4vw, 2.1rem);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--bb-magenta);
  color: #12030b;
  font-family: var(--bb-hud); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  box-shadow: 0 8px 22px -10px rgba(255, 45, 155, 0.95);
}
@media (min-width: 50rem) { .bb-plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .bb-plans { grid-template-columns: repeat(4, 1fr); } }

.bb-hosting {
  margin-top: clamp(1.2rem, 2vw, 1.6rem);
  display: grid;
  gap: 1.4rem;
  align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid rgba(245, 184, 69, 0.34);
  border-radius: var(--bb-radius);
  background:
    linear-gradient(100deg, rgba(245,184,69,0.11), rgba(245,184,69,0) 58%),
    rgba(4, 16, 26, 0.6);
}
.bb-hosting h3 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
}
.bb-hosting > div p { margin-top: 0.65rem; color: var(--bb-mist); max-width: 52ch; font-size: 0.92rem; line-height: 1.68; }
.bb-hosting .bb-hosting__price {
  margin: 0;
  font-family: var(--bb-hud);
  font-weight: 700;
  color: var(--bb-brass);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bb-hosting .bb-hosting__price small {
  font-size: 0.3em; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bb-mist); display: block; margin-top: 0.45rem; font-weight: 600;
}
@media (min-width: 56rem) { .bb-hosting { grid-template-columns: 1fr auto auto; gap: 2rem; } }
.bb-pricing__fine { margin-top: 1.4rem; font-size: 0.79rem; color: var(--bb-mist); opacity: 0.8; }

/* --------------------------------------------------------------------------
   16. CREW
   -------------------------------------------------------------------------- */
.bb-crew { background: var(--bb-abyss); overflow: hidden; }
.bb-crew__grid { display: grid; gap: clamp(2rem, 4vw, 3.4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
/* No glass box here. This column is heading plus two paragraphs plus a pull
   quote plus chips — panelled, it becomes a full-height wall rather than a
   card. The section carries a soft directional scrim instead, so the copy
   stays readable with no visible edges. */
.bb-crew__copy { display: grid; gap: 1.25rem; }
.bb-crew::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(4, 16, 26, 0.88) 0%,
    rgba(4, 16, 26, 0.72) 34%,
    rgba(4, 16, 26, 0.18) 62%,
    rgba(4, 16, 26, 0) 78%);
  pointer-events: none;
}
.bb-crew__art { position: relative; }
.bb-crew__art img { width: 100%; filter: drop-shadow(0 30px 44px rgba(0,0,0,0.75)); }
.bb-crew__art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 4% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,45,155,0.28), transparent 68%);
  filter: blur(30px);
}
.bb-crew__quote {
  margin-top: 0.5rem;
  padding: 1.2rem 1.35rem;
  border-left: 1px solid var(--bb-cyan);
  background: rgba(41, 240, 220, 0.05);
  border-radius: 0 var(--bb-radius-s) var(--bb-radius-s) 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--bb-ink);
}
.bb-crew__quote b { color: var(--bb-cyan); font-weight: 600; }
@media (min-width: 62rem) { .bb-crew__grid { grid-template-columns: 1.05fr 0.95fr; } }

/* --------------------------------------------------------------------------
   17. CTA
   -------------------------------------------------------------------------- */
.bb-cta {
  position: relative;
  background: var(--bb-magenta);
  color: #12030b;
  overflow: hidden;
}
.bb-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(18, 3, 11, 0.16) 1.4px, transparent 1.4px);
  background-size: 15px 15px;
}
.bb-cta__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
.bb-cta h2 {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: clamp(2rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: var(--bb-display-ls);
}
.bb-cta h2 em { font-style: normal; color: #fff; }
.bb-cta p { margin-top: 1.1rem; max-width: 44ch; font-size: var(--bb-t-lead); color: #33091a; }
.bb-cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.bb-cta .bb-btn--dark { background: #12030b; color: #ffe9f4; }
.bb-cta .bb-btn--dark:hover { background: #2b0918; box-shadow: 0 0 0 5px rgba(18,3,11,0.16); }
.bb-cta .bb-btn--cyan { color: #05171a; }
.bb-cta__snail { justify-self: center; width: clamp(12rem, 26vw, 24rem); }
.bb-cta__snail img { filter: drop-shadow(0 26px 34px rgba(18, 3, 11, 0.45)); animation: bb-bob 6s var(--bb-ease-io) infinite; }
@media (prefers-reduced-motion: reduce) { .bb-cta__snail img { animation: none; } }
.bb-cta__fine { margin-top: 1.5rem; font-family: var(--bb-hud); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #3a0c1d; }
@media (min-width: 62rem) { .bb-cta__grid { grid-template-columns: 1.25fr 0.75fr; } }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.bb-footer { background: var(--bb-abyss); padding-top: clamp(3.4rem, 6vw, 5.5rem); }
.bb-footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
.bb-footer__about { display: grid; gap: 1.05rem; max-width: 34rem; }
.bb-footer__about p { color: var(--bb-mist); font-size: 0.92rem; }
.bb-footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
.bb-footer h4 {
  font-family: var(--bb-hud);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bb-cyan);
  margin-bottom: 0.9rem;
}
.bb-footer__cols ul { display: grid; gap: 0.55rem; }
.bb-footer__cols a { font-size: 0.9rem; color: var(--bb-mist); transition: color 0.3s var(--bb-ease); }
.bb-footer__cols a:hover { color: var(--bb-ink); }
.bb-social { display: flex; gap: 0.5rem; }
.bb-social a {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--bb-line-soft);
  border-radius: 50%;
  color: var(--bb-mist);
  transition: color 0.3s var(--bb-ease), border-color 0.3s var(--bb-ease), background-color 0.3s var(--bb-ease);
}
.bb-social a:hover { color: var(--bb-cyan); border-color: var(--bb-cyan); background: rgba(41,240,220,0.08); }
.bb-footer__legal {
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  padding: 1.4rem 0 calc(1.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bb-line-soft);
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: center; justify-content: space-between;
  font-size: 0.78rem; color: var(--bb-mist);
}
@media (min-width: 62rem) {
  .bb-footer__grid { grid-template-columns: 1.2fr 1fr; }
  .bb-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   18b. LEGAL MODALS
   -------------------------------------------------------------------------- */
.bb-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  align-items: center;
}
.bb-legal-link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--bb-body);
  font-size: 0.78rem;
  color: var(--bb-mist);
  cursor: pointer;
  transition: color 0.3s var(--bb-ease), border-color 0.3s var(--bb-ease);
}
.bb-legal-link:hover,
.bb-legal-link:focus-visible { color: var(--bb-cyan); border-bottom-color: var(--bb-cyan); }

/* Visibility is carried by the `hidden` attribute alone — never by opacity or
   a transition. A dialog whose readability depends on an animation finishing is
   a dialog that disappears whenever frames are throttled. The only animated
   property is the panel's transform, which degrades to a harmless 14px offset. */
.bb-legal[hidden] { display: none; }
.bb-legal {
  position: fixed;
  inset: 0;
  /* above the Theme Builder header wrapper, which sits at 90000 */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.6rem, 3vw, 2.5rem);
}
.bb-legal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 13, 0.8);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
}
.bb-legal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(56rem, 100%);
  max-height: min(88vh, 54rem);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  background:
    linear-gradient(180deg, rgba(41, 240, 220, 0.07), rgba(41, 240, 220, 0) 34%),
    var(--bb-deep);
  box-shadow: 0 44px 96px -44px rgba(0, 0, 0, 1);
  overflow: hidden;
  transform: translate3d(0, 14px, 0);
  transition: transform 0.4s var(--bb-ease);
}
.bb-legal.is-shown .bb-legal__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bb-legal__panel { transform: none; transition: none; }
}

.bb-legal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.2rem, 2.6vw, 2.2rem) 1rem;
  border-bottom: 1px solid var(--bb-line-soft);
}
.bb-legal__title {
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: var(--bb-display-ls);
  text-transform: uppercase;
  color: var(--bb-ink);
}
.bb-legal__stamp { display: block; margin-top: 0.5rem; }
.bb-legal__close {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--bb-line);
  border-radius: 50%;
  background: none;
  color: var(--bb-ink);
  cursor: pointer;
  transition: color 0.3s var(--bb-ease), border-color 0.3s var(--bb-ease), background-color 0.3s var(--bb-ease);
}
.bb-legal__close:hover,
.bb-legal__close:focus-visible {
  color: var(--bb-magenta-hi);
  border-color: var(--bb-magenta);
  background: rgba(255, 45, 155, 0.1);
}

.bb-legal__body {
  flex: 1 1 auto;
  min-height: 0;          /* a flex child will not shrink below its content without this */
  padding: clamp(1.2rem, 2.6vw, 2.2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(41, 240, 220, 0.35) transparent;
  color: var(--bb-mist);
  font-size: 0.92rem;
  line-height: 1.75;
}
.bb-legal__body h4 {
  margin: 1.9rem 0 0.6rem;
  font-family: var(--bb-display);
  font-weight: var(--bb-display-w);
  font-size: 0.98rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--bb-cyan);
}
.bb-legal__body h4:first-child { margin-top: 0; }
.bb-legal__body p { margin-bottom: 0.85rem; color: var(--bb-mist); }
.bb-legal__body strong { color: var(--bb-ink); font-weight: 600; }
.bb-legal__body ul { margin: 0 0 1rem; display: grid; gap: 0.45rem; }
.bb-legal__body li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--bb-mist);
}
.bb-legal__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--bb-cyan);
  transform: rotate(45deg);
}
.bb-legal__body::-webkit-scrollbar { width: 6px; }
.bb-legal__body::-webkit-scrollbar-track { background: transparent; }
.bb-legal__body::-webkit-scrollbar-thumb {
  background: rgba(41, 240, 220, 0.32);
  border-radius: 6px;
}
.bb-legal__body::-webkit-scrollbar-thumb:hover { background: rgba(41, 240, 220, 0.55); }

.bb-legal__flag {
  margin: 1.2rem 0;
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(245, 184, 69, 0.34);
  border-radius: var(--bb-radius-s);
  background: rgba(245, 184, 69, 0.08);
  color: var(--bb-ink);
  font-size: 0.88rem;
}
.bb-legal__flag strong { color: var(--bb-brass); }

.bb-legal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem clamp(1.2rem, 2.6vw, 2.2rem) clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: 1px solid var(--bb-line-soft);
  /* opaque, so the scrolling body reads as ending at the bar rather than
     fading out behind it */
  background: var(--bb-deep);
}
.bb-legal__head { background: var(--bb-deep); }
.bb-legal__foot .bb-btn { min-height: 2.9rem; padding-inline: 1.4rem; font-size: 0.87rem; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE — the mobile experience is a different composition
   -------------------------------------------------------------------------- */
@media (max-width: 63.9375rem) {
  .bb-nav { display: none; }
  .bb-topbar { display: flex; }
  .bb-dock { display: block; }
  .bb-page,
  body.bb-body #page-container { padding-bottom: calc(var(--bb-dock-h) + 1.4rem + env(safe-area-inset-bottom)); }

  .bb-hero { height: auto; }
  .bb-hero__stage {
    position: relative; height: auto; min-height: 0; display: block;
    padding-top: var(--bb-header-h); padding-bottom: 0;
  }
  /* the three beats become stacked content instead of a scroll sequence */
  .bb-hero__inner { display: block; padding-top: 0.5rem; padding-bottom: 2.6rem; }
  .bb-hero__phase {
    grid-area: auto;
    justify-self: stretch;
    max-width: none;
    text-align: left;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
  .bb-hero__phase--2 { margin-top: 3rem; }
  .bb-hero__phase--3 { display: none; }
  .bb-hero__phase--2 .bb-chips { justify-content: flex-start; }
  .bb-hero__note { margin-inline: 0; }
  .bb-hero__deepen, .bb-hero__gauge { display: none; }
  /* phones get the light variants of both full-bleed backgrounds */
  .bb-hero__sky { position: absolute; inset: 0; transform: none; background-image: url("../img/hero-sky-sm.jpg"); }
  .bb-chart-bg::before { background-image: url("../img/chart-sm.jpg"); }
  .bb-hero__ship {
    position: relative;
    right: auto; top: auto;
    width: 118%;
    margin: -6% -9% -10% -9%;
    transform: none;
  }
  .bb-hero__captain { display: none; }
  /* the waterline closes the hero; it must not ride up over the copy above it */
  .bb-hero__wave { position: relative; left: -4%; right: -4%; bottom: auto; width: 108%; transform: none; margin-top: 0; }
  .bb-hero__scroll { display: none; }
  .bb-hero__veil {
    background:
      linear-gradient(180deg, rgba(4,16,26,0.92) 0%, rgba(4,16,26,0.55) 42%, rgba(4,16,26,0.9) 82%, var(--bb-abyss) 100%),
      radial-gradient(90% 44% at 78% 12%, rgba(255,45,155,0.24), transparent 62%);
  }
  .bb-hero__title { max-width: 100%; }
  .bb-hero__cta { flex-direction: column; align-items: stretch; }
  .bb-hero__cta .bb-btn { width: 100%; }

  /* horizontal decks — swipe, like a phone app */
  .bb-swipe {
    display: flex;
    gap: 0.9rem;
    /* BOTH axes must be declared. Setting only `overflow-x: auto` makes the
       browser compute `overflow-y: auto` as well, and the deck then drifts
       up and down under your thumb instead of sliding sideways. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--bb-gut);
    /* Room above for the featured card's flag, which sits proud of the card's
       top edge, and below for the card border and its glow — with overflow-y
       hidden, anything outside this padding box is cut off for good. */
    padding-top: 1.35rem;
    padding-bottom: 2rem;
    /* margin-bottom only. `margin-block` would reset margin-top to 0 and wipe
       the deck's own top spacing, pulling the featured card's flag up into the
       paragraph above it. */
    margin-bottom: -0.6rem;
    margin-inline: calc(var(--bb-gut) * -1);
  }
  .bb-swipe::-webkit-scrollbar { display: none; }
  .bb-swipe > * { flex: 0 0 84%; scroll-snap-align: center; }
  .bb-plans.bb-swipe > * { flex: 0 0 80%; }
  /* lead the phone with the best seller instead of the cheapest tier */
  .bb-plans.bb-swipe .bb-plan--best { order: -1; }
  .bb-work__grid.bb-swipe > * { flex: 0 0 82%; }

  .bb-dots { display: flex; }
  /* flush, not bleeding — older iOS Safari ignores `overflow-x: clip`, and this
     was the element dragging the whole page 41px wider than the screen */
  .bb-voyage__compass { width: 8rem; opacity: 0.5; right: 0; top: 0.5rem; }
  .bb-board__grid { grid-template-columns: repeat(2, 1fr); }
  .bb-cta__snail { width: 62%; }
  .bb-crew__art { order: -1; }
  /* the copy is full width on a phone, so the scrim is even rather than raked */
  .bb-crew::after {
    background: linear-gradient(180deg, rgba(4, 16, 26, 0.62), rgba(4, 16, 26, 0.82));
  }
  .bb-footer__legal { justify-content: flex-start; }

  /* full-screen sheet on a phone, and clear of the dock */
  .bb-legal { padding: 0; }
  .bb-legal__panel {
    width: 100%;
    max-width: none;
    max-height: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    /* No entry offset here. The panel is exactly viewport height, so a stalled
       transition would leave the close button 14px below the fold. */
    transform: none;
    transition: none;
  }
  /* the dock sits behind the modal, so no allowance is needed for it */
  .bb-legal__body { padding-bottom: 1.6rem; }
  .bb-legal__head { padding-top: calc(1.2rem + env(safe-area-inset-top)); }
  .bb-legal__foot {
    flex-direction: column-reverse;   /* the action first, under the thumb */
    align-items: stretch;
    gap: 0.7rem;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
  }
  .bb-legal__foot .bb-btn { width: 100%; }
  .bb-legal__foot .bb-hud { text-align: center; font-size: 0.6rem; letter-spacing: 0.12em; }

  /* case titles stack instead of fighting the tag across a wrapped line */
  .bb-case__meta { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

@media (max-width: 30rem) {
  .bb-swipe > * { flex: 0 0 88%; }
  .bb-dock__btn { font-size: 0.58rem; }
  .bb-dock__btn svg { width: 19px; height: 19px; }
  .bb-note { padding: 1rem 0.7rem; }
}

/* Desktop only ---------------------------------------------------------- */
@media (min-width: 64rem) {
  .bb-topbar, .bb-dock, .bb-sheet { display: none !important; }
}

/* Motion off ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-bb-motion="on"] .bb-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bb-hero__sky, .bb-hero__ship, .bb-hero__wave, .bb-hero__captain { transform: none !important; }
  .bb-hero__deepen, .bb-hero__gauge { display: none; }
  .bb-hero { height: auto; }
  .bb-hero__stage { position: relative; height: auto; min-height: 0; display: block; padding-top: var(--bb-header-h); }
  .bb-hero__inner { display: block; }
  .bb-hero__phase {
    grid-area: auto; justify-self: stretch; max-width: none;
    opacity: 1 !important; transform: none !important; pointer-events: auto;
  }
  .bb-hero__phase--2, .bb-hero__phase--3 { margin-top: 3rem; }
  .bb-btn::after { display: none; }
}

/* Print ----------------------------------------------------------------- */
@media print {
  .bb-nav, .bb-dock, .bb-topbar, .bb-proclaim, .bb-sheet { display: none !important; }
  .bb-page { background: #fff; color: #000; }
}