/* =============================================================
   veloque-branding.css — page-scoped layout for
   /projects/veloque/branding
   -------------------------------------------------------------
   Loaded AFTER veloque.css. Everything here is scoped to
   `.vq-page--branding` (the <main> of this page only) or uses the
   page-local `.vqb-` prefix, so no other Veloque page is affected.

   Structure follows docs/veloque-augment-reference.md:
   full-bleed section + inner rail + hairline divider, hairline
   bento grids (gap 1px, radius 0, no shadow), asymmetric
   media/text rows (2fr 3fr, 5fr 7fr) and a stat strip that is
   ruled, not carded. Grayscale only.
   ============================================================= */

.vq-page--branding {
  --vqb-gap:       clamp(32px, 4vw, 80px);
  --vqb-cell-pad:  clamp(24px, 2.6vw, 40px);
  --vqb-rule:      var(--vq-border-2);
  --vqb-sticky-top: 96px;
}

/* ── Rail helper ──────────────────────────────────────────────
   For blocks that sit directly inside <main> (which carries no
   horizontal padding): same rail as .vq-detail. */
.vq-page--branding .vqb-rail {
  max-width: var(--vq-page-max);
  margin: 0;
  padding-inline: var(--vq-page-pad-x);
  box-sizing: border-box;
}

/* ── Full-bleed within <main> ─────────────────────────────────
   veloque.css breaks these out with `width:100vw` +
   `margin-left: calc(-50vw + 50%)`. Inside .main (which is a flex
   item narrower than the viewport and has overflow-x: clip) that
   crops ~40px off BOTH sides. Within this page the blocks simply
   fill the available width instead. */
.vq-page--branding .vq-colorimetry-bleed,
.vq-page--branding .vq-carousel-section,
.vq-page--branding .vq-brandmark {
  width: 100%;
  margin-left: 0;
}

/* ── Asymmetric opener row ────────────────────────────────────
   4-beat opener: eyebrow + h2 in the narrow column, the lead /
   body prose in the wide one. Single column below 1024px. */
.vqb-row {
  display: grid;
  gap: var(--vqb-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  .vqb-row--2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .vqb-row--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  /* The heading column holds its position while the prose scrolls
     past it (Apple-style sticky section opener). */
  .vqb-row__head {
    position: sticky;
    top: var(--vqb-sticky-top);
  }
}

.vq-page--branding .vqb-row .vq-section__label { margin-bottom: 20px; }
.vq-page--branding .vqb-row .vq-section__title { margin-bottom: 0; max-width: 20ch; }
.vq-page--branding .vqb-row__body > .vq-section__body { max-width: 68ch; }
.vq-page--branding .vqb-row__body > .vq-section__body:last-child { margin-bottom: 0; }

@media (max-width: 1023px) {
  .vq-page--branding .vqb-row .vq-section__title { margin-bottom: 8px; max-width: 24ch; }
}

/* ── Hairline bento ───────────────────────────────────────────
   1px rules BETWEEN cells and one around the block. No radius,
   no shadow, no separate cell background at rest. */
.vqb-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqb-rule);
  border: 1px solid var(--vqb-rule);
  margin-top: clamp(48px, 6vw, 72px);
}

.vqb-bento > * {
  background: var(--vq-bg);
  padding: var(--vqb-cell-pad);
}

