/* BitradeX work page — rebuilt from Figma "works-bitradex" (pYerAoMQJ0vxt2FurFNnXc, node 6658:5473), 1440 × 20092.
   Black canvas (#0f0f0f) with the site's dark theme (.theme-dark: black header, white footer).
   Everything inside .bx-board is placed in Figma px (top = Figma y − 759; the intro above it is its own block) and
   js/works/bitradex.js scales the whole board with `zoom`: down below 1440, never above 1440 (wider screens keep it centred).
   Panels, phones and the brand / campaign boards are 2x webp exports in assets/works/bitradex/;
   section copy is live Geist text. The board ends 200px under the shield logo, then the outro. */

@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Same black canvas and grid as the Opinion page (css/works/opinion.css). */
.theme-dark {
  --bg: #0f0f0f;
  --shape-grid-line: #171717;    /* +8 on the background */
  --shape-grid-hover: #262626;
  --shape-grid-hover-fill: #1c1c1c;
}

:root {
  --bx-cyan: #00dcff;
  --bx-grey: #939393;
}

/* ---------- Intro (same as the Versa hero: 1440 wide, shrinks below 1440, never grows) ---------- */
.bx-intro {
  position: relative;
  width: 1440px;
  height: 672px;                 /* Figma 87 → 759 */
  margin: 0 auto;
  zoom: var(--intro-zoom, 1);
  font-family: "Geist", var(--font);
  color: #fff;
}
.bx-intro :where(h1, p) { margin: 0; }
.bx-intro img { display: block; max-width: none; }

/* ---------- Board (1440 wide, zoomed to the window) ---------- */
.bx-board {
  position: relative;
  width: 1440px;
  height: 18701px;              /* Figma 759 → 19460 (shield group bottom 19380 + 80, like the other work pages); the pager adds its own gap */
  margin: 0 auto;
  zoom: var(--board-zoom, 1);
  font-family: "Geist", var(--font);
  color: #fff;
}
.bx-board :where(h1, h2, h3, p, figure) { margin: 0; }
.bx-board img { display: block; max-width: none; }

/* Every layer sits at its Figma position. */
.o { position: absolute; }

/* ---------- Hero band ----------
   The hero picture stays 1440 × 670; behind it, its own edge colour (a 1px column of hero.webp, a vertical
   dark → cyan gradient) runs out to both window edges, so the band always touches the sides. */
.bx-bleed {
  top: 0; height: 670px;
  left: calc(-1 * var(--bleed, 0px)); right: calc(-1 * var(--bleed, 0px));
  background: url("../../assets/works/bitradex/hero-edge.png") repeat-x 0 0 / 1px 670px;
}

/* ---------- Intro ---------- */
.bx-back {
  font-family: var(--font);
  font-size: 16px; line-height: 20px; font-weight: 600;
  text-transform: uppercase; white-space: pre;
  color: #fff;
  transition: color var(--hover-dur) var(--hover-ease);
}
.bx-back:hover { color: var(--bx-cyan); }

.bx-lockup { display: flex; align-items: center; gap: 24px; }
.bx-lockup img { width: 80px; height: 80px; }
.bx-lockup span {
  font-family: var(--font);
  font-size: 44px; line-height: normal; font-weight: 800;
  color: var(--bx-cyan); white-space: nowrap;
}

.bx-url {
  font-size: 18px; line-height: 23px; font-weight: 500;
  color: var(--bx-cyan); white-space: nowrap;
}

.bx-lede { width: 882px; font-size: 22px; line-height: normal; font-weight: 700; }

/* ---------- Type ---------- */
/* Centred lines under the wordmark: full-width boxes, centred text. */
.bx-center { width: 1440px; text-align: center; white-space: nowrap; }
.bx-display { font-size: 36px; line-height: 36px; font-weight: 600; }
.bx-sub { font-size: 20px; line-height: 36px; font-weight: 400; color: var(--bx-grey); }

.bx-label { font-size: 14px; line-height: 28px; font-weight: 600; color: var(--bx-cyan); white-space: nowrap; }
.bx-title { font-size: 24px; line-height: normal; font-weight: 500; }
.bx-title--nowrap { white-space: nowrap; }
.bx-text { font-size: 14px; line-height: normal; font-weight: 400; color: var(--bx-grey); }

