/* ============================================================
   The Build page — extends css/styles.css tokens/utilities.
   Reuses .qw2-topbar (css/quickwins.css) for the fixed logo mark.
   ============================================================ */

/* ---------- Hero — full-bleed looping video, copy docked left ---------- */
.tb-hero {
  position: relative;
  min-height: max(88vh, calc(100vw / 1.8));
  min-height: max(88dvh, calc(100vw / 1.8));
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--space-6) + 64px) 0 var(--space-6);
}
.tb-hero__bg { position: absolute; inset: 0; z-index: -2; }
.tb-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
.tb-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(51,51,51,0.88) 0%,
    rgba(51,51,51,0.6) 32%,
    rgba(51,51,51,0.22) 58%,
    rgba(51,51,51,0) 80%);
}
.tb-hero__inner { position: relative; }
.tb-hero__copy { max-width: 560px; }
.tb-hero__eyebrow { color: var(--rust); }
.tb-hero h1 { color: var(--porcelain); }
.tb-hero__sub {
  margin-top: var(--space-3);
  font-size: 1.15rem;
  color: rgba(250, 249, 246, 0.8);
  max-width: 46ch;
}
.tb-hero__actions { margin-top: var(--space-4); }
.tb-hero__note {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(250, 249, 246, 0.55);
}

/* ---------- The Build, in four parts — sticky-stack scroll effect ----------
   Each .tb-deck-wrap is taller than the viewport (150vh; the last is 100vh
   since nothing needs to slide over it). Its .tb-deck child is
   position:sticky/top:0/100vh tall, so it pins in place for the wrapper's
   "extra" height, then the next deck (higher z-index) slides up from below
   and covers it as its own wrapper scrolls through — a pure-CSS effect that
   keeps working with no JS at all.

   Layered on top: each deck's .tb-deck__inner gets its OWN distinct
   entrance treatment (fade+rise / zoom-settle / slide-from-right /
   rise+scale) driven by a single --p (0→1) custom property that
   js/thebuild.js updates every frame while scrolling — a different
   transition per section, per the design brief. --p defaults to 1 in CSS,
   so with JS disabled or prefers-reduced-motion on, content simply renders
   fully resolved with no motion (progressive enhancement). */
.tb-decks { position: relative; background: var(--charcoal); }

.tb-deck-wrap { position: relative; height: 150vh; height: 150svh; }
.tb-deck-wrap--last { height: 100vh; height: 100svh; }

.tb-deck {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.tb-deck--1 { z-index: 1; }
.tb-deck--2 { z-index: 2; }
.tb-deck--3 { z-index: 3; }
.tb-deck--summary { z-index: 4; }

.tb-deck__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
/* A strong, uniform dark scrim — never fading to fully transparent — so
   text and outline buttons stay legible against whatever photo ends up
   behind them, all the way across the content column. */
.tb-deck__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(15,13,10,0.9) 0%,
    rgba(15,13,10,0.76) 45%,
    rgba(15,13,10,0.56) 70%,
    rgba(15,13,10,0.32) 100%);
}

/* Phase 1 — flat brand color instead of a photo, so the page doesn't lean
   on a fourth background image; no scrim needed since porcelain-on-rust is
   already the site's own tested-legible combo (same as .btn--primary). */
.tb-deck--1 .tb-deck__bg { background-image: linear-gradient(135deg, var(--rust) 0%, var(--rust-dark) 100%); }
.tb-deck--1 .tb-deck__scrim { background: none; }

.tb-deck--2 .tb-deck__bg { background-image: url("../assets/img/thebuild-phase1-bg.jpg"); }

/* Placeholder tonal background for Phase 3 — swap to a real photo once
   supplied. */