@media (min-width: 1024px) {
  .vqb-bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Section opener for the brand-book spreads ────────────────
   Replaces the old centered .vq-annotation--lead block: the
   eyebrow + heading return to the rail on the left, the
   explanatory paragraph sits in the wide column. */
.vqb-spread {
  padding-top: var(--space-40);
  padding-bottom: 0;
  margin-bottom: 126px;
  border-top: 1px solid var(--section-border);
}

.vqb-spread__head {
  display: grid;
  gap: var(--vqb-gap);
  align-items: start;
  margin-bottom: clamp(40px, 6vh, 72px);
}

@media (min-width: 1024px) {
  .vqb-spread__head { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.vq-page--branding .vqb-spread__head .vq-section__title { margin-bottom: 0; max-width: 20ch; }
.vq-page--branding .vqb-spread__head .vq-section__body  { margin-bottom: 0; max-width: 68ch; }

/* Spread artwork: edge to edge inside <main>, no frame. */
.vq-page--branding .vqb-spread .vq-bleed--wide {
  padding-inline: 0;
}

.vq-page--branding .vqb-spread .vq-bleed--wide img {
  max-width: 100%;
}

.vqb-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin-top: 16px;
}

/* ── Mark system as a lateral slide (spreads 02, 03, 04) ──────
   The three configurations now live in the shared scroll-snap
   carousel (same markup as the pattern band further down, so the
   shared pixel-dot JS binds unchanged). The logo sheets ship with
   their own off-white / dark backgrounds, so the sheet IS the
   card: no frame, no inset, image edge to edge. */
.vq-page--branding .vqb-marks__media {
  aspect-ratio: 3 / 2;
  border: 0;
  padding: 0;
  background: var(--vq-bg);
  overflow: hidden;
}

.vq-page--branding .vqb-marks__media img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  display: block;
}

/* Deliberately oversized slides: the artwork is the point. */
.vq-page--branding .vqb-marks .vq-carousel-item {
  width: min(88vw, 560px);
}

@media (min-width: 1024px) {
  .vq-page--branding .vqb-marks .vq-carousel-item {
    width: clamp(520px, 46vw, 880px);
  }
}

.vq-page--branding .vqb-marks .vq-carousel-item__caption {
  padding: 0;
  gap: 10px;
  max-width: 62ch;
}

.vq-page--branding .vqb-marks .vq-carousel-item__title {
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.2;
}

.vq-page--branding .vqb-marks .vq-carousel-item__sub {
  font-size: var(--fs-14);
  color: var(--vq-text-mid);
  line-height: 1.65;
}

/* ── Stat strip: ruled, not carded (reference pattern D) ──────
   Numbers/words sit directly on the page between two hairlines,
   in mono with tabular figures. */
.vqb-strip-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  margin-top: clamp(48px, 6vw, 72px);
  margin-bottom: 20px;
}

.vq-page--branding .vq-stat-strip {
  background: none;
  border: 0;
  border-block: 1px solid var(--vqb-rule);
  border-radius: 0;
  overflow: visible;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-block: 40px;
  margin: 0;
}

@media (min-width: 640px) {
  .vq-page--branding .vq-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 48px;
  }
}

.vq-page--branding .vq-stat {
  background: none;
  padding: 0;
  gap: 14px;
}

.vq-page--branding .vq-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.02em;
}

/* ── Strategic pillars: hairline 3-up, no cards ───────────────
   3 cells, so 2-up would orphan the third: it spans the row at
   tablet width instead of leaving an empty cell. */
.vq-page--branding .vq-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqb-rule);
  border: 1px solid var(--vqb-rule);
  margin-top: clamp(48px, 6vw, 72px);
}

.vq-page--branding .vq-pillar {
  background: var(--vq-bg);
  border: 0;
  border-radius: 0;
  padding: var(--vqb-cell-pad);
  gap: 18px;
  transition: background 0.2s ease;
}

.vq-page--branding .vq-pillar:hover {
  background: var(--vq-surface);
  border-color: transparent;
}

.vq-page--branding .vq-pillar__body { max-width: 46ch; }

@media (min-width: 768px) {
  .vq-page--branding .vq-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vq-page--branding .vq-pillar:nth-child(3) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .vq-page--branding .vq-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vq-page--branding .vq-pillar:nth-child(3) { grid-column: auto; }
}

/* ── Brand-book index: hairline bento, 9 cells = 3 x 3 ───────── */
.vq-page--branding .vq-index {
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqb-rule);
  border: 1px solid var(--vqb-rule);
  margin: clamp(48px, 6vw, 72px) 0 0;
}

.vq-page--branding .vq-index__item {
  background: var(--vq-bg);
  padding: var(--vqb-cell-pad);
  gap: 24px;
  min-height: 124px;
  justify-content: space-between;
}

.vq-page--branding .vq-index__item:hover { background: var(--vq-surface); }

