/* Black Rock Website V2 — local cinematic (MNTN chapters + Paymark nav) */

:root {
  --br-charcoal: #1a1a1f;
  --br-slate: #2d3436;
  --br-gold: #c9a227;
  --br-gold-hover: #a8861f;
  --br-sage: #6b8f71;
  --br-paper: #f4f1eb;
  --br-paper-2: #e8e4dc;
  --br-white: #fdfcfa;
  --br-text: #2c2c2c;
  --br-muted: #5a6470;
  --br-muted-dark: #b8c4ce;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--br-white);
  background: var(--br-charcoal);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--br-gold);
  color: var(--br-charcoal);
  padding: 0.75rem 1rem;
  z-index: 1000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.container {
  width: min(1120px, calc(100% - 2.5rem));
  margin-inline: auto;
}

/* —— Header (Paymark-inspired) —— */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(26, 26, 31, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-inner {
  height: 100%;
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* cube medallion + white-text wordmark supplied for dark backgrounds —
   no recolor filters or halo hacks needed on the charcoal header */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.logo__mark {
  height: 50px; /* +20% per owner */
  width: auto;
}

.logo__word {
  height: 44px; /* wordmark sized up per owner rounds */
  width: auto;
}

.nav-pill {
  display: none;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-pill a {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--br-muted-dark);
  transition: color 0.2s, background 0.2s;
}

.nav-pill a:hover,
.nav-pill a.is-active {
  color: var(--br-white);
  background: rgba(255, 255, 255, 0.08);
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--br-white);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-drawer {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.75rem;
  background: rgba(26, 26, 31, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer a {
  padding: 0.65rem 0;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 900px) {
  .nav-pill {
    display: flex;
  }

  .nav-toggle,
  .nav-drawer {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .header-inner {
    grid-template-columns: auto 1fr;
  }

  .logo {
    min-width: 0;
    overflow: visible;
  }

  .logo__word {
    flex-shrink: 0;
    max-width: none;
  }

  .header-actions {
    justify-self: end;
  }

  .nav-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .nav-drawer {
    z-index: 20;
    background: rgba(26, 26, 31, 0.98);
  }

  .nav-drawer .btn {
    font-size: 1rem;
    margin-top: 0.35rem;
  }
}

@media (max-width: 640px) {
  .header-actions .btn {
    display: none;
  }
}

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.15rem;
  border-radius: 0.35rem;
  appearance: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  cursor: pointer;
}

.btn--primary {
  background: var(--br-gold);
  color: var(--br-charcoal);
}

.btn--primary:hover {
  background: var(--br-gold-hover);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--br-white);
}

.btn--ghost:hover {
  border-color: var(--br-white);
}

.btn--lg {
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
}

.chapter--light .btn--ghost {
  border-color: rgba(26, 26, 31, 0.25);
  color: var(--br-text);
}

/* —— MNTN-style layered mountain hero ——
   Recreated from the reference build: three stretched layers inside a 100vh
   section over a dark navy base. On scroll (first viewport only) the sky lifts
   fastest (-60%), the mountain -30%, the foreground hill -10%; the copy is
   fixed to the viewport, rising -60% while fading out. Values are driven by
   main.js with a heavy lerp for the smoothed, floaty feel. */
.parallax-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0b1d26;
  color: var(--br-white);
}

/* zooms into the scene as the hero scrolls out (camera push). Split into a
   back half (sky, wordmark, mountain, gradient) and a front half (the dark
   foreground ridge) so the copy can sit BETWEEN them — the ridge leaves with
   the page and physically sweeps up over the text on scroll. */
.parallax-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 62%;
  will-change: transform;
  pointer-events: none;
}

.parallax-stage--back {
  z-index: 1;
}

.parallax-stage--front {
  z-index: 3;
}

.parallax-layer {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  /* the sky/mountain/hill layers are plain <img> elements whose width and
     height are set independently (height as a % of the hero, unrelated to
     the image's intrinsic ratio) — without object-fit, that stretches or
     squashes the artwork on any monitor whose aspect ratio doesn't match
     what the percentages were tuned for. object-fit: cover crops instead
     of distorting, keeping the source image's proportions intact. */
  object-fit: cover;
  will-change: transform;
  pointer-events: none;
}

.parallax-layer--sky {
  top: 0;
  /* taller than the hero so its bottom edge stays below the fold even at
     full -60% lift (1.3 - 0.6 = 0.7 viewport heights) */
  height: 130%;
  z-index: 1;
  /* cover's default center crop trims the box symmetrically top and bottom;
     anchoring top keeps the sky's upper region (behind the wordmark) intact
     and only trims from the bottom, which has room to spare at 130% height. */
  object-position: center top;
}

/* Giant wordmark sandwiched behind the mountain peak. Full-size box with the
   same transform-origin as the stage, so the JS inverse-scale exactly cancels
   the stage zoom and the text stays static on screen. */
.parallax-brand {
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 19vh;
  transform-origin: 50% 62%;
  font-family: "Prata", Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 10.5rem);
  /* full-ink line box — background-clip: text can't paint outside the line
     box, so anything below ~1.35 crops Prata's ascenders/descenders */
  line-height: 1.35;
  letter-spacing: 0.005em;
  user-select: none;
  /* the wordmark and the mountain peak drift at different rates while
     scrolling, so relying on the peak's opaque silhouette to keep the lower
     part of the wordmark hidden doesn't hold up — it can drift into view
     below the peak. This box's own rendered position is static regardless
     of scroll (the JS inverse-scale/translate cancel out exactly), so a
     fixed local mask reliably keeps everything below the peak's resting
     line hidden, independent of any scroll-driven drift. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 48%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 48%);
}

/* entrance: zooms forward from the distance while fading in; lives on a
   child so it never fights the JS parallax transform on the parent */
.parallax-brand__zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: brandZoomIn 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

@keyframes brandZoomIn {
  from {
    opacity: 0;
    transform: scale(0.74);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* "Consultancy" as small wide-tracked caps under the Prata wordmark;
   padding-left offsets the trailing letter-space so it stays centered */
.parallax-brand span + span {
  font-family: "Minion Pro", "Source Sans 3", "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 0.26em;
  letter-spacing: 0.58em;
  padding-left: 0.58em;
  text-transform: uppercase;
  margin-top: -0.55em;
}

/* translucent white veil — bright at the top, dissolving toward the scene */
.parallax-brand span {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(244, 249, 252, 0.8) 45%,
    rgba(230, 240, 246, 0.5) 78%,
    rgba(220, 232, 240, 0.34) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.parallax-layer--mountain {
  top: 40%;
  height: 60%;
  z-index: 3;
  /* the box is proportionally much shorter/wider than the source photo, so a
     center crop (cover's default) was trimming ~390px off both the top and
     bottom evenly — cutting the peak off. Anchoring to the top keeps the
     peak intact and crops the excess off the bottom instead, where the hill
     layer already covers the seam. */
  object-position: center top;
}

.parallax-layer--hill {
  top: 60%;
  /* extends 10% past the hero bottom so layer motion never exposes a gap
     strip above the next section */
  height: 50%;
  z-index: 6;
  /* bottom-anchoring this layer showed only the base of the source art,
     which turned out to be hazy ground mist, not the dark ridge — the crisp
     silhouette sits at the top of the source image, right where it meets
     the mountain layer above. Anchor top instead so that ridge is what
     actually renders. */
  object-position: center top;
  /* small fade at the very top of the box only, to soften the seam with the
     mountain layer above rather than a hard cut. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%);
}

/* Dark tint from the top-left — sits above sky + mountain, below copy + hill */
.parallax-gradient {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(135deg, #0b1d26, rgba(0, 0, 0, 0) 87%);
  pointer-events: none;
}

/* Bottom of the hero sinks to black over the mist band. Starts lower (more of
   the mountain/hill stays visible before any darkening) and ramps more
   gradually — a true fade hugging the base of the mountain rather than an
   overlay that goes visibly opaque partway up the slope. */
.parallax-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3%;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.22) 40%,
    rgba(0, 0, 0, 0.55) 70%,
    rgba(0, 0, 0, 0.85) 90%,
    #000 100%
  );
}

/* Copy floats fixed to the viewport while the hero is in view (JS adds
   .is-fixed); it rises and fades over the first viewport of scroll. */
.parallax-copy {
  position: absolute;
  inset: 0;
  /* sandwiched between the stage halves: over the sky/wordmark/mountain,
     behind the foreground ridge — the ridge occludes the copy on scroll */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* pushed below the giant wordmark zone */
  padding: calc(var(--header-h) + 20vh) 1.25rem 6vh;
  /* scale grows the headline in place (around its own content center)
     instead of drifting it toward the mountains */
  transform-origin: 50% 58%;
  pointer-events: none;
  will-change: transform, opacity;
}

.parallax-copy.is-fixed {
  position: fixed;
  height: 100vh;
  height: 100dvh;
  inset: 0 0 auto;
}

.parallax-copy a {
  pointer-events: auto;
}

.parallax-copy > * {
  position: relative;
  max-width: 640px;
  text-shadow:
    0 1px 2px rgba(11, 29, 38, 0.55),
    0 6px 24px rgba(11, 29, 38, 0.45);
}

.parallax-copy h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.08;
  margin: 0 0 1.1rem;
}

.parallax-copy .lead {
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.9);
}

.parallax-copy .scroll-cue {
  align-items: center;
  margin-top: 2.5rem;
}

.parallax-rail {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 215, 132, 0.75);
}

