/* ==========================================================================
   00 — HERO
   --------------------------------------------------------------------------
   Horizontal rhythm comes from .rb-container, vertical from .rb-section--lg
   and .rb-stack--6. Everything below is either the decorative background
   stack (art / veil / grid) or the two content-specific measures the
   reference sets: the 672px copy column and the 544px lead.
   ========================================================================== */

.rb-hero {
  /* The background layers are inset by percentage and must not bleed out. */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   BACKGROUND STACK
   Three pointer-inert layers, all beneath the content.
   -------------------------------------------------------------------------- */
.rb-hero__art,
.rb-hero__veil,
.rb-hero__grid {
  position: absolute;
  z-index: var(--rb-sys-z-base);
  pointer-events: none;
}

.rb-hero__art { inset: 0; }
.rb-hero__art img { width: 100%; height: 100%; object-fit: cover; }

/* The veil lifts the copy off the photograph. Percentage insets so the frame
   keeps its proportion as the canvas resizes.
   NORMALISED: reference inset was 2.68% 3.11% 0 3.52% — sides squared to 3.5%,
   top rounded to 2.7%; the asymmetry had no design reason. */
.rb-hero__veil {
  inset: 2.7% 3.5% 0;
  background: color-mix(in srgb, var(--rb-ref-white) 66%, transparent);
}

/* Plus-marked graph paper. The rules are gradients so their ink stays a
   token; only the mark's silhouette comes from the SVG (as a mask).
   NORMALISED: module was 61px → 60px, rules 1.5px → the hairline token. */
.rb-hero__grid {
  --rb-hero-grid-module: 60px;
  --rb-hero-grid-ink: color-mix(in srgb, var(--rb-ref-ink) 8%, transparent);
  --rb-hero-grid-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect x='24' y='29' width='12' height='2' fill='%23fff'/%3E%3Crect x='29' y='24' width='2' height='12' fill='%23fff'/%3E%3C/svg%3E");

  inset: 2.7% 3.5% 0;   /* must match .rb-hero__veil — the grid rides on the veil */
  background-image:
    linear-gradient(90deg, var(--rb-hero-grid-ink) 0 var(--rb-ref-border-hairline), transparent var(--rb-ref-border-hairline)),
    linear-gradient(       var(--rb-hero-grid-ink) 0 var(--rb-ref-border-hairline), transparent var(--rb-ref-border-hairline));
  background-size: var(--rb-hero-grid-module) var(--rb-hero-grid-module);
  /* Rules run through the middle of the tile, so a mark sits on every crossing. */
  background-position: calc(var(--rb-hero-grid-module) / 2) calc(var(--rb-hero-grid-module) / 2);
}

.rb-hero__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rb-hero-grid-ink);
  -webkit-mask-image: var(--rb-hero-grid-mark);
  mask-image: var(--rb-hero-grid-mark);
  -webkit-mask-size: var(--rb-hero-grid-module) var(--rb-hero-grid-module);
  mask-size: var(--rb-hero-grid-module) var(--rb-hero-grid-module);
}

/* --------------------------------------------------------------------------
   CONTENT
   -------------------------------------------------------------------------- */
.rb-hero__inner {
  position: relative;
  z-index: var(--rb-sys-z-raised);
}

.rb-hero__content {
  /* 672px — the reference's copy column; lands dead-centre of the 12-col grid. */
  max-width: 672px;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

/* 544px — the reference's lead measure, narrower than the headline column. */
.rb-hero__lead { max-width: 544px; }

.rb-hero__ctas {
  justify-content: center;
  width: 100%;
}

/* --------------------------------------------------------------------------
   PRODUCT CARD
   Fixed heights per step: the art is cropped, not scaled, so the card keeps
   a deliberate proportion instead of tracking the image's 2400×1191.
   -------------------------------------------------------------------------- */
.rb-hero__media {
  margin-block-start: var(--rb-ref-space-9);
  height: 320px;
  background: var(--rb-sys-bg-dark);
  border-radius: var(--rb-ref-radius-xl);
}

@media (min-width: 768px) {
  .rb-hero__media {
    height: 400px;
    /* One step of inset at tablet, a full gutter at desktop — the card always
       sits inboard of the copy. */
    margin-inline: var(--rb-ref-space-4);
  }
}

@media (min-width: 1200px) {
  .rb-hero__media {
    /* NORMALISED: reference was 571px (35.6875rem) — snapped to the 4px grid. */
    height: 572px;
    /* The card is inset one gutter inside the content box (1312 − 64×2 = 1184),
       so it reads as a held object rather than another full-width band. */
    margin-inline: var(--rb-ref-space-11);
  }
}