.vq-page--branding .vq-index__item:focus-visible,
.vq-page--branding .vq-pillar:focus-visible,
.vq-page--branding .vq-color-row:focus-visible {
  outline: 1px solid var(--vq-text);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .vq-page--branding .vq-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Colorimetry: chart full width, legend + note back on rail ── */
.vqb-colorimetry-foot {
  padding-top: clamp(40px, 6vh, 72px);
}

.vq-page--branding .vqb-colorimetry-foot .vq-annotation__body {
  max-width: 68ch;
  text-align: left;
}

@media (min-width: 1024px) {
  .vq-page--branding .vqb-colorimetry-foot .vq-color-legend {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 0;
    position: sticky;
    top: var(--vqb-sticky-top);
  }
}

/* ── Carousel bands ───────────────────────────────────────────
   Header returns to the rail as a 2fr/3fr opener; the track keeps
   its scroll-snap behaviour untouched (JS binds .vq-carousel and
   its direct children). */
.vq-page--branding .vq-carousel-header { margin-bottom: clamp(40px, 6vh, 72px); }

.vq-page--branding .vq-carousel-header .vqb-row .vq-section__body { margin-bottom: 0; }

.vq-page--branding .vq-highlight {
  margin: 28px 0 0;
  max-width: 60ch;
  font-size: clamp(18px, 1.6vw, 24px);
}

/* Wider slides now that the rail is 1600px. */
@media (min-width: 1280px) {
  .vq-page--branding .vq-carousel-item { width: clamp(360px, 30vw, 560px); }
  .vq-page--branding .vq-carousel--natural .vq-carousel-item { width: clamp(420px, 40vw, 720px); }
}

/* ── Splits: asymmetric only, never 50/50 ─────────────────────
   Ratios follow the DOM order of each block. */
@media (min-width: 1024px) {
  .vq-page--branding .vq-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .vq-page--branding .vq-split--media-lg { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* media column first: give the artwork the wide side */
  .vq-page--branding .vqb-split--media-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.vq-page--branding .vq-split__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Vertical film: left-aligned to the grid column instead of centered. */
.vq-page--branding .vq-video-frame { margin: 0; }

/* ── Community spread ─────────────────────────────────────── */
.vq-page--branding .vq-community__block .vq-annotation__body { max-width: 68ch; }

.vq-page--branding .vq-tiers { margin-top: clamp(40px, 5vw, 56px); }

/* ── Closing CTA band (reference pattern H) ───────────────── */
.vq-page--branding .vq-cta {
  background: var(--vq-surface);
  border: 0;
  border-block: 1px solid var(--vq-border);
  border-radius: 0;
  padding: 80px clamp(24px, 3vw, 56px);
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}


.vq-page--branding .vq-cta__sub { max-width: 56ch; margin-top: 20px; }

.vq-page--branding .vq-cta__more { grid-column: 1 / -1; padding-top: 40px; }

@media (min-width: 1024px) {
  .vq-page--branding .vq-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .vq-page--branding .vq-cta__actions { justify-content: flex-end; align-self: end; }
}

/* ── Motion policy ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vq-page--branding .vqb-row__head,
  .vq-page--branding .vqb-colorimetry-foot .vq-color-legend {
    position: static;
  }
}

/* ── Accessibility touch-ups (page-scoped) ───────────────────
   #6B6B6B on #000 is 3.9:1, under the 4.5:1 AA floor for text.
   These three labels are real content on this page, so they step
   up to --vq-text-muted (#8A8A8A, 5.9:1). Also gives the
   breadcrumb a 44px tap target. */
.vq-page--branding .vq-cta__more-label,
.vq-page--branding .vq-cta__more-num,
.vq-page--branding .vq-tier-caption__num {
  color: var(--vq-text-muted);
}

.vq-page--branding .vq-breadcrumb {
  padding-block: 14px;
}


/* ── Carousel band rhythm (P1 #5) ─────────────────────────────
   Same 40px padding-top / 126px margin-bottom pair as every other
   band. The band carries a background, so it keeps a symmetric
   40px foot instead of collapsing onto its bottom hairline. */
.vq-page--branding .vq-carousel-section {
  padding-block: var(--space-40);
  margin-bottom: 126px;
}

/* ── Spread 09 heading (P1 #4) ────────────────────────────────
   It is a real spread h2, so it takes the shared --vq-fs-h2 via
   .vq-section__title; only its bottom margin is tuned here. */
.vq-page--branding #spread-09 .vq-section__title { margin-bottom: 20px; }

/* ── Tier card micro-text legibility (P2 #22) ────────────────
   9–11px mono over a metallic gradient: the resting 0.55/0.6 ink
   is unreadable on the lightest stop of the Aurum ramp. 0.85 ink
   composites to ~#333537 over #EFD788 (~9:1). Platinum keeps its
   own engraved treatment. */
.vq-page--branding .vq-tier-card:not(.vq-tier-card--platinum) .vq-tier-card__bottom,
.vq-page--branding .vq-tier-card:not(.vq-tier-card--platinum) .vq-tier-card__tier {
  color: rgba(18, 20, 24, 0.85);
}

/* =============================================================
   ROUND 2 additions
   ============================================================= */

/* ── 1 · Five strategic pillars ───────────────────────────────
   5 cells never divide into 3 columns without orphaning a cell.
   A 6-track grid gives a balanced 3 + 2: the first three span
   two tracks each, the last two span three each. At tablet the
   inherited 2-up + full-span third rule already reads as
   2 / 1 / 2, so it stays. */
@media (min-width: 1024px) {
  .vq-page--branding .vqb-pillars--5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .vq-page--branding .vqb-pillars--5 > .vq-pillar:nth-child(-n+3) { grid-column: span 2; }
  .vq-page--branding .vqb-pillars--5 > .vq-pillar:nth-child(n+4)  { grid-column: span 3; }
}

/* ── 2 · Archive artwork on the prose measure ─────────────────
   Spread 01's reference sheet was reading as a full-rail hero.
   It now sits in the same column as the paragraph above it
   (column 2 of the 2fr/3fr opener), so its left edge and its
   measure match the text. */
.vq-page--branding .vqb-archive-media img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .vq-page--branding .vqb-archive-media {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--vqb-gap);
  }
  .vq-page--branding .vqb-archive-media img {
    grid-column: 2;
    /* Column 2 is exactly the prose measure of the opener above. */
    max-width: 100%;
  }
}

/* ── 3 · Colorimetry opener: more air under the title ───────── */
.vq-page--branding #spread-05 .vqb-spread__head {
  margin-bottom: clamp(72px, 10vh, 128px);
}