.parallax-rail span:first-child {
  color: var(--br-muted-dark);
  margin-bottom: 0.5rem;
}

@media (min-width: 900px) {
  .parallax-rail {
    display: flex;
  }
}

/* —— Chapters —— */
.chapter {
  position: relative;
  padding: 5.5rem 0 5rem;
  overflow: hidden;
}

/* —— What we offer: black interlude after the mountain hero —— */
.chapter--black {
  background: #000;
  color: var(--br-white);
  /* ~4in of breathing room above and below the content */
  padding: 24rem 0 24rem;
}

@media (max-width: 760px) {
  .chapter--black {
    padding: 9rem 0 9rem;
  }
}

/* ghost label running down the side, like a watermark */
.offer-ghost {
  position: absolute;
  top: 4.5rem;
  left: -0.6rem;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: "Prata", Georgia, serif;
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
}

.offer .chapter-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0;
}

/* —— header sequence: eyebrow tracks in → headline blurs into focus →
   gold rule draws out —— */
.offer .chapter-head .eyebrow {
  opacity: 0;
  transform: translateY(14px);
  letter-spacing: 0.4em;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
    letter-spacing 0.9s var(--ease);
}

.offer .chapter-head.is-in .eyebrow {
  opacity: 1;
  transform: none;
  letter-spacing: 0.16em;
}

.offer .chapter-head h2 {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity 0.9s var(--ease) 0.25s, transform 0.9s var(--ease) 0.25s,
    filter 0.9s var(--ease) 0.25s;
}

.offer .chapter-head.is-in h2 {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.offer .chapter-head::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: 1.6rem;
  background: linear-gradient(90deg, var(--br-gold), rgba(251, 215, 132, 0));
  transition: width 1.1s var(--ease) 0.75s;
}

.offer .chapter-head.is-in::after {
  width: 9rem;
}

.offer-list {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}

/* card: image on top, numbered description underneath */
.offer-row {
  display: flex;
  flex-direction: column;
}

/* —— choreographed intro: row rises, image wipes in and settles, then
   number → heading → copy cascade —— */
.offer-row.reveal {
  transform: translateY(64px);
}

.offer-row.reveal:nth-child(2) {
  transition-delay: 0.1s;
}

.offer-row.reveal:nth-child(3) {
  transition-delay: 0.2s;
}

.offer-row .offer-row__media {
  clip-path: inset(0 100% 0 0 round 4px);
  transition: clip-path 1s var(--ease) 0.15s;
}

.offer-row.reveal.is-in .offer-row__media {
  clip-path: inset(0 0 0 0 round 4px);
}

.offer-row .offer-row__media img {
  transform: scale(1.14);
}

.offer-row.reveal.is-in .offer-row__media img {
  transform: scale(1);
}

.offer-row .offer-row__n,
.offer-row .offer-row__body h3,
.offer-row .offer-row__body p {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.offer-row.reveal.is-in .offer-row__n {
  opacity: 1;
  transform: none;
  transition-delay: 0.3s;
}

.offer-row.reveal.is-in .offer-row__body h3 {
  opacity: 1;
  transform: none;
  transition-delay: 0.42s;
}

.offer-row.reveal.is-in .offer-row__body p {
  opacity: 1;
  transform: none;
  transition-delay: 0.54s;
}

.offer-row__n {
  display: block;
  font-family: "Prata", Georgia, serif;
  font-size: 1rem;
  color: var(--br-gold);
  margin: 1.5rem 0 0.6rem;
}

.offer-row__media {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
}

.offer-row__media img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.9);
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}

.offer-row:hover .offer-row__media img {
  transform: scale(1.045);
  filter: saturate(1) brightness(1);
}

.offer-row__body h3 {
  font-family: "Prata", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin: 0 0 0.6rem;
}

.offer-row__body p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .offer-list {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .offer-row__media img {
    height: 220px;
  }
}

.chapter--hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  display: flex;
  align-items: flex-end;
}

.chapter--dark {
  background: var(--br-charcoal);
  color: var(--br-white);
}

.chapter--light {
  background: var(--br-paper);
  color: var(--br-text);
}

.chapter-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  pointer-events: none;
}

.chapter-bg--mood {
  opacity: 0.28;
}

.chapter-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 31, 0.55), rgba(26, 26, 31, 0.92));
}

.chapter-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 500;
  color: rgba(201, 162, 39, 0.35);
  line-height: 1;
  margin: 0 0 0.5rem;
}

.chapter-num--dark {
  color: rgba(201, 162, 39, 0.45);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--br-gold);
  margin: 0 0 0.75rem;
}

.eyebrow--dark {
  color: var(--br-gold-hover);
}

.chapter h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  /* section headers hold to one line at desktop widths */
  max-width: 40ch;
}

.chapter-lead {
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--br-muted-dark);
  max-width: 46rem;
  margin: 0 0 2.5rem;
}

#offer.chapter--light {
  color: var(--br-text);
}

#offer.chapter--light h2 {
  max-width: 40ch;
}

.chapter-lead--dark {
  color: var(--br-muted);
}

.chapter-head {
  margin-bottom: 2rem;
}

/* —— Hero —— */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroKenBurns 28s var(--ease) infinite alternate;
}

@keyframes heroKenBurns {
  from {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.14) translate3d(-1.5%, -1%, 0);
  }
}

.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(26, 26, 31, 0.88) 0%, rgba(26, 26, 31, 0.45) 55%, rgba(26, 26, 31, 0.35) 100%),
    linear-gradient(180deg, rgba(26, 26, 31, 0.35) 0%, rgba(26, 26, 31, 0.75) 70%, rgba(26, 26, 31, 0.95) 100%);
}

