/* ============ TOKENS ============
   Same values as the rest of the site, duplicated here so this page stays
   self-contained and editing it can never affect other pages. */
:root {
  --red: #c23c1a;
  --blue: #1c1cb0;
  --black: #0e0e0e;
  --cream: #f2ede4;
  --white: #fbf9f5;

  --pad: clamp(1.5rem, 6vw, 5rem);

  --font-display: "Archivo Black", sans-serif;
  --font-body: "Archivo Expanded", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--blue);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 0.92; }

/* ============ NAV (same as the rest of the site) ============ */
.nav {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.4rem var(--pad) 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--blue);
}

.nav__link { color: var(--white); opacity: 0.95; transition: opacity 0.15s ease; }
.nav__link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav__link--current { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ============ HERO ============ */
.bbm-hero {
  background: var(--blue);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 3rem) var(--pad) clamp(2.5rem, 6vw, 4rem);
}

.bbm-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2.5rem, 8vw, 5rem);
}

.bbm-hero__title {
  font-weight: 800;
  font-size: clamp(3rem, 8.8vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: clamp(1.4px, 0.16vw, 2.4px) var(--white);
  text-stroke: clamp(1.4px, 0.16vw, 2.4px) var(--white);
}

.bbm-hero__tagline {
  margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(0.85rem, 1.7vw, 1.15rem);
  letter-spacing: 0.02em;
  color: var(--red);
  text-transform: uppercase;
}

.bbm-hero__detail {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--white);
  text-transform: uppercase;
}

.bbm-hero__panel {
  position: relative;
  overflow: hidden;
  min-height: clamp(22rem, 46vw, 34rem);
}

.bbm-hero__carpet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbm-hero__photo-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  aspect-ratio: 1284 / 837;
  overflow: hidden;
  box-shadow: 0 25px 40px rgba(0,0,0,0.35);
}

.bbm-hero__photo { width: 100%; height: 100%; object-fit: cover; }

/* ============ HOW TO? ============ */
.bbm-how {
  background: var(--blue);
  padding: clamp(3rem, 7vw, 5rem) var(--pad);
}

.bbm-how__grid {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

/* HOW/TO and the "?" are laid out as ONE grid unit — the mark spans the
   same two rows as the two-line wordmark and is centered against that
   combined block, so the whole shape reads as a single composed graphic
   rather than a headline with a character floating beside it. */
.bbm-how__heading-wrap {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.14em;
  align-items: center;
  width: fit-content;
  margin: 0 0 clamp(2.5rem, 5.5vw, 3.75rem);
}

.bbm-how__lines {
  grid-column: 1;
  grid-row: 1 / 3;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7.5vw, 4.8rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.bbm-how__mark {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-size: clamp(6rem, 17vw, 11.5rem);
  line-height: 1;
  color: var(--red);
  white-space: nowrap;
  -webkit-text-stroke: 0.03em var(--red);
  text-stroke: 0.03em var(--red);
}

.bbm-how__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.2vw, 1.35rem);
  max-width: 34rem;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

.bbm-how__item-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 0.3em;
}

.bbm-how__item-text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.bbm-how__explainer {
  max-width: 26rem;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Two stacked photos with a deliberate rhythm — same gap top and bottom,
   consistent frame, not a loose website image list. */
.bbm-how__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.bbm-how__stack-frame {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
}

.bbm-how__stack-frame img { width: 100%; height: 100%; object-fit: cover; }

.bbm-how__stack-frame--reformer img { object-position: center 30%; }

/* ============ READY TO BURN? ============
   The laptop/leg motif is treated as an oversized editorial photo that
   the section deliberately crops at its own bottom edge — not a small
   floating PNG centered in empty blue space. The section height is
   capped and overflow-hidden; the visual is sized larger than that
   remaining space on purpose so the black pant leg runs off the bottom.
   The CTA is layered directly over the lower part of the photo instead
   of sitting below it. */
.bbm-ready {
  position: relative;
  background: var(--blue);
  padding: clamp(2rem, 5vw, 3rem) var(--pad) 0;
  height: clamp(33rem, 80vw, 46rem);
  text-align: center;
  overflow: hidden;
}

.bbm-ready__heading {
  position: relative;
  z-index: 3;
  font-weight: 800;
  font-size: clamp(2.4rem, 7.5vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
}

.bbm-ready__visual {
  width: min(58vw, 620px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.bbm-ready__visual img {
  width: 100%;
  height: auto;
  /* The source photo has empty space above the laptop (~23% of its own
     height) before the laptop starts; shifting it up removes that gap so
     the laptop sits right under the headline instead of floating with a
     large blue gap above it. */
  transform: translateY(-23%);
}

.bbm-ready__cta {
  position: absolute;
  left: 50%;
  bottom: clamp(2.5rem, 7vw, 4.5rem);
  transform: translateX(-50%);
  z-index: 2;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  line-height: 1.15;
  color: var(--white);
  text-transform: uppercase;
  max-width: 32rem;
  margin: 0;
}

.bbm-ready__cta-link {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .bbm-hero { grid-template-columns: 1fr; }
  .bbm-hero__copy { gap: 2rem; }
  .bbm-hero__panel { min-height: 20rem; }

  .bbm-how__grid { grid-template-columns: 1fr; }
  .bbm-how__stack { max-width: 26rem; margin: 0 auto; }
  .bbm-how__heading-wrap { margin-left: auto; margin-right: auto; }
  .bbm-how__list { margin-left: auto; margin-right: auto; text-align: left; }
  .bbm-how__explainer { margin-left: auto; margin-right: auto; text-align: center; }

  .bbm-ready {
    height: clamp(26rem, 118vw, 34rem);
    padding-top: clamp(1.5rem, 5vw, 2.25rem);
  }
  .bbm-ready__heading { white-space: normal; }
  .bbm-ready__visual { width: min(78vw, 340px); }
  .bbm-ready__cta { bottom: clamp(1.5rem, 6vw, 2.5rem); }
}