/* Spread 07 is a new bento band: the shared .vqb-spread__head
   bottom margin is overridden to 0 elsewhere in the cascade, so it
   is restored here (page-scoped) or the first row of images butts
   against the lead paragraph on phones. */
.vq-page--branding #spread-07 .vqb-spread__head {
  margin-bottom: clamp(40px, 6vh, 72px);
}

/* ── 5 · Packaging / labelling / application bento ────────────
   Hairline grid, no radius, no shadow. The portrait labelling
   photograph takes a cell spanning two rows so it keeps its
   proportion instead of being letterboxed. */
.vqb-pack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqb-rule);
  border: 1px solid var(--vqb-rule);
}

.vqb-pack__cell {
  background: var(--vq-bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vqb-pack__media {
  overflow: hidden;
  background: var(--vq-surface-2);
  aspect-ratio: 3 / 2;
}

.vqb-pack__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vqb-pack__text {
  padding: var(--vqb-cell-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vqb-pack__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
}

.vqb-pack__title {
  font-family: var(--font-headings);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  color: var(--vq-text);
  letter-spacing: -0.014em;
  line-height: 1.2;
}

.vqb-pack__body {
  font-family: var(--font-text);
  font-size: var(--fs-14);
  color: var(--vq-text-mid);
  line-height: 1.65;
  max-width: 48ch;
}

@media (max-width: 767px) {
  /* Portrait source (704 x 1282): a 3/2 cover crop would lose the
     label itself, so the stacked layout gives it a portrait cell. */
  .vqb-pack__cell--tall .vqb-pack__media { aspect-ratio: 3 / 4; }
}

@media (min-width: 768px) {
  .vqb-pack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* The interior shot carries the fabric texture of the unboxing,
       so it takes a two-track cell of its own instead of sharing a
       row. The portrait labelling photograph keeps its two-row cell
       on the right, and the bottom row closes with three equal
       cells, so no cell is orphaned. */
    grid-template-areas:
      "box   box   tall"
      "int   int   tall"
      "emb   metal sec";
  }
  .vqb-pack__cell--box   { grid-area: box; }
  .vqb-pack__cell--int   { grid-area: int; }
  .vqb-pack__cell--emb   { grid-area: emb; }
  .vqb-pack__cell--tall  { grid-area: tall; }
  .vqb-pack__cell--metal { grid-area: metal; }
  .vqb-pack__cell--sec   { grid-area: sec; }

  /* Cells spanning two tracks get a wider media band. The box
     render is landscape and frames well in a 21:9 band; the metal
     ornaments and the secondary box sit on near-square sources, so
     those cells stay closer to 4:3 or the subject is cut in half. */
  .vqb-pack__cell--box .vqb-pack__media   { aspect-ratio: 21 / 9; }
  .vqb-pack__cell--int .vqb-pack__media   { aspect-ratio: 16 / 9; }
  .vqb-pack__cell--emb .vqb-pack__media   { aspect-ratio: 4 / 3; }
  .vqb-pack__cell--metal .vqb-pack__media { aspect-ratio: 4 / 3; }
  .vqb-pack__cell--sec .vqb-pack__media   { aspect-ratio: 4 / 3; }

  /* The portrait cell fills its two-row height. */
  .vqb-pack__cell--tall .vqb-pack__media {
    aspect-ratio: auto;
    flex: 1;
    min-height: 340px;
  }
}

/* ── 6a · The style: ruled key points, no cards ─────────────── */
.vqb-style-list {
  list-style: none;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  border-top: 1px solid var(--vqb-rule);
}

.vqb-style-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--vqb-rule);
}