/* Instant Messaging copy (sage title, white body) */
.bx-im-title { font-size: 24px; line-height: normal; font-weight: 600; color: #a3c4b0; white-space: nowrap; }
.bx-im-text { width: 297px; font-size: 16px; line-height: normal; font-weight: 400; } /* Figma 291, widened for browser wrapping */

/* ---------- Upper / Middle / Bottom layers ---------- */
.bx-layer {
  left: 240px; width: 960px; height: 110px;
  border: 0.5px solid; border-radius: 8px;
}
.bx-layer--upper { background: rgba(0, 189, 222, 0.15); border-color: #00bdde; }
.bx-layer--middle { background: rgba(0, 189, 222, 0.06); border-color: rgba(0, 189, 222, 0.36); }
.bx-layer--bottom { background: rgba(76, 76, 76, 0.06); border-color: rgba(68, 68, 68, 0.36); }
.bx-layer__name { position: absolute; top: 41px; font-size: 16px; line-height: 28px; font-weight: 500; color: var(--bx-cyan); white-space: nowrap; }
.bx-layer__copy { position: absolute; top: 26px; right: 40px; display: flex; flex-direction: column; gap: 3px; text-align: right; line-height: 28px; }
.bx-layer__copy b { font-size: 20px; font-weight: 500; }
.bx-layer__copy span { font-size: 14px; font-weight: 300; white-space: nowrap; }

/* ---------- Market Trends: iphone14pro-demo1 scroll demo (js/works/phone-scroll.js) ----------
   The window covers the app's scrolling area between its fixed header (57.07) and tab bar (475),
   in screen px; the strip is the full "scroll content" layer rendered at 3x. */
.bx-demo {
  overflow: hidden;
  background: #fff;
  touch-action: pan-x;   /* vertical drags scroll the phone, the page still scrolls sideways */
  cursor: grab;
}
.bx-demo.is-dragging { cursor: grabbing; }
.bx-demo__strip { position: absolute; left: 0; top: 0; width: 244px; height: auto; will-change: transform; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* iOS-style scroll indicator */
.bx-demo__bar {
  position: absolute; right: 2px; top: 3px; bottom: 3px; width: 2.5px;
  opacity: 0; transition: opacity 0.4s var(--hover-ease);
  pointer-events: none;
}
.bx-demo__bar i { display: block; width: 100%; height: 60px; border-radius: 2px; background: rgba(0, 0, 0, 0.38); }
.bx-demo__bar.is-on { opacity: 1; transition-duration: 0.15s; }
/* Simulated fingertip */
.bx-demo__dot {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(60, 60, 60, 0.28);       /* reads on the white app screen */
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- Intro on tablets and phones (≤1023px) ----------
   Above 1023 the intro is the 1440 Figma block zoomed down. Below that, zooming makes the copy too small,
   so the block drops the absolute Figma positions and reflows: the ledes wrap to the window at readable sizes. */
@media (max-width: 1023px) {
  .bx-intro {
    display: flex; flex-direction: column; align-items: flex-start;
    width: auto; height: auto; zoom: 1;
    padding: 40px var(--gutter) 72px;
  }
  .bx-intro > .o { position: static; }
  .bx-lockup { margin-top: 56px; gap: 18px; }
  .bx-lockup img { width: 64px; height: 64px; }
  .bx-lockup span { font-size: 36px; line-height: 1.2; white-space: normal; }
  .bx-url { margin-top: 14px; max-width: 100%; font-size: 16px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .bx-lede { width: auto !important; max-width: 640px; font-size: 20px; line-height: 1.4; }
  .bx-url + .bx-lede { margin-top: 40px; }
  .bx-lede + .bx-lede { margin-top: 24px; }
}
@media (max-width: 767px) {
  .bx-intro { padding: 32px var(--gutter) 56px; }
  .bx-lockup { margin-top: 40px; gap: 14px; }
  .bx-lockup img { width: 56px; height: 56px; }
  .bx-lockup span { font-size: 30px; }
  .bx-url { font-size: 15px; }
  .bx-lede { font-size: 17px; line-height: 1.45; }
  .bx-url + .bx-lede { margin-top: 32px; }
  .bx-lede + .bx-lede { margin-top: 20px; }
}

/* ---------- Board on tablets and phones (≤1023px) ----------
   The board reads top to bottom (css/works/board-flow.css + js/works/board-flow.js); these are its copy sizes.
   The hero and the collage run edge to edge; the Instant Messaging copy sits above its picture. */
@media (max-width: 1023px) {
  .bx-board .fl-sec--flush { padding-block: 0; }
  .bx-bleed { display: none; }
  .bx-center { align-self: center; text-align: center !important; }
  .bx-display { font-size: 28px; line-height: 1.25; }
  .bx-sub { font-size: 17px; line-height: 1.45; margin-bottom: 8px; }
  .bx-label { margin-bottom: -8px; }
  .bx-title { font-size: 22px; line-height: 1.35; }
  .bx-text { font-size: 15px; line-height: 1.55; }
  .bx-im-title { font-size: 22px; }
  .bx-im-text { font-size: 15px; line-height: 1.55; }
  /* the picture comes first in the markup (so the copy paints over it on desktop); here the copy reads first */
  .bx-im-title, .bx-im-text { order: -1; }
  .bx-im-title { margin-top: 0 !important; }

  /* Upper / Middle / Bottom: name above, copy below, all left-aligned */
  .bx-layer { align-self: stretch; max-width: none !important; height: auto; padding: 16px 20px; }
  .bx-layer > p { position: static; text-align: left; white-space: normal; }
  .bx-layer__name { line-height: 22px; }
  .bx-layer__copy { margin-top: 4px; gap: 2px; line-height: 1.4; }
  .bx-layer__copy b { font-size: 18px; }
  .bx-layer__copy span { white-space: normal; line-height: 1.5; }
}
@media (max-width: 767px) {
  .bx-display { font-size: 24px; }
  .bx-sub { font-size: 15px; }
  .bx-title { font-size: 19px; }
  .bx-im-title { font-size: 20px; }
}