/* Extra breathing room: a solid black hold (~4in/384px) right where the
   facility photo would otherwise start, then a fade into the image — instead
   of the image starting to reveal itself immediately. Scoped to #facility
   only so the shared .chapter--hero styling used by the Door 2 pages is
   untouched. */
#facility.chapter--hero {
  min-height: 0;
  align-items: flex-end;
}

/* Real element instead of a ::before — with hero-media inside a flex parent
   and overflow:hidden, the pseudo-element wasn't reliably painting above the
   Ken-Burns-animated hero-img in testing. A real last-child sibling removes
   any ambiguity about paint order. */
.hero-fade-in {
  /* short blend out of the dark overture above — the old 680px band (sized
     for the retired runway hero) blacked out the top half of the image and
     read as a dead gap above the copy */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(180deg, #0b1d26 0%, rgba(11, 29, 38, 0) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(900px, calc(100% - 2.5rem));
  margin: 0 auto 0 0;
  padding: calc(var(--header-h) + 0.35rem) 0 1.6rem;
  margin-left: max(1.25rem, calc((100% - 1120px) / 2));
  padding-right: 1.25rem;
}

.brand-mark {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--br-gold);
  margin: 0 0 1.25rem;
}

.brand-mark--display {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-bottom: 0.85rem;
}

.chapter--hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 0.85rem;
  /* wide enough that the headline holds to two lines */
  max-width: 28ch;
}

.lead {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--br-muted-dark);
  max-width: 42rem;
  margin: 0 0 1.35rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 3rem;
}

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--br-muted-dark);
}

.scroll-cue__line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(180deg, var(--br-gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(0.85);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* —— Cards / steps / proof —— */
.card-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .card-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  padding: 1.5rem 1.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0 0 0.65rem;
  color: var(--br-white);
}

.card p {
  margin: 0;
  color: var(--br-muted-dark);
  font-size: 0.98rem;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

.steps li {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(201, 162, 39, 0.35);
}

.steps h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

.steps p {
  margin: 0;
  color: var(--br-muted-dark);
  font-size: 0.95rem;
}

.proof-strip {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .proof-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.proof-strip li {
  padding: 1.5rem 1.25rem;
  background: var(--br-white);
  border: 1px solid rgba(26, 26, 31, 0.08);
  border-radius: 0.5rem;
}

.proof-strip__n {
  display: block;
  /* numerals set in the sans — the display serif's old-style figures misread */
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--br-charcoal);
  line-height: 1.1;
}

.proof-strip__l {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--br-muted);
}

/* —— Isometrics —— */
.iso-plate {
  margin: 0 0 1.75rem;
  border-radius: 0.65rem;
  overflow: hidden;
  background: var(--br-white);
  border: 1px solid rgba(26, 26, 31, 0.08);
  box-shadow: 0 18px 50px rgba(26, 26, 31, 0.08);
}

.chapter--dark .iso-plate {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.iso-plate img {
  width: 100%;
  transform: translateY(0);
  will-change: transform;
}

.iso-plate figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.25rem;
  padding: 0.85rem 1.1rem 1.1rem;
  font-size: 0.85rem;
  color: var(--br-muted);
}

/* key figures pulled out of the rasters into crisp chips */
.iso-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.iso-stat {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(185, 141, 47, 0.45);
  color: #8a6a1f;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* HTML color key — replaces the raster legend plate */
.iso-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--br-muted);
}

.iso-key li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.iso-key__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  background: var(--dot, #999);
}

/* click-to-zoom */
.iso-plate img {
  cursor: zoom-in;
}

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5vh 2.5vw;
  background: rgba(6, 8, 10, 0.94);
  cursor: zoom-out;
}

.lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.chapter--dark .iso-plate figcaption {
  color: var(--br-muted-dark);
}

.iso-plate--narrow {
  max-width: 520px;
}

.iso-plate--app {
  margin-top: 2.5rem;
  max-width: 720px;
}

/* —— V4 product-type grid —— */
.format-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 0 0 2.25rem;
  padding: 0;
}
.format-grid .card {
  margin: 0;
  padding: 1.25rem 1.35rem 1.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.65rem;
}
.format-grid h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  margin: 0 0 0.45rem;
  color: #f4f1eb;
}
.format-grid p {
  margin: 0;
  color: var(--br-muted-dark, #b8b3a8);
  font-size: 0.95rem;
}

#delta.chapter--light {
  padding-bottom: 0;
  border-top: 1px solid rgba(26, 26, 31, 0.08);
}

.delta-assess {
  background: #0c1114;
  color: var(--br-white);
  margin-top: 3.25rem;
}

.h2-nowrap {
  white-space: nowrap;
}

.journal-head {
  margin: 1.6rem 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--br-text);
}

.journal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.journal-list li {
  padding: 0.85rem 0 0.95rem;
  border-top: 1px solid rgba(26, 26, 31, 0.1);
}

.journal-list cite {
  display: block;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--br-sage-700, #3d6b47);
}

.journal-list p {
  margin: 0.25rem 0 0;
}

.journal-note {
  margin: 1.1rem 0 0;
  color: var(--br-text-muted);
  font-size: 0.92rem;
}

.browser-preview {
  margin: 0.5rem auto 0;
  max-width: 1024px;
}

.browser-chrome {
  background: #10161b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
}

.browser-chrome__bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.9rem;
  background: #1a1f24;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-chrome__dots {
  display: flex;
  gap: 0.35rem;
}

.browser-chrome__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3d454c;
}