.vqb-style-item__num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  color: var(--vq-text-muted);
  padding-top: 5px;
}

.vqb-style-item__text {
  font-family: var(--font-text);
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--vq-text-mid);
  max-width: 62ch;
}

.vqb-style-item__text strong {
  color: var(--vq-text);
  font-weight: 500;
}

/* ── 6b · Voice: 4-up hairline grid + say / do not say ──────── */
.vqb-voice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--vqb-rule);
  border: 1px solid var(--vqb-rule);
  margin-top: clamp(48px, 6vw, 72px);
}

.vqb-voice__cell {
  background: var(--vq-bg);
  padding: var(--vqb-cell-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vqb-voice__num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  color: var(--vq-text-muted);
}

.vqb-voice__word {
  font-family: var(--font-headings);
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--vq-text);
}

.vqb-voice__note {
  font-family: var(--font-text);
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--vq-text-mid);
  max-width: 42ch;
}

@media (min-width: 640px) {
  .vqb-voice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .vqb-voice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vqb-say {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--vqb-rule);
  border: 1px solid var(--vqb-rule);
}

.vqb-say__head,
.vqb-say__cell {
  background: var(--vq-bg);
  padding: clamp(18px, 1.8vw, 26px);
  min-width: 0;
}

.vqb-say__head {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vq-text-muted);
  background: var(--vq-surface);
}

.vqb-say__cell {
  font-family: var(--font-text);
  font-size: var(--fs-15);
  line-height: 1.6;
}

.vqb-say__cell--yes { color: var(--vq-text); }
.vqb-say__cell--no  { color: var(--vq-text-muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.28); }

/* ── Tailor-Made reference (Ferrari Tailor Made) ───────────────
   A cited reference, not VELOQUE artwork: the source file is small
   (622 x 415), so the media column is capped to avoid upscaling. */
.vq-page--branding .vqb-split--reference .vq-split__media {
  align-self: start;
}

.vq-page--branding .vqb-split--reference .vq-split__media img {
  max-width: 622px;
  width: 100%;
  height: auto;
}

/* Hero without image (Vicente): give the text block room under the topbar. */
.vq-page--branding .vq-hero__text,
body.veloque-page:has(.vq-page--branding) .vq-hero__text { padding-top: clamp(120px, 16vh, 180px); }

/* ── Tier cards (Levels of belonging): rounded like real cards; Platinum
   goes much darker, a graphite with a purple undertone, engraving in a
   pale silver-lilac so it stays readable (≥ 7:1 on the darkest stop). */
.vq-page--branding .vq-tier-card { border-radius: clamp(12px, 1.4vw, 20px); }
.vq-page--branding .vq-tier-card--platinum {
  background: linear-gradient(135deg,
    #17131C 0%, #2A2333 30%, #4A4157 48%, #2B2434 70%, #141018 100%);
}
.vq-page--branding .vq-tier-card--platinum .vq-tier-card__mark { background-color: rgba(214, 204, 226, 0.92); }
.vq-page--branding .vq-tier-card--platinum .vq-tier-card__tier,
.vq-page--branding .vq-tier-card--platinum .vq-tier-card__wordmark,
.vq-page--branding .vq-tier-card--platinum .vq-tier-card__bottom {
  color: rgba(222, 214, 232, 0.92);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.vq-page--branding .vq-tier-card--platinum .vq-tier-card__sheen { opacity: 0.22; }