.tb-deck--3 .tb-deck__bg { background-image: linear-gradient(135deg, #173f3a 0%, var(--sage) 100%); }

/* Summary/lifecycle deck — plain light gradient behind everything; the
   pins-and-thread animation lives in its own framed .tb-lifecycle-board
   panel (not a full-bleed background), so it can never sit behind text. */
.tb-deck--summary .tb-deck__bg { background-image: linear-gradient(135deg, var(--sand) 0%, var(--porcelain) 100%); }
.tb-deck--summary .tb-deck__scrim { background: none; }

/* Giant ghost numeral, editorial-poster style */
.tb-deck__ghost {
  position: absolute;
  right: 3%;
  bottom: -8%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46vw;
  line-height: 1;
  color: rgba(250, 249, 246, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.tb-deck__ghost--light { color: rgba(51, 51, 51, 0.05); }

.tb-deck__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  --p: 1;
  opacity: var(--p);
}
/* A distinct entrance per section — see the comment above .tb-decks. */
.tb-deck--1 .tb-deck__inner { transform: translateY(calc((1 - var(--p)) * 28px)); }
.tb-deck--2 .tb-deck__inner { transform: scale(calc(0.94 + var(--p) * 0.06)); }
.tb-deck--3 .tb-deck__inner { transform: translateX(calc((1 - var(--p)) * 70px)); }
.tb-deck--summary .tb-deck__inner { transform: translateY(calc((1 - var(--p)) * 40px)) scale(calc(0.96 + var(--p) * 0.04)); }

.tb-deck h2 { color: var(--porcelain); }
.tb-deck .eyebrow { color: var(--rust); }
.tb-deck__body {
  color: rgba(250, 249, 246, 0.82);
  margin-top: var(--space-3);
  max-width: 56ch;
  font-size: 1.1rem;
}
.tb-deck__credibility {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(250, 249, 246, 0.15);
  color: rgba(250, 249, 246, 0.68);
  font-size: 0.92rem;
  max-width: 56ch;
}
.tb-deck__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--porcelain);
  margin-top: var(--space-2);
}
.tb-deck__price span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(250, 249, 246, 0.6);
}
.tb-deck__callout {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--rust);
  background: rgba(250, 249, 246, 0.08);
  color: rgba(250, 249, 246, 0.9);
  font-size: 0.95rem;
  max-width: 54ch;
}
.tb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}
.tb-chips li {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(250, 249, 246, 0.35);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--porcelain);
}

/* ---------- Phase 1/2/3 — content is dense enough to need internal scroll
   room on short viewports, or once a drawer is opened; the drawer keeps
   content collapsed by default so this is a safety net, not the normal
   state. Split into a scrolling pane + a rail column instead of scrolling
   .tb-deck__inner directly, so the native OS scrollbar can be hidden in
   favor of the on-brand one below. ---------- */
.tb-deck--1 .tb-deck__inner,
.tb-deck--2 .tb-deck__inner,
.tb-deck--3 .tb-deck__inner {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  max-height: calc(100vh - 2 * var(--space-4));
  max-height: calc(100svh - 2 * var(--space-4));
}
.tb-deck__scroll {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tb-deck__scroll::-webkit-scrollbar { display: none; }

/* ---------- Custom on-brand scrollbar — a small rust "mandarine" marker
   that rolls down a thin rail as the panel scrolls, replacing the native
   scrollbar. Hidden by default; js/thebuild.js adds .is-active only when
   the pane actually has more to scroll (most of the time it won't). ---------- */
.tb-deck__rail {
  flex: 0 0 20px;
  position: relative;
  display: none;
}
.tb-deck__rail.is-active { display: block; }
.tb-deck__rail-track {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: rgba(250, 249, 246, 0.18);
  border-radius: 999px;
}
/* Thumb — a flat citrus-slice mark (ring + radiating segments + pith
   center), not a solid ball: a modern nod to the wordmark rather than a
   literal fruit render. Porcelain backing keeps it legible over every
   deck's dark background. */
.tb-deck__rail-thumb {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background-color: var(--porcelain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13.5' fill='none' stroke='%23C06C38' stroke-width='2'/%3E%3Cg stroke='%23C06C38' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='16' y1='16' x2='16' y2='4'/%3E%3Cline x1='16' y1='16' x2='25.5' y2='9.8'/%3E%3Cline x1='16' y1='16' x2='25.5' y2='22.2'/%3E%3Cline x1='16' y1='16' x2='16' y2='28'/%3E%3Cline x1='16' y1='16' x2='6.5' y2='22.2'/%3E%3Cline x1='16' y1='16' x2='6.5' y2='9.8'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2' fill='%2348B5A6'/%3E%3C/svg%3E");
  background-size: 100%;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(15, 13, 10, 0.35);
  will-change: transform;
}

/* ---------- Phase 2/3 — two-column layout so the (denser) collapsed
   content fits in one viewport without needing the scroll safety net above;
   that rule stays in place purely as a fallback (e.g. a drawer opened on a
   short viewport), not the normal state. ---------- */
.tb-deck--2 .tb-deck__inner,
.tb-deck--3 .tb-deck__inner {
  max-width: 960px;
}
.tb-deck__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  align-items: start;
}
/* Widening the content column pushes it further right, into the part of
   the shared scrim that's designed to fade out — flatten it out for these
   two decks specifically so the right-hand column stays just as legible. */
.tb-deck--2 .tb-deck__scrim,
.tb-deck--3 .tb-deck__scrim {
  background: linear-gradient(90deg,
    rgba(15,13,10,0.88) 0%,
    rgba(15,13,10,0.8) 55%,
    rgba(15,13,10,0.68) 100%);
}

@media (max-width: 820px) {
  .tb-deck__cols { grid-template-columns: 1fr; }
}

/* ---------- Expandable module drawer ---------- */
.tb-drawer { margin-top: var(--space-4); }
.tb-drawer__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--rust);
  border-radius: 999px;
  background: transparent;
  color: var(--porcelain);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.tb-drawer__toggle:hover { background: var(--rust); }