.browser-chrome__dots i:nth-child(1) { background: #c9847a; }
.browser-chrome__dots i:nth-child(2) { background: #c9a227; }
.browser-chrome__dots i:nth-child(3) { background: #6b8f71; }

.browser-chrome__url {
  flex: 1;
  min-width: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-chrome__screen {
  position: relative;
  min-height: 390px;
  padding: 1.15rem 1.2rem 2.6rem;
  background: #f4f1eb;
  color: #2c2c2c;
}

.browser-chrome__screen--tall {
  min-height: 680px;
  padding: 0 0 2.5rem;
}

.browser-chrome__screen--map {
  min-height: 0;
  padding: 0.9rem 0.95rem 1rem;
  pointer-events: none;
  user-select: none;
}

.browser-chrome__screen--portal {
  min-height: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  background: #f6f3ee;
  color: #2c2c2c;
  overflow: hidden;
}

.portal-appbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 44px;
  padding: 0 0.95rem;
  background: #1a1a1f;
}

.portal-appbar__mark {
  height: 20px;
  width: auto;
}

.portal-appbar__word {
  height: 16px;
  width: auto;
}

.portal-stage {
  position: relative;
  display: grid;
  height: clamp(230px, 37vw, 390px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.portal-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.2rem;
  background: linear-gradient(180deg, rgba(246, 243, 238, 0), #f6f3ee 88%);
  pointer-events: none;
  z-index: 2;
}

.portal-slide--shot {
  overflow: hidden;
  height: 100%;
}

.portal-slide--shot img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.portal-slide--shot img.is-touring {
  animation: portalTourPan 7.6s cubic-bezier(0.33, 0.08, 0.2, 1) both;
}

@keyframes portalTourPan {
  0%,
  10% {
    transform: translate3d(0, 0, 0);
  }
  88%,
  100% {
    transform: translate3d(0, var(--portal-pan, -48%), 0);
  }
}

.portal-slide--map {
  padding: 0.9rem 0.95rem 2.25rem;
  background: #f6f3ee;
}

.portal-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.7rem;
}

.portal-split--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-card {
  background: #fff;
  border: 1px solid rgba(26, 26, 31, 0.1);
  border-radius: 10px;
  padding: 0.75rem 0.8rem 0.85rem;
}

.portal-card--center {
  text-align: center;
}

.portal-card__kicker {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6470;
}

.portal-zone + .portal-zone {
  margin-top: 0.55rem;
}

.portal-zone__band {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.portal-zone__band--origin { background: #3d6b47; }
.portal-zone__band--export { background: #2d6a9f; }
.portal-zone__band--us { background: #1a4a63; }

.portal-vg {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-vg li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0;
  font-size: 0.78rem;
}

.portal-vg i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8d3c8;
}

.portal-vg .is-done i { background: #3d6b47; }
.portal-vg .is-now i {
  background: #c9a227;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
  animation: portalPulse 2.2s ease-in-out infinite;
}

.portal-vg b { font-weight: 650; color: #2c2c2c; }
.portal-vg em { font-style: normal; color: #5a6470; font-size: 0.7rem; }

.portal-tl {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.85rem;
  border-left: 2px solid #e8e4dc;
}

.portal-tl li {
  position: relative;
  padding: 0 0 0.7rem 0.7rem;
  font-size: 0.8rem;
}

.portal-tl li::before {
  content: "";
  position: absolute;
  left: -0.95rem;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8d3c8;
}

.portal-tl .is-done::before { background: #3d6b47; }
.portal-tl .is-now::before {
  background: #c9a227;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.22);
}

.portal-tl b { display: block; }
.portal-tl span { color: #5a6470; font-size: 0.72rem; }

.portal-track-grid {
  display: grid;
  grid-template-columns: 1fr 11.5rem;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.portal-eta {
  background: #2d5016;
  color: #fff;
  border-radius: 10px;
  padding: 0.9rem 0.95rem;
}

.portal-eta small {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.portal-eta strong {
  display: block;
  margin: 0.25rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.portal-eta p {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}

.portal-note {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #f8efd2;
  font-size: 0.75rem;
  color: #6b5410;
}

.portal-seal {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0.4rem auto 0.55rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #3d6b47;
  color: #fff;
  font-size: 1.5rem;
}

.portal-docs {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  text-align: left;
}

.portal-docs li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 7px;
  background: #f4f1eb;
  font-size: 0.75rem;
}

.portal-docs .is-in span { color: #3d6b47; font-weight: 650; }

.portal-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: #2d5016;
  color: #fff;
}

.portal-banner small {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.portal-banner strong {
  display: block;
  margin: 0.2rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.portal-banner p {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}

.portal-banner > b {
  font-size: 0.85rem;
  white-space: nowrap;
}

.portal-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0;
}

.portal-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 650;
  color: #5a6470;
}

.portal-steps i {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #e8e4dc;
}

.portal-steps .is-done i { background: #3d6b47; }
.portal-steps .is-now i {
  background: #c9a227;
  animation: portalPulse 2.2s ease-in-out infinite;
}

.portal-meta {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-meta li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(26, 26, 31, 0.06);
  font-size: 0.78rem;
}

.portal-meta span { color: #5a6470; }

@keyframes portalPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2); }
  50% { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0.08); }
}

@media (max-width: 800px) {
  .portal-split,
  .portal-split--3,
  .portal-track-grid,
  .portal-steps {
    grid-template-columns: 1fr;
  }
  .portal-stage { min-height: 0; }
}

.portal-slide {
  grid-area: 1 / 1;
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  z-index: 0;
}

.portal-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

@keyframes portalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.portal-slide__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.portal-slide__hd span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a6470;
}

.portal-slide__hd strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #2d5016;
}

.portal-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.portal-kpis div {
  background: #fff;
  border: 1px solid rgba(26, 26, 31, 0.1);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}

.portal-kpis small {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6470;
}

.portal-kpis b {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: #2d5016;
}

.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.portal-table th,
.portal-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid rgba(26, 26, 31, 0.08);
}

.portal-table th {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5a6470;
}

.portal-gates__sub {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.78rem;
  color: #5a6470;
}

.portal-gates__progress {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: #3d6b47;
}

.portal-zones {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.portal-zones__z {
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

.portal-zones__z--origin { background: #6b8f71; }
.portal-zones__z--export { background: #7eb3d4; }
.portal-zones__z--us { background: #2d5016; }

.portal-gates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.35rem;
}

.portal-gates li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  font-size: 0.62rem;
  color: #5a6470;
}

.portal-gates li b {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8e4dc;
  color: #5a6470;
  font-size: 0.68rem;
}

.portal-gates li.is-done b {
  background: #3d6b47;
  color: #fff;
}

.portal-gates li.is-now b {
  background: #c9a227;
  color: #1a1a1f;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.28);
}

.portal-gates li span {
  font-weight: 650;
  color: #2c2c2c;
  line-height: 1.2;
}

.portal-gates-plate {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(26, 26, 31, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.portal-gates-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.portal-map {
  margin: 0 0 0.7rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(26, 26, 31, 0.1);
  background: #d7e4ec;
}

.portal-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.portal-map__label {
  font-size: 9px;
  font-weight: 700;
  fill: #2d3436;
  font-family: "Source Sans 3", system-ui, sans-serif;
}

.portal-map__ship {
  offset-path: path("M720 208 C580 175 400 145 248 158");
  offset-distance: 42%;
  animation: portalShip 11s ease-in-out infinite alternate;
}

.portal-map__dray {
  offset-path: path("M248 158 L118 188");
  offset-distance: 35%;
  animation: portalTruck 8s ease-in-out infinite alternate;
}

@keyframes portalShip {
  from { offset-distance: 8%; }
  to { offset-distance: 92%; }
}

@keyframes portalTruck {
  from { offset-distance: 6%; }
  to { offset-distance: 94%; }
}

.portal-map__eta {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: #3d6b47;
}

.portal-legs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.portal-legs li {
  padding: 0.4rem 0.5rem;
  border-radius: 7px;
  background: #e8e4dc;
  font-size: 0.72rem;
  color: #5a6470;
}

.portal-legs li b {
  display: block;
  color: #2c2c2c;
}

.portal-legs li.is-done { background: #dce8de; }
.portal-legs li.is-now { background: #f3e6b8; }

@media (prefers-reduced-motion: reduce) {
  .portal-map__ship,
  .portal-map__dray { animation: none; }
  .portal-slide {
    transition: none;
  }
  .portal-slide--shot img,
  .portal-slide--shot img.is-touring {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

.portal-track__eta {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
}

.portal-track__steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0;
}

.portal-track__steps li {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: #e8e4dc;
  font-size: 0.78rem;
}

.portal-track__steps li.is-done { background: #dce8de; color: #3d6b47; }
.portal-track__steps li.is-now { background: #c9a227; color: #1a1a1f; font-weight: 650; }

.portal-track__note,
.portal-plan p {
  margin: 0;
  color: #5a6470;
}

.portal-order {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.portal-order li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid rgba(26, 26, 31, 0.1);
  border-radius: 8px;
}

.portal-plan {
  background: #fff;
  border: 1px solid rgba(26, 26, 31, 0.1);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.15rem;
}

.portal-plan__bar {
  height: 8px;
  margin: 1rem 0 0.45rem;
  border-radius: 999px;
  background: #e8e4dc;
  overflow: hidden;
}

.portal-plan__bar i {
  display: block;
  height: 100%;
  background: #6b8f71;
}

.portal-plan__cap {
  margin: 0;
  font-size: 0.8rem;
  color: #5a6470;
}

.browser-preview .app-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: auto;
  z-index: 3;
}

.browser-preview .app-dots button {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.browser-preview .app-dots button::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-radius: 50%;
  background: #c5c0b6;
}

.browser-preview .app-dots button.is-active::before {
  background: #c9a227;
}

@media (max-width: 900px) {
  .h2-nowrap { white-space: normal; }
}

@media (max-width: 640px) {
  .portal-kpis { grid-template-columns: 1fr; }
  .portal-gates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal-legs { grid-template-columns: 1fr; }
}

.chapter--access {
  background: #eef1f3;
  color: var(--br-text);
  min-height: 32rem;
  display: flex;
  align-items: center;
}

.access-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 92% center;
}

.access-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 32rem);
  gap: 2.25rem;
  align-items: center;
}

.access-copy {
  background: rgba(253, 252, 250, 0.9);
  backdrop-filter: blur(10px);
  padding: 2rem 2.15rem 2.2rem;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(26, 26, 31, 0.1);
}

.access-copy h2 {
  margin: 0 0 0.7rem;
}

.access-points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.access-points li {
  position: relative;
  padding-left: 1.45rem;
}

.access-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--br-gold, #c9a227);
}

.access-plate {
  margin: 0;
}

.access-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(26, 26, 31, 0.18);
}

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

.card-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  background: rgba(61, 107, 71, 0.1);
  color: var(--br-sage-700, #3d6b47);
}

.card-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.journal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
}

.journal-grid li {
  padding: 0.7rem 0.7rem 0.75rem;
  border: 1px solid rgba(26, 26, 31, 0.1);
  border-radius: 8px;
  background: #fff;
}

.journal-grid h4 {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--br-text);
}

.journal-grid cite {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: var(--br-sage-700, #3d6b47);
}

@media (max-width: 1100px) {
  .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.access-dialog {
  width: min(28rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #fdfcfa;
  color: var(--br-text);
  box-shadow: 0 28px 70px rgba(26, 26, 31, 0.28);
}

.access-dialog::backdrop {
  background: rgba(26, 26, 31, 0.55);
}

.access-form {
  position: relative;
  padding: 1.5rem 1.55rem 1.65rem;
  display: grid;
  gap: 0.7rem;
}

.access-dialog__close {
  position: absolute;
  top: 0.7rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: #5a6470;
  cursor: pointer;
}

.access-form h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.access-form__lead {
  margin: 0;
  color: var(--br-text-muted);
  font-size: 0.92rem;
}

.access-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.access-form input,
.access-form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(26, 26, 31, 0.14);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--br-text);
  background: #fff;
}

.access-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.access-form__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: #3d6b47;
}

.access-form__status.is-error {
  color: #8b2635;
}

/* —— Facility fit matrix (replaces the retired isometric score plates) —— */
.fit-matrix {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 2rem;
  font-size: 0.95rem;
  text-align: left;
}

.fit-matrix th,
.fit-matrix td {
  padding: 0.9rem 1rem 0.9rem 0;
  border-top: 1px solid rgba(26, 26, 31, 0.12);
  vertical-align: top;
}

.fit-matrix thead th {
  border-top: none;
  padding-top: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 26, 31, 0.55);
}

.fit-matrix tbody th {
  font-weight: 600;
  color: var(--br-text);
  width: 34%;
}

.fit-matrix td a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fit-tag {
  display: inline-block;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.fit-tag--strong {
  background: rgba(62, 122, 68, 0.12);
  color: #2c5a33;
  border: 1px solid rgba(62, 122, 68, 0.35);
}

.fit-tag--workable {
  background: rgba(185, 141, 47, 0.12);
  color: #8a6a1f;
  border: 1px solid rgba(185, 141, 47, 0.4);
}

.fit-tag--other {
  background: rgba(122, 125, 129, 0.12);
  color: #4c4f53;
  border: 1px solid rgba(122, 125, 129, 0.4);
}

/* dark-surface variant (section 03 comparison table) */
.chapter--dark .fit-matrix th,
.chapter--dark .fit-matrix td {
  border-color: rgba(255, 255, 255, 0.14);
}

.chapter--dark .fit-matrix thead th {
  color: rgba(255, 255, 255, 0.55);
}

.chapter--dark .fit-matrix tbody th {
  color: #fff;
}

.chapter--dark .fit-matrix td {
  color: rgba(255, 255, 255, 0.75);
}

/* —— Proof band: thin chapter under the hero —— */
.chapter--band {
  padding: 3rem 0;
}

.chapter--dark .supply-note {
  color: rgba(255, 255, 255, 0.6);
}

/* —— Path cards: terms-grid reused as a plain 2-up (div children skip the counter) —— */
/* Compound selector: .terms-grid (defined later in this file) sets
   margin: 2.5rem 0 0 and was silently zeroing the bottom gap between the
   path cards and the fit matrix. ~1in of air before the table. */
.terms-grid.path-cards {
  margin: 2.5rem 0 6rem;
}

.path-cards .card--light h3 {
  margin: 0.35rem 0 0.6rem;
}

@media (max-width: 680px) {
  .fit-matrix thead {
    display: none;
  }

  .fit-matrix,
  .fit-matrix tbody,
  .fit-matrix tr,
  .fit-matrix tbody th,
  .fit-matrix td {
    display: block;
    width: 100%;
  }

  .fit-matrix tbody tr {
    border-top: 1px solid rgba(26, 26, 31, 0.12);
    padding: 0.85rem 0;
  }

  .fit-matrix tbody th,
  .fit-matrix td {
    border: none;
    padding: 0.15rem 0;
  }
}

/* —— Technology: facility assessment tool (dark panel + app mockup) —— */
.chapter--tech {
  background: #0c1114;
  color: var(--br-white);
  padding: 0;
}

/* copy overlaid on the tablet photo: headline upper-left, checklist + CTA
   lower-right, caption centered under the tablet */
.tech-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.tech-overlay .tech-copy {
  position: absolute;
  left: max(1.25rem, calc((100% - 1120px) / 2));
  top: 10%;
  max-width: 46%;
}

/* CTA rides top-right, vertically aligned with the headline */
.tech-overlay .tech-cta {
  position: absolute;
  top: 16%;
  right: calc(max(1.25rem, (100% - 1120px) / 2) + 5.5rem);
  pointer-events: auto;
}

/* sub head tucked under the headline */
.tech-copy .tech-sub {
  margin: 1.1rem 0 0;
  max-width: 44ch;
  font-size: calc(1rem + 1px);
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* bullets as a horizontal row beneath the tablet */
.tech-overlay .tech-list {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5.5%;
  display: flex;
  gap: 2.75rem;
  margin: 0;
  white-space: nowrap;
}


.tech-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  /* sized so each half of the wordmark holds one line (two lines total) */
  font-size: clamp(1.5rem, 2.35vw, 2.25rem);
  line-height: 1.16;
  white-space: nowrap;
  margin: 0 0 1.1rem;
}

.tech-lead {
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
  margin: 0 0 1.6rem;
}

/* Black Rock wordmark in the app top bar */
.app-top__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
}

.app-top__brand i {
  width: 3px;
  height: 15px;
  background: var(--br-gold);
}

.tech-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.tech-list li {
  position: relative;
  padding-left: 2rem;
  color: rgba(255, 255, 255, 0.85);
}

.tech-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(251, 215, 132, 0.16);
  color: var(--br-gold);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* — app on a held tablet: photo scene + screen-fitted frame — */
.app-shell {
  min-width: 0;
}

/* full-bleed band: photo spans the entire section width */
.app-shell--full .app-scene {
  border-radius: 0;
  box-shadow: none;
}

.app-scene {
  --tablet-zoom: 1.3;
  --tablet-origin-x: 50%;
  --tablet-origin-y: 58%;
  --tablet-screen-left: 25.9%;
  --tablet-screen-top: 36.99%;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.app-scene__photo {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(var(--tablet-zoom));
  transform-origin: var(--tablet-origin-x) var(--tablet-origin-y);
}

.app-frame {
  display: flex;
  background: #10161b;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
}

/* pinned to the tablet's measured screen rectangle (tall image variant);
   JS scales the fixed 720x450 logical layout to fit (--app-scale) */
.app-scene .app-frame {
  position: absolute;
  left: calc(var(--tablet-origin-x) + (var(--tablet-screen-left) - var(--tablet-origin-x)) * var(--tablet-zoom));
  top: calc(var(--tablet-origin-y) + (var(--tablet-screen-top) - var(--tablet-origin-y)) * var(--tablet-zoom));
  width: 720px;
  height: 450px;
  transform-origin: 0 0;
  transform: scale(var(--app-scale, 1));
  border: none;
  border-radius: 10px;
}

/* faint screen glare for realism */
.app-scene .app-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 34%);
  pointer-events: none;
}

.app-main {
  display: flex;
  flex-direction: column;
}

.app-slide.is-active {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-dots {
  margin-top: auto;
}

/* lifelike overhead floor plan slide */
.app-floor {
  position: relative;
  height: 100%;
  min-height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.app-floor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.6rem 0.28rem 1.15rem;
  border-radius: 999px;
  background: rgba(10, 14, 18, 0.82);
  color: #fff;
  white-space: nowrap;
}

.app-pin::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.app-pin--reuse::before {
  background: #4ecb59;
}

.app-pin--retrofit::before {
  background: #ffcf5c;
}

.app-pin--new::before {
  background: #ff5f5a;
}

.app-pin--idle::before {
  background: rgba(255, 255, 255, 0.55);
}

.app-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.85rem;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.app-side__logo {
  width: 24px;
  height: 24px;
  background: url("assets/brand/mark-cube.png?v=1") center / contain no-repeat;
  margin-bottom: 0.6rem;
}

.app-side__dot {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 3px, transparent 3.5px);
  transition: background 0.3s var(--ease);
  z-index: 7;
}

.app-side__dot:hover,
.app-side__dot:focus-visible {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 3px, transparent 3.5px);
}

.app-side__dot.is-on {
  background: radial-gradient(circle, var(--br-gold) 3px, transparent 3.5px);
}

/* progress ring: sweeps around the active dot over the slide's 3.2s dwell */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.app-side__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: conic-gradient(var(--br-gold) var(--sweep), rgba(255, 255, 255, 0.28) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  opacity: 0;
  pointer-events: none;
}

.app-side__dot.is-on::before {
  opacity: 1;
  animation: sideSweep 3.2s linear forwards;
}

@keyframes sideSweep {
  from {
    --sweep: 0deg;
  }
  to {
    --sweep: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-side__dot.is-on::before {
    animation: none;
    --sweep: 360deg;
  }
}

.app-main {
  flex: 1;
  padding: 1.1rem 1.25rem 1rem;
  min-width: 0;
  position: relative;
}

/* full-surface link: clicking the tablet's main screen opens the assessment */
.app-main__link {
  position: absolute;
  inset: 0 0 3.25rem 0;
  z-index: 6;
}

.tech-line {
  margin: 0.85rem 0 0;
}

.tech-line a {
  color: var(--br-gold);
  font-weight: 600;
  font-size: 1.05rem;
}

.tech-line a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.app-top__title {
  font-weight: 600;
  font-size: 0.95rem;
}

.app-top__badge {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}

.app-slide {
  display: none;
}

.app-slide.is-active {
  display: block;
  animation: appSlideIn 0.5s var(--ease) both;
}

@keyframes appSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.app-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.app-card {
  background: #171f26;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  min-width: 0;
}

.app-card--wide {
  grid-column: span 2;
}

.app-card--full {
  grid-column: 1 / -1;
}

.app-card--tall {
  grid-column: span 1;
}

.app-card__label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.5rem;
}

.app-card__big {
  font-family: "Prata", Georgia, serif;
  font-size: 1.9rem;
  line-height: 1;
}

/* fit gauge */
.app-card--gauge {
  display: flex;
  flex-direction: column;
}

@property --gauge {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.app-gauge {
  --gauge: 270deg;
  align-self: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #171f26 78%, transparent 79% 100%),
    conic-gradient(var(--br-gold) var(--gauge), rgba(255, 255, 255, 0.1) var(--gauge));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Prata", Georgia, serif;
  font-size: 1.15rem;
}

.app-gauge i {
  font-style: normal;
}

.app-slide.is-active .app-gauge {
  animation: gaugeSweep 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}

@keyframes gaugeSweep {
  from {
    --gauge: 0deg;
  }
  to {
    --gauge: 270deg;
  }
}

.app-gauge small {
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.5);
}

/* disposition bar */
.app-bar {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 600;
}

.app-bar__seg {
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
}

.app-bar__seg--reuse {
  background: #3e7a44;
}

.app-bar__seg--retrofit {
  background: #b98d2f;
  color: #1c1503;
}

.app-bar__seg--new {
  background: #c8332f;
}

.app-bar__key {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
}

.app-bar__key i,
.app-feed i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex: none;
}

.k-reuse {
  background: #3e7a44;
}

.k-retrofit {
  background: #b98d2f;
}

.k-new {
  background: #c8332f;
}

/* activity feed */
.app-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.78);
}

.app-feed li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.app-feed time {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.35);
}

/* equipment chips */
.app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.app-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.app-chip--reuse {
  background: rgba(62, 122, 68, 0.18);
  border-color: rgba(62, 122, 68, 0.55);
  color: #8fce96;
}

.app-chip--retrofit {
  background: rgba(185, 141, 47, 0.16);
  border-color: rgba(185, 141, 47, 0.55);
  color: #e4c47a;
}

.app-chip--new {
  background: rgba(200, 51, 47, 0.14);
  border-color: rgba(200, 51, 47, 0.5);
  color: #eb8c89;
}

.app-chip--idle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.55);
}

/* capex rows */
.app-rows {
  display: grid;
  gap: 0.6rem;
}

.app-row {
  display: grid;
  grid-template-columns: 5.2rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.78);
}

.app-row i {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--br-gold), rgba(251, 215, 132, 0.35));
}

.app-row b {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* timeline steps */
.app-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.app-steps span {
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
}

.app-steps .is-done {
  background: rgba(62, 122, 68, 0.18);
  border-color: rgba(62, 122, 68, 0.5);
  color: #8fce96;
}

.app-steps .is-now {
  background: rgba(251, 215, 132, 0.14);
  border-color: rgba(251, 215, 132, 0.55);
  color: var(--br-gold);
}

/* story-style timed progress pills */
.app-dots {
  position: relative;
  z-index: 7;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.app-dots button {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  overflow: visible;
  cursor: pointer;
}

.app-dots button::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 20px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.app-dots button.is-active::before {
  background: rgba(255, 255, 255, 0.28);
}

.app-dots button.is-active::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 20px;
  height: 4px;
  background: var(--br-gold);
  transform-origin: left;
  animation: dotFill 3.2s linear forwards;
}

@keyframes dotFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* —— per-slide entrance choreography (replays on every slide switch) —— */
.app-slide.is-active .app-card {
  animation: appCardIn 0.5s var(--ease) both;
}

.app-slide.is-active .app-card:nth-child(2) {
  animation-delay: 0.07s;
}

.app-slide.is-active .app-card:nth-child(3) {
  animation-delay: 0.14s;
}

.app-slide.is-active .app-card:nth-child(4) {
  animation-delay: 0.21s;
}

.app-slide.is-active .app-card:nth-child(5) {
  animation-delay: 0.28s;
}

@keyframes appCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.app-slide.is-active .app-bar__seg,
.app-slide.is-active .app-row i {
  transform-origin: left;
  animation: growX 0.9s var(--ease) 0.25s both;
}

.app-slide.is-active .app-bar__seg:nth-child(2),
.app-slide.is-active .app-row:nth-child(2) i {
  animation-delay: 0.4s;
}

.app-slide.is-active .app-bar__seg:nth-child(3),
.app-slide.is-active .app-row:nth-child(3) i {
  animation-delay: 0.55s;
}

@keyframes growX {
  from {
    transform: scaleX(0);
  }
}

.app-slide.is-active .app-feed li {
  animation: feedIn 0.5s var(--ease) both;
}

.app-slide.is-active .app-feed li:nth-child(1) {
  animation-delay: 0.35s;
}

.app-slide.is-active .app-feed li:nth-child(2) {
  animation-delay: 0.5s;
}

.app-slide.is-active .app-feed li:nth-child(3) {
  animation-delay: 0.65s;
}

@keyframes feedIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.app-slide.is-active .app-chip,
.app-slide.is-active .app-steps span {
  animation: chipIn 0.45s var(--ease) both;
}

.app-slide.is-active .app-chip:nth-child(1),
.app-slide.is-active .app-steps span:nth-child(1) {
  animation-delay: 0.15s;
}

.app-slide.is-active .app-chip:nth-child(2),
.app-slide.is-active .app-steps span:nth-child(2) {
  animation-delay: 0.23s;
}

.app-slide.is-active .app-chip:nth-child(3),
.app-slide.is-active .app-steps span:nth-child(3) {
  animation-delay: 0.31s;
}

.app-slide.is-active .app-chip:nth-child(4),
.app-slide.is-active .app-steps span:nth-child(4) {
  animation-delay: 0.39s;
}

.app-slide.is-active .app-chip:nth-child(5),
.app-slide.is-active .app-steps span:nth-child(5) {
  animation-delay: 0.47s;
}

@keyframes chipIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.app-slide.is-active .app-pin {
  animation: pinPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.app-slide.is-active .app-pin:nth-of-type(1) {
  animation-delay: 0.35s;
}

.app-slide.is-active .app-pin:nth-of-type(2) {
  animation-delay: 0.55s;
}

.app-slide.is-active .app-pin:nth-of-type(3) {
  animation-delay: 0.75s;
}

.app-slide.is-active .app-pin:nth-of-type(4) {
  animation-delay: 0.95s;
}

@keyframes pinPop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.app-pin::before {
  animation: pinPulse 2.4s ease-out infinite;
}

@keyframes pinPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (max-width: 980px) {
  .tech-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .app-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-card--wide {
    grid-column: 1 / -1;
  }
}

/* small screens: drop the photo frame, stack the copy, app UI full-width */
@media (max-width: 700px) {
  .app-scene__photo {
    display: none;
  }

  .tech-overlay {
    position: relative;
    padding: 3.5rem 1.25rem 2rem;
    display: grid;
    gap: 2rem;
  }

  .tech-overlay .tech-copy,
  .tech-overlay .tech-cta,
  .tech-overlay .tech-list {
    position: static;
    max-width: none;
    transform: none;
  }

  .tech-overlay .tech-list {
    flex-direction: column;
    gap: 0.7rem;
    white-space: normal;
  }

  .tech-copy h2 {
    white-space: normal;
  }

  .app-scene .app-frame {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.09);
  }

  .app-floor {
    height: 260px;
  }

  .app-main__link {
    pointer-events: none;
  }

  body {
    font-size: calc(1rem - 1pt);
  }

  .app-frame {
    font-size: calc(1em - 1pt);
  }

  .app-top__badge {
    display: none;
  }

  .app-side {
    padding: 0.65rem 0.4rem;
    gap: 0.5rem;
  }

  .app-side__logo {
    width: 16px;
    height: 16px;
    margin-bottom: 0.2rem;
  }

  .app-side__dot {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.22);
  }

  .app-side__dot:hover,
  .app-side__dot:focus-visible {
    background: rgba(255, 255, 255, 0.45);
  }

  .app-side__dot.is-on {
    background: var(--br-gold);
  }

  .app-side__dot::before {
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
  }

  .app-cards--snapshot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .app-cards--snapshot .app-card {
    padding: 0.5rem 0.45rem 0.55rem;
  }

  .app-cards--snapshot .app-card__label {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.28rem;
  }

  .app-cards--snapshot .app-card__big {
    font-size: 1.35rem;
  }

  .app-cards--snapshot .app-gauge {
    width: 46px;
    height: 46px;
    font-size: 0.88rem;
  }

  .app-cards--snapshot .app-card--wide,
  .app-cards--snapshot .app-card--tall {
    grid-column: 1 / -1;
  }

  .app-cards--snapshot .app-bar {
    height: 22px;
    font-size: 0.62rem;
  }

  .app-cards--snapshot .app-feed {
    display: grid;
    gap: 0.35rem;
  }

  .app-cards--map {
    gap: 0.35rem;
  }

  .app-cards--map .app-card {
    padding: 0.4rem 0.5rem 0.42rem;
  }

  .app-cards--map .app-card__label {
    margin-bottom: 0.22rem;
    font-size: 0.58rem;
  }

  .app-cards--map .app-chips {
    gap: 0.28rem;
  }

  .app-cards--map .app-chip {
    font-size: 0.62rem;
    padding: 0.16rem 0.48rem;
  }
}