.tb-drawer__arrow {
  display: inline-block;
  transition: transform 300ms var(--ease);
}
.tb-drawer__toggle[aria-expanded="true"] .tb-drawer__arrow { transform: rotate(90deg); }

.tb-drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.tb-drawer__panel.is-open { grid-template-rows: 1fr; }
.tb-drawer__inner { overflow: hidden; min-height: 0; }

.tb-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
  padding-top: var(--space-3);
}
.tb-module-card {
  background: var(--sand);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.tb-module-card__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--sage);
  margin-bottom: 0.3em;
}
.tb-module-card h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--charcoal);
  line-height: 1.25;
  margin-bottom: 0.35em;
}
.tb-module-card p {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--charcoal);
  line-height: 1.4;
  margin: 0;
}
.tb-module-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tb-module-card ul li {
  position: relative;
  padding-left: 1.1em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--charcoal);
  line-height: 1.4;
}
.tb-module-card ul li + li { margin-top: 0.4em; }
.tb-module-card ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--sage);
}

/* ---------- Phase 3 — three-track pricing (replaces the pill row the
   other two phases use; three prices need more room than a pill can hold) ---------- */
.tb-pricing-tracks {
  display: grid;
  gap: 0.7rem;
  margin-top: var(--space-4);
  max-width: 56ch;
}
.tb-pricing-track {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(250, 249, 246, 0.18);
  border-radius: var(--radius-sm);
}
.tb-pricing-track--best {
  border-color: var(--rust);
  background: rgba(192, 108, 56, 0.12);
}
.tb-pricing-track__name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--porcelain);
}
.tb-pricing-track__badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--rust);
  color: var(--porcelain);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tb-pricing-track__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--porcelain);
}
.tb-pricing-track__price span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(250, 249, 246, 0.55);
}
.tb-pricing-note {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: rgba(250, 249, 246, 0.55);
}
.tb-pricing-track__included {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--sage);
  text-transform: none;
  letter-spacing: 0;
}

/* Single-path CTA note (Phase 3 — informational, not a two-path pitch) */
.tb-cta-path__note {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(250, 249, 246, 0.75);
  max-width: 48ch;
  margin-bottom: 0.9rem;
}

/* ---------- Lifecycle summary deck — plain-English recap, three-step strip,
   and a framed "pin board" panel beside the copy. Side-by-side layout (not
   a shared background) is what guarantees the thread can never cross the
   text — they're in separate boxes, not separate layers of the same one. ---------- */