@media (max-width: 980px) and (min-width: 701px) {
  .app-scene {
    --tablet-zoom: 1.08;
  }

  .tech-copy h2,
  .tech-overlay .tech-list {
    white-space: normal;
  }

  .tech-overlay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    padding-top: 2.5rem;
  }
}

.chapter--cta {
  padding-bottom: 6rem;
}

.chapter-cta h2 {
  max-width: 16ch;
}

/* —— Reveal / motion —— */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

[data-stagger].is-in > * {
  animation: staggerIn 0.7s var(--ease) both;
}

[data-stagger].is-in > *:nth-child(2) {
  animation-delay: 0.08s;
}

[data-stagger].is-in > *:nth-child(3) {
  animation-delay: 0.16s;
}

[data-stagger].is-in > *:nth-child(4) {
  animation-delay: 0.24s;
}

@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-img {
    animation: none;
    transform: none;
  }

  .parallax-layer,
  .parallax-stage,
  .parallax-copy {
    transform: none !important;
    opacity: 1 !important;
  }

  .parallax-brand__zoom {
    animation: none;
  }

  .parallax-copy.is-fixed {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .scroll-cue__line {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .offer-row .offer-row__media,
  .offer-row .offer-row__media img,
  .offer-row .offer-row__n,
  .offer-row .offer-row__body h3,
  .offer-row .offer-row__body p,
  .offer .chapter-head .eyebrow,
  .offer .chapter-head h2 {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
  }

  .offer .chapter-head::after {
    width: 9rem;
    transition: none;
  }

  [data-stagger].is-in > * {
    animation: none;
  }
}

/* —— Footer —— */
.site-footer {
  background: #121216;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2.5rem 0;
  color: var(--br-muted-dark);
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 700px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
  }
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--br-white);
  margin: 0 0 0.35rem;
}

.footer-inner > div:first-child {
  flex: 0 0 auto;
}

.footer-copy {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--br-muted-dark);
}

.footer-legal {
  margin: 0;
  flex: 1 1 auto;
  max-width: none;
  font-size: 0.8rem;
  line-height: 1.45;
}

/* ============================================================
   Hub restructure (content assessment build) — new sections
   ============================================================ */

/* demoted parallax title (was h1) keeps the same display style.
   Sized purely by viewport width (not a fixed clamp max) so it scales down
   proportionally and stays on one line at any desktop width instead of
   wrapping once it hits a hard cap; mobile gets its own smaller rule below
   that allows a natural wrap, since forcing one line there would shrink
   the text past a readable size. */
.parallax-copy .parallax-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: min(3.6vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 1.1rem;
  max-width: 96vw;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .parallax-copy .parallax-title {
    font-size: clamp(1.8rem, 6.8vw, 2.6rem);
    max-width: 640px;
    white-space: normal;
  }
}

/* compact why-now cards inside the facility hero */
.hero-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2.25rem 0 0;
  padding: 0;
  max-width: 980px;
}

.hero-cards .card {
  background: rgba(10, 14, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  backdrop-filter: blur(4px);
}

.hero-cards .card h3 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}

.hero-cards .card p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