.tb-deck--summary .tb-deck__inner { max-width: 1080px; }
.tb-deck--summary .tb-deck__body + .tb-deck__body { margin-top: 0.85rem; }
.tb-lifecycle-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.tb-lifecycle-board {
  position: relative;
  padding: 10px;
  background: var(--porcelain);
  border-radius: 8px;
  box-shadow: 0 20px 40px -14px rgba(51, 51, 51, 0.3);
}
.tb-lifecycle-board__screen {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  overflow: hidden;
  outline: 1px solid rgba(51, 51, 51, 0.12);
  background: var(--sand);
}
.tb-lifecycle-board__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Little push-pins holding the frame to the "wall" — echoes the pins
   inside the board itself. */
.tb-lifecycle-board::before,
.tb-lifecycle-board::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #e08a52 0%, var(--rust) 45%, var(--rust-dark) 100%);
  box-shadow: 0 2px 4px rgba(15, 13, 10, 0.35);
  z-index: 2;
}
.tb-lifecycle-board::before { left: 16px; }
.tb-lifecycle-board::after { right: 16px; }

.tb-lifecycle-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
  margin-bottom: 0;
}
.tb-lifecycle-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--rust);
  color: var(--porcelain);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
}
.tb-lifecycle-step h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 0.35em;
}
.tb-lifecycle-step p {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 820px) {
  .tb-lifecycle-layout { grid-template-columns: 1fr; }
  .tb-lifecycle-board { max-width: 420px; margin: 0 auto; }
}

/* ---------- What's not included (honesty block, same pattern as Quick Wins) ---------- */
.tb-not-included { margin-top: var(--space-4); }
.tb-not-included h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.55);
  margin-bottom: 0.6rem;
}
.tb-list--not { list-style: none; padding: 0; margin: 0; }
.tb-list--not li {
  position: relative;
  padding-left: 1.3em;
  color: rgba(250, 249, 246, 0.55);
  font-size: 0.88rem;
  margin-bottom: 0.35em;
  max-width: 58ch;
}
.tb-list--not li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: rgba(250, 249, 246, 0.35);
}

/* ---------- Two-path CTA (mirrors the closing CTA pattern elsewhere) ---------- */
.tb-cta-paths {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(250, 249, 246, 0.15);
}
.tb-cta-path__label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(250, 249, 246, 0.6);
  margin-bottom: 0.6rem;
}
/* .btn--ghost defaults to color:inherit, which falls back to the page's
   base charcoal text color here — nearly invisible over a photo. Give it
   an explicit light color plus a solid-ish backing so it reads regardless
   of what's behind it. */
.tb-cta-path .btn--ghost {
  color: var(--porcelain);
  border-color: rgba(250, 249, 246, 0.55);
  background: rgba(15, 13, 10, 0.4);
}
.tb-cta-path .btn--ghost:hover { background: rgba(15, 13, 10, 0.6); }

/* Summary deck sits on a light background — flip text to dark */
.tb-deck--summary h2,
.tb-deck--summary .tb-deck__body { color: var(--charcoal); }
.tb-deck--summary .tb-deck__body { color: var(--text-muted); }
.tb-deck--summary .eyebrow { color: var(--rust); }

@media (max-width: 640px) {
  .tb-deck__ghost { font-size: 60vw; }
  .tb-modules-grid { grid-template-columns: 1fr; }
  .tb-cta-paths { flex-direction: column; gap: var(--space-3); }
  .tb-cta-paths .btn { white-space: normal; text-align: center; }
  .tb-pricing-track { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .tb-lifecycle-steps { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Mobile: keep hero text legible with a fuller scrim ---------- */
@media (max-width: 899px) {
  .tb-hero__scrim {
    background: linear-gradient(180deg,
      rgba(51,51,51,0.5) 0%,
      rgba(51,51,51,0.75) 55%,
      rgba(51,51,51,0.85) 100%);
  }
  .tb-hero__sub { max-width: none; }
}

/* ---------- Reduced motion: drop the sticky pin/cover, stack normally ---------- */
@media (prefers-reduced-motion: reduce) {
  .tb-deck-wrap,
  .tb-deck-wrap--last { height: auto; }
  .tb-deck {
    position: relative;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
}