@media (max-width: 860px) {
  .hero-cards {
    grid-template-columns: 1fr;
  }
}

/* five-stage service model */
.steps--five {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 960px) {
  .steps--five {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .steps--five {
    grid-template-columns: 1fr;
  }
}

/* section CTA row (building) */
.section-cta {
  margin-top: 2.25rem;
  justify-content: center;
}


/* Terms — what stays yours */
.terms-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 3rem;
  margin: 2.5rem 0 0;
  padding: 0;
}

/* tighter rhythm between rows in the what-stays-yours grid only */
#terms .terms-grid {
  gap: 1.1rem 3rem;
}

/* icon sits beside the two text lines (owner direction Sept 11). Absolutely
   positioned so its height can never stretch the rows — the headline-to-text
   gap stays identical on every card regardless of line count. */
/* scoped to #terms with a child combinator: the path cards in 03 reuse the
   .terms-grid wrapper, and their nested bullet ULs must not inherit these */
#terms .terms-grid > li {
  border-top: 1px solid rgba(26, 26, 31, 0.16);
  padding: 0.9rem 0 0 4.3rem;
  position: relative;
}

#terms .terms-grid > li h3 {
  font-size: 1.05rem;
  margin: 0 0 0.05rem;
  color: var(--br-text);
}

/* gold line icons replace the old counter numbers (owner direction Sept 11) */
.term-icon {
  position: absolute;
  left: 0;
  top: 1rem;
  width: 47px;
  height: 47px;
  color: var(--br-gold-hover);
}

#terms .terms-grid > li p {
  margin: 0;
  color: rgba(26, 26, 31, 0.7);
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .terms-grid {
    grid-template-columns: 1fr;
  }
}

/* light card variants (supply section) */
.card-row--light .card--light {
  background: #fff;
  border: 1px solid rgba(26, 26, 31, 0.1);
  color: var(--br-text);
}

.card-row--light .card--light h3 {
  color: var(--br-text);
}

.card-row--light .card--light p {
  color: rgba(26, 26, 31, 0.72);
}

.supply-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: rgba(26, 26, 31, 0.6);
  /* small-text notes run the full column — no premature wrap */
  max-width: none;
}

/* standout value notes (section 04): key point leads in white, detail follows */
.supply-note--lead {
  font-size: 1rem;
}

.supply-note--lead strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.chapter--dark .supply-note--lead strong {
  color: #fff;
}

/* deck closing line on a light section ("Buy the capability, not the bet.") */
.supply-note--onlight {
  margin-top: 2.5rem;
}

.supply-note--onlight strong {
  color: var(--br-text);
  font-size: 1.2rem;
  font-family: var(--font-display);
}

/* —— deck-exact structural additions —— */

/* footer brand: cube mark + wordmark side by side */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.footer-brand img.footer-brand__mark {
  height: 53px; /* +20% per owner */
  width: auto;
}

.footer-brand img {
  height: 49px; /* wordmark sized up per owner rounds */
  width: auto;
  display: block;
  margin-bottom: 0.75rem;
}

/* path-card checklists (For / You get / You bring / Choose this if) */
.path-cards .card ul {
  margin: 0.35rem 0 1rem;
  padding-left: 1.15rem;
}

.path-cards .card li {
  margin: 0.3rem 0;
  font-size: 0.95rem;
  color: rgba(26, 26, 31, 0.72);
}

.path-cards .card .path-list-label {
  margin-top: 1.2rem;
  margin-bottom: 0.2rem;
}

/* strip titles inside 05 ("Both paths start the same way" / "The five stages") */
/* strip headings sit clearly ABOVE the column rules (owner direction Sept 11) */
.steps-title {
  margin: 2.75rem 0 0.85rem;
}

/* 04 gated stats + engine sub-head */
.proof-wrap {
  margin: 0 0 2.5rem;
}

.engine-head {
  margin: 2.75rem 0 0.5rem;
}

.engine-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0 0 0.5rem;
}

.engine-head p {
  color: var(--br-muted-dark);
  max-width: 46rem;
  margin: 0;
}

/* close success line */
.close-success {
  font-weight: 600;
  color: var(--br-text);
}


/* FAQ */
.faq-list {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 3rem;
}

.faq-item dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}

.faq-item dd {
  margin: 0;
  color: rgba(26, 26, 31, 0.75);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}

.next-close {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(26, 26, 31, 0.12);
  padding-top: 2.5rem;
  text-align: center;
}

.next-close h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 0.6rem;
}

.next-close p {
  color: rgba(26, 26, 31, 0.7);
  max-width: 56ch;
  margin: 0 auto 1.5rem;
}

.next-close .cta-row {
  justify-content: center;
}

/* consolidated footer legal block */
.footer-legal p {
  margin: 0 0 0.6rem;
  max-width: none;
}

/* Door 2 page */
.door2-hero .hero-content h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.5rem);
}

.door2-callout {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--br-gold);
  border-left: 3px solid var(--br-gold);
  padding-left: 1.25rem;
  max-width: 34ch;
}

/* Factory Reset page (transition2) */
.ver-chips {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ver-chip {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ver-chip--old {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  text-decoration-color: rgba(200, 51, 47, 0.8);
  text-decoration-thickness: 2px;
}

.ver-chip--new {
  color: var(--br-charcoal);
  background: var(--br-gold);
  border-color: var(--br-gold);
}

.ver-arrow {
  color: var(--br-gold);
  font-size: 1.1rem;
}

/* steps on a light chapter */
.steps--light li {
  border-top-color: rgba(201, 162, 39, 0.5);
}

.steps--light h3 {
  color: var(--br-text);
}

.steps--light p {
  color: rgba(26, 26, 31, 0.7);
}

/* Version upgrade motif (replaces the small chips; 1.0 stays legible — no strike) */
.ver-upgrade {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.25rem 0 1.4rem;
  font-family: "Prata", Georgia, serif;
  line-height: 1;
}

.ver-old {
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
}

.ver-path {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transform: translateY(-0.35em);
}

.ver-path i {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--br-gold);
  opacity: 0.25;
  animation: verPulse 1.6s ease-in-out infinite;
}

.ver-path i:nth-child(2) {
  animation-delay: 0.22s;
}

.ver-path i:nth-child(3) {
  animation-delay: 0.44s;
}

@keyframes verPulse {
  0%, 100% {
    opacity: 0.25;
    transform: translateX(0);
  }
  40% {
    opacity: 1;
    transform: translateX(3px);
  }
}

.ver-new {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  background: linear-gradient(160deg, #f0d48a 0%, var(--br-gold) 45%, #8a6a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(201, 162, 39, 0.35));
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .ver-path i {
    animation: none;
    opacity: 0.8;
  }
}