/* ══════════════════════════════════════════════════════════════
   CINEMATIC HERO — bugatti.com / Solitaire style. Full-viewport
   hero that plays a real <video> if theme/assets/video/hero.mp4
   exists, otherwise renders a Ken-Burns crossfade of 6 type photos
   that behaves visually like a slow-cut video.
   ══════════════════════════════════════════════════════════════ */
.bi-hero-cinema {
  position: relative;
  min-height: 100svh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Bleed the hero up under the fixed nav by exactly the bar's own height
     (token since 3336 — was a hardcoded -80px that had to move in lockstep
     with .bi-nav__bar's height by hand). */
  margin-top: calc(-1 * var(--bi-nav-bar-h, 50px));
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  display: flex;
  align-items: flex-end;
}
/* tabindex="0" (main.js ArrowLeft/Right nav) needs a visible focus ring —
   the default browser outline is easy to lose against a full-bleed photo. */
.bi-hero-cinema:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Visually hidden but present for assistive tech — used by the hero's
   aria-live slide announcer and the register-bar search label. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* ─── Real video layer ─── */
.bi-hero-cinema__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ─── Crossfading still-photo "video" fallback ─── */
.bi-hero-cinema__sequence {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bi-hero-cinema__frame {
  position: absolute;
  inset: 0;
  /* Each frame carries its own self-hosted 800w/1600w WebP pair as two custom
     properties (set inline per-slide in front-page.php); this rule picks the
     large one by default, the ≤767px override further down picks the small
     one — a pure CSS media-query swap, no JS involvement (869e3ptbq). */
  background-image: var(--bi-hero-img-1600);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: bi-hero-cycle;
  animation-timing-function: cubic-bezier(.45,.05,.55,.95);
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}
/* On screens ≤1024px the frame is inside a sized block so cover
   will fit the car naturally — no position tweak needed there.
   This rule only fires on desktop where the section is full-height. */
@media (min-width: 1025px) {
  .bi-hero-cinema__frame { background-position: center 40%; }
}
@keyframes bi-hero-cycle {
  0%   { opacity: 0; transform: scale(1.0); }
  4%   { opacity: 1; }
  18%  { opacity: 1; transform: scale(1.06); }
  22%  { opacity: 0; transform: scale(1.07); }
  100% { opacity: 0; transform: scale(1.0); }
}

/* JS-controlled crossfade (main.js adds .is-js once it takes over).
   The keyframe animation is replaced by a plain opacity transition so there
   are no "all frames transparent" gaps. Exactly one frame carries .is-active
   at a time (main.js enforces this synchronously — no delayed cleanup that a
   rapid subsequent slide change could cancel, which used to leave two stale
   .is-active frames stacked with the counter reading a third); the previous
   frame gets a transient .is-leaving mirror class for the same duration as it
   fades out. All frames are preloaded up front, so both sides of the
   simultaneous fade already have their image ready — no black-then-pop. */
.bi-hero-cinema.is-js .bi-hero-cinema__frame {
  animation: none;
  transform: none;
  opacity: 0;
  transition: opacity 1300ms ease; /* slow, cinematic page-turn fade */
}
.bi-hero-cinema.is-js .bi-hero-cinema__frame.is-active {
  opacity: 1;
}
.bi-hero-cinema.is-js .bi-hero-cinema__frame.is-leaving {
  opacity: 0;
}
/* The sequence container shows the current photo as a solid backdrop behind the
   crossfading frames, so the dark section can never flash between images. */
.bi-hero-cinema.is-js .bi-hero-cinema__sequence {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1025px) {
  .bi-hero-cinema.is-js .bi-hero-cinema__sequence { background-position: center 40%; }
}

/* ─── Overlays ─── */
.bi-hero-cinema__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, hsl(var(--bg-hsl) / .25) 0%, transparent 38%, hsl(var(--bg-hsl) / .28) 62%, hsl(var(--bg-hsl) / .88) 100%),
    linear-gradient(90deg, hsl(var(--bg-hsl) / .62) 0%, hsl(var(--bg-hsl) / .18) 50%, transparent 100%);
}
.bi-hero-cinema__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ─── Copy block (bottom-center, bugatti.com style) ─── */
.bi-hero-cinema__copy {
  position: relative;
  z-index: 3;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px) clamp(56px, 7vw, 96px);
  color: var(--fg);
  text-align: center;
  animation: bi-hero-rise 1100ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bi-hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* bugatti.com hero has no decorative rule above the eyebrow */
.bi-hero-cinema__rule { display: none; }
.bi-hero-cinema__eyebrow {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 24px;
  font-weight: 400;
}
.bi-hero-cinema__title {
  font-family: var(--f-display);
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 24px;
  text-transform: none;
  color: #fff;
}
.bi-hero-cinema__desc,
.bi-hero-cinema__cat-desc {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.65;
  color: hsl(var(--fg-hsl) / .82);
  max-width: 44ch;
  margin: 0 0 28px;
}
.bi-hero-cinema__cat-desc:empty {
  display: none;
}
.bi-hero-cinema__cat-desc {
  /* Soft fade as the rotation changes the description */
  transition: opacity 220ms ease;
}
.bi-hero-cinema__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.bi-hero-cinema__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg);
  border: 1px solid hsl(var(--fg-hsl) / .42);
  background: transparent;
  text-decoration: none;
  transition: all 200ms ease;
}
.bi-hero-cinema__cta:hover {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.bi-hero-cinema__cta.is-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.bi-hero-cinema__cta.is-primary:hover { opacity: .9; }

/* ──────────────────────────────────────────────────────────────
   TABLET  768 px – 1024 px
   Overlay layout: hero is 16:9 so the full car fits without crop.
   The image fills that frame absolutely; copy is overlaid at the
   bottom — same cinematic look as desktop, whole car always visible.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .bi-hero-cinema {
    display: flex;
    align-items: flex-end;
    /* 16:9 locks the height to match the landscape image exactly */
    min-height: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    /* pull behind the navbar (its --bi-nav-bar-h height), same as desktop */
    margin-top: calc(-1 * var(--bi-nav-bar-h, 50px));
  }

  /* Image fills the 16:9 frame absolutely — no crop */
  .bi-hero-cinema__video,
  .bi-hero-cinema__sequence {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
  }

  .bi-hero-cinema__frame {
    background-position: center center;
    background-size: cover;
  }

  /* Full cinematic shade — bottom-heavy so text is readable */
  .bi-hero-cinema__shade {
    display: block;
    background:
      linear-gradient(180deg,
        hsl(var(--bg-hsl) / .15) 0%,
        transparent               32%,
        hsl(var(--bg-hsl) / .28) 58%,
        hsl(var(--bg-hsl) / .90) 100%),
      linear-gradient(90deg,
        hsl(var(--bg-hsl) / .60) 0%,
        hsl(var(--bg-hsl) / .15) 50%,
        transparent               100%);
  }

  .bi-hero-cinema__grain { opacity: .04; }

  /* Copy overlaid on image — transparent, bottom-left, like desktop */
  .bi-hero-cinema__copy {
    position: relative;
    background: transparent;
    padding: 0 clamp(20px, 4vw, 40px) clamp(24px, 4vw, 40px);
    max-width: 100%;
    animation: bi-hero-rise 1100ms cubic-bezier(.2,.7,.2,1) both;
  }

  .bi-hero-cinema__rule { margin-bottom: 16px; }
  .bi-hero-cinema__eyebrow { font-size: 10px; letter-spacing: var(--bi-ls-overline, 1px); margin-bottom: 14px; }
  .bi-hero-cinema__title { font-size: clamp(26px, 4.2vw, 48px); margin-bottom: 12px; }
  .bi-hero-cinema__desc { font-size: clamp(13px, 1.6vw, 15px); line-height: 1.6; margin-bottom: 20px; }
  .bi-hero-cinema__actions { gap: 10px; flex-wrap: wrap; }
  .bi-hero-cinema__cta { padding: 12px 24px; font-size: 10px; letter-spacing: var(--bi-ls-button, 1px); }
}

/* The ≤767px mobile ruleset for `.bi-hero-cinema` is consolidated into
   ONE block further down (see "MOBILE ≤ 767 px" below the "Homepage
   polish" body.home section) — it must come after those always-on
   `body.home .bi-hero-cinema*` rules to win the cascade at equal
   specificity (source order, not just the media query, decides the
   winner here). */

/* ──────────────────────────────────────────────────────────────
   VERY SMALL PHONE  ≤ 390 px — tighten padding and font sizes
   ────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .bi-hero-cinema__copy { padding: 16px var(--bi-shell-gutter) 32px; }
  .bi-hero-cinema__title { font-size: clamp(22px, 7vw, 30px); }
  .bi-hero-cinema__cta { padding: 10px 16px; font-size: 9.5px; letter-spacing: var(--bi-ls-button, 1px); }
}

/* ─── Right-side category nav ─── */
.bi-hero-cinema__nav {
  position: absolute;
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(56px, 7vw, 96px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 240px;
}
.bi-hero-cinema__nav-btn {
  display: block;
  width: 100%;
  padding: 12px 0 0;
  text-align: right;
  text-decoration: none;
  color: var(--fg);
  opacity: 0.38;
  transition: opacity 300ms ease;
}
.bi-hero-cinema__nav-btn.is-active,
.bi-hero-cinema__nav-btn:hover {
  opacity: 1;
}
.bi-hero-cinema__nav-title {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(10px, 0.85vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--fg);
}
.bi-hero-cinema__nav-sub {
  display: block;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}
.bi-hero-cinema__nav-line {
  display: block;
  height: 1px;
  width: 100%;
  background: hsl(var(--fg-hsl) / 0.14);
  margin-top: 11px;
  transition: background 300ms ease;
}
.bi-hero-cinema__nav-btn.is-active .bi-hero-cinema__nav-line {
  background: var(--gold);
}
/* Hide on tablet and smaller — not enough horizontal room */
@media (max-width: 1024px) {
  .bi-hero-cinema__nav { display: none; }
}

/* Homepage polish: quieter, more authoritative opening frame. */
body.home .bi-hero-cinema {
  min-height: min(100svh, 940px);
  background: #060607; /* near-black, no decorative blob */
}
/* (869e373da round 4) Martien asked for the photo itself with no grading/
   darkening treatment on desktop — mobile already dropped this in round 2.
   The category-nav column keeps its own separate legibility treatment via
   `body.home .bi-hero-cinema__timeline::before` below, untouched by this. */
body.home .bi-hero-cinema__frame {
  filter: none;
}
body.home .bi-hero-cinema__shade {
  display: none;
}
/* The copy block still overlays the now-undarkened photo directly (desktop
   and tablet, per the "TABLET" section below), so each text element gets
   its own text-shadow instead — same halo-for-legibility approach already
   used on the category-nav `.bi-hero-cinema__tl-item` text. */
/* (869e373da round 5) Retest feedback was specifically about the DESKTOP
   homepage: the fully undarkened photo from round 4 looks good overall, but
   needs a 50px black-to-transparent vignette on each edge, plus a bit more
   darkening under the copy for contrast. Scoped to the same desktop-only
   breakpoint the rest of this file already uses (min-width: 1025px, see the
   `.bi-hero-cinema__frame` background-position rule at the top) — tablet and
   mobile stay exactly as round 4 left them, since neither was mentioned in
   this feedback and mobile's copy already sits below the photo on a solid
   background, not overlaid. The under-copy fade reuses the same horizontal
   fade shape the file used pre-round-4 (hsl(--bg-hsl) horizontal gradient),
   just toned down to a "bit more contrast" instead of the old full grade. */
@media (min-width: 1025px) {
  body.home .bi-hero-cinema__shade {
    display: block;
    background:
      linear-gradient(90deg, rgba(0,0,0,.7) 0, transparent 50px),
      linear-gradient(270deg, rgba(0,0,0,.7) 0, transparent 50px),
      linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 30%, transparent 48%);
  }
}

/* (869e373da round 5) Round 4's fully-undarkened photo tested well overall,
   but on desktop the left-anchored copy still needed a touch more contrast.
   Re-enable the shade layer at desktop only (tablet/mobile stay fully
   undarkened, unchanged from rounds 2/4) with a restrained vignette instead
   of the old always-on gradient: a 50px black-to-transparent fade on each
   edge, plus a softer, wider fade under the copy column itself. Source order
   after the display:none rule above wins at equal specificity, same pattern
   used throughout this file. */
@media (min-width: 1025px) {
  body.home .bi-hero-cinema__shade {
    display: block;
    /* (869e40hae round 4) Left treatment tuned against a luminance-profile
       measurement of example_homepage_slider.png (middle-band, per 4% col):
       the example is a STRAIGHT full-height column — near-uniform dark
       plateau from the edge to ~24% viewport width, a quick falloff
       through ~30%, fully transparent by ~40%. Round 3's 100deg angled
       wash was both ~2x too light on the plateau and bled ~15% too far
       right. No angle, no blur, no shape — just the measured column. */
    background:
      linear-gradient(90deg, rgba(0,0,0,.8) 0, transparent 50px),
      linear-gradient(270deg, rgba(0,0,0,.8) 0, transparent 50px),
      /* Top/bottom edge fades (869e40hae round 7, Martien): same idea as
         the 50px side fades but shorter and softer, so the photo eases
         into the dark page frame instead of ending on a hard edge. */
      linear-gradient(180deg, rgba(0,0,0,.55) 0, transparent 36px),
      linear-gradient(0deg, rgba(0,0,0,.55) 0, transparent 36px),
      linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.72) 22%, rgba(0,0,0,.35) 30%, transparent 40%);
  }
}

body.home .bi-hero-cinema,
body.front-page .bi-hero-cinema {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  align-items: center;
  justify-content: flex-start;
}
/* The <main> that follows the hero escapes any body-width constraint the same
   way the hero does — all child sections then inherit full viewport width. */
.bi-main--after-hero {
  padding-top: 0;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
}
body.home .bi-hero-cinema__copy {
  position: relative;
  z-index: 3;
  text-align: left;
  margin: clamp(48px, 10vh, 140px) 0 0;
  max-width: min(48vw, 640px);
  /* (869e40hae round 3) Example puts the copy noticeably closer to the
     viewport edge than the old 104px indent. */
  padding: 0 0 0 clamp(24px, 3.5vw, 64px);
}
/* Metadata — refined uppercase sans, aged gold */
body.home .bi-hero-cinema__eyebrow {
  font-family: var(--f-label), 'Inter', system-ui, sans-serif;
  font-size: clamp(11px, .8vw, 13px);
  font-weight: 500;
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  text-shadow: 0 0 3px rgba(0,0,0,1), 0 1px 6px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75), 0 4px 32px rgba(0,0,0,.6);
}
/* Thin aged-gold rule under the metadata, left-aligned */
body.home .bi-hero-cinema__rule {
  display: block;
  width: 3rem;
  height: 1px;
  margin: 0 0 10px;
  background: var(--gold);
}
/* Model name — elegant serif, warm ivory, faint watermark behind it */
body.home .bi-hero-cinema__title {
  position: relative;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 62px);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #f4efe3;
  margin: 0 0 14px;
  text-shadow: 0 0 3px rgba(0,0,0,1), 0 1px 6px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75), 0 4px 32px rgba(0,0,0,.6);
}
body.home .bi-hero-cinema__title-text { position: relative; z-index: 1; }
/* Emotional tagline — aged gold, uppercase */
body.home .bi-hero-cinema__tagline {
  font-family: var(--f-label), 'Inter', system-ui, sans-serif;
  font-size: clamp(13px, 1.25vw, 19px);
  font-weight: 500;
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  text-shadow: 0 0 3px rgba(0,0,0,1), 0 1px 6px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75), 0 4px 32px rgba(0,0,0,.6);
}
/* EB emblem divider */
body.home .bi-hero-cinema__emblem {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: 22px;
}
body.home .bi-hero-cinema__emblem span {
  height: 1px;
  width: clamp(30px, 4vw, 72px);
  background: hsl(var(--gold-hsl) / .32);
}
/* Body copy — readable serif, restrained. Clamped to 2 lines (869e40hae):
   the example composition shows one short line under the tagline; live
   category descriptions rendered as 5+ line paragraphs that washed out
   over light-bodied cars and pushed the CTA below the fold on shorter
   viewports. Full text remains available on the category page itself. */
body.home .bi-hero-cinema__cat-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(239,233,221,.82);
  max-width: 40ch;
  margin: 0 0 30px;
  text-shadow: 0 0 3px rgba(0,0,0,1), 0 1px 6px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75), 0 4px 32px rgba(0,0,0,.6);
}
/* (869e373da round 5) A touch more contrast on the copy text itself, per
   the same feedback ("shadow maybe") — a tight near-black core added ahead
   of the existing halo layers, same technique, just one extra tighter-
   radius layer. Must come AFTER the 4 base rules above (same selectors,
   same specificity) to actually win the cascade at >=1025px — a copy of
   this block placed earlier in the file was silently overridden by them. */
@media (min-width: 1025px) {
  body.home .bi-hero-cinema__eyebrow,
  body.home .bi-hero-cinema__title,
  body.home .bi-hero-cinema__tagline,
  body.home .bi-hero-cinema__cat-desc {
    text-shadow: 0 0 3px rgba(0,0,0,1), 0 1px 6px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75), 0 4px 32px rgba(0,0,0,.6);
  }
}
/* (3119) The pre-Brand-Style fallback copy of this button is gone. It was
   written (869etqyp2) so the hero CTA could not silently revert to
   gold-on-dark if the Brand Style toggle were ever off, and it is the
   rule that actually supplied the button's rendered height: min-height
   3.3rem, which brand-home.css never overrode while it did override the
   padding and the font size. That 3.3rem is where --bi-btn-h comes from.
   buttons.css needs no toggle to be on, so the fallback has nothing left
   to protect against. Its two non-token colours went with it: the
   rgba(8,8,9,.18) wash and the #f4efe3 / #141008 near-white and near-black
   that stood in for --fg and --bg. */
/* ── Right-side category nav ──
   (869e40hae round 3) The example shows a DISCRETE rounded card wrapping
   only the era items + About link — floating with a margin from the
   viewport edge, photo visible around it — not a full-height column.
   Anchored bottom-right; height shrinks to content. */
body.home .bi-hero-cinema__timeline {
  position: absolute;
  z-index: 4;
  top: auto;
  right: clamp(20px, 2vw, 36px);
  bottom: clamp(40px, 5vh, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: clamp(260px, 21vw, 330px);
  padding: clamp(18px, 2vh, 28px) 0;
  background: rgba(8,9,11,.72);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 0;
  overflow: hidden; /* clips the full-bleed separator lines + active bar to the card's radius */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Decorative darkening layer for the category text (869e0d3ft), kept on a
   ::before instead of directly on .bi-hero-cinema__timeline because that
   element IS the <nav> wrapping the real .tl-item links (front-page.php:
   587-602) — mask-image masks the whole painted element including content,
   so masking the <nav> itself risked clipping real link text on shorter
   viewports. The horizontal gradient darkens where the text sits (starts
   ~19px/6% into the column, reaches its floor by ~30%, holds to the edge);
   the vertical mask keeps the vertical center of the hero image bright,
   since the nav's content is bottom-anchored and only the bottom ~38% of
   the column actually has text over it. */
/* (869e40hae round 3) The old ::before darkening layer is obsolete — the
   card itself carries background/blur/radius now. */
body.home .bi-hero-cinema__timeline::before {
  content: none;
}
body.home .bi-hero-cinema__tl-item {
  position: relative;
  display: block;
  text-align: left;
  text-shadow:
    0 1px 6px rgba(0,0,0,.9),
    0 2px 16px rgba(0,0,0,.75),
    0 4px 32px rgba(0,0,0,.6);
  text-decoration: none;
  color: inherit;
  padding: 7px 28px 7px 36px; /* left room for the active bar */
  /* .45 read as near-invisible on bright/busy photos; the example shows
     inactive eras clearly readable, just subordinate (869e40hae). */
  opacity: .58;
  cursor: pointer;
  transition: opacity .35s ease;
}
/* Left accent bar — invisible by default, lights up when active.
   (869e40hae round 3) Sits ON the card's left edge like the example,
   not floating 20px inside it. */
body.home .bi-hero-cinema__tl-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--gold);
  transition: height .35s ease;
}
/* Era short name — uppercase, ivory. */
body.home .bi-hero-cinema__tl-year {
  display: block;
  font-family: var(--f-label), 'Inter', system-ui, sans-serif;
  font-size: clamp(10px, .85vw, 13px);
  line-height: 1.2;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: rgba(244,239,227,.85);
  transition: color .35s ease;
}
/* Short description — lighter, smaller. Alpha raised (869e0d3ft round 3):
   this compounds with the parent .tl-item's default opacity:.45 (not
   hover/active), so the old .38 alpha rendered at ~17% effective opacity —
   almost invisible. .68 brings it to ~31% effective, clearly visible while
   still subordinate to the year label above it. */
body.home .bi-hero-cinema__tl-era {
  display: -webkit-box;
  font-family: var(--f-label), 'Inter', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(244,239,227,.68);
  margin-top: 3px;
  transition: color .35s ease;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Year range — gold tint. */
body.home .bi-hero-cinema__tl-date {
  display: block;
  font-family: var(--f-label), 'Inter', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--gold);
  margin-top: 4px;
}
/* Separator line. */
body.home .bi-hero-cinema__tl-line {
  display: block;
  height: 1px;
  width: calc(100% + 56px);
  margin-left: -28px;
  background: hsl(var(--gold-hsl) / .1);
  margin-top: 7px;
}
/* Hover — brighten and show cursor affordance. */
body.home .bi-hero-cinema__tl-item:hover {
  opacity: .82;
}
body.home .bi-hero-cinema__tl-item:hover .bi-hero-cinema__tl-year {
  color: rgba(244,239,227,1);
}
/* Remove browser default blue outline; replace with gold on focus/click. */
body.home .bi-hero-cinema__tl-item:focus,
body.home .bi-hero-cinema__tl-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 0;
}
/* Active — gold accent bar + full brightness + gold era name. */
body.home .bi-hero-cinema__tl-item.is-active {
  opacity: 1;
}
body.home .bi-hero-cinema__tl-item.is-active::before {
  height: 70%;
}
body.home .bi-hero-cinema__tl-item.is-active .bi-hero-cinema__tl-year {
  color: var(--gold);
  letter-spacing: var(--bi-ls-button, 1px);
}
body.home .bi-hero-cinema__tl-item.is-active .bi-hero-cinema__tl-era  { color: var(--gold); }
body.home .bi-hero-cinema__tl-item.is-active .bi-hero-cinema__tl-line { background: hsl(var(--gold-hsl) / .25); }
/* "About Bugatti Insights" — reads as the next item in the same list,
   not a separated footer block, so no border/extra gap here. */
body.home .bi-hero-cinema__tl-about {
  margin-top: 0;
  padding: 7px 28px 7px 36px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.home .bi-hero-cinema__tl-about:hover { opacity: .82; }
body.home .bi-hero-cinema__tl-about-label {
  font-family: var(--f-label), 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: rgba(244,239,227,.8);
}

/* ── Bottom-left slide counter ── */
body.home .bi-hero-cinema__counter {
  position: absolute;
  z-index: 4;
  left: clamp(28px, 6vw, 104px);
  bottom: clamp(28px, 4vw, 52px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  color: rgba(244,239,227,.7);
  /* (869e40hae round 5) Bare text, exactly like the example — no block,
     no outline. The inherited text-shadow keeps it readable on light
     slides. */
  text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.7);
}
body.home .bi-hero-cinema__counter-cur { font-size: 22px; color: #f4efe3; }
body.home .bi-hero-cinema__counter-sep,
body.home .bi-hero-cinema__counter-total { font-size: 14px; color: rgba(244,239,227,.55); }
body.home .bi-hero-cinema__counter-arrow {
  background: none; border: none; cursor: pointer;
  color: rgba(244,239,227,.7);
  font-size: 18px; line-height: 1; padding: 4px;
  transition: color .25s ease;
}
body.home .bi-hero-cinema__counter-arrow:hover { color: var(--gold); }
body.home .bi-hero-cinema__counter-arrow:focus,
body.home .bi-hero-cinema__counter-arrow:focus-visible {
  color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 0;
}

/* Stats strip below the hero — moved to the site-wide footer (869egbckn
   round 2), see .site-footer__cta-stats in main.css. Rules removed here;
   .bi-reg-bar__inner absorbed the lost top spacing. */

/* ── Responsive ── */
@media (max-width: 1024px) {
  /* On tablet/mobile the dark panel collapses to a horizontal scroll rail
     pinned below the header. Dark background and border-left are dropped. */
  body.home .bi-hero-cinema__timeline {
    top: clamp(76px, 12vw, 112px);
    bottom: auto;
    transform: none;
    right: auto;
    left: 0;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(14px, 4.5vw, 40px);
    padding: 0 16px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: none;
    border-left: none;
  }
  /* Desktop-only darkening layer — tablet/mobile rail has its own contrast
     treatment (or none), so drop the pseudo-element entirely. */
  body.home .bi-hero-cinema__timeline::before { content: none; }
  body.home .bi-hero-cinema__timeline::-webkit-scrollbar { display: none; }
  body.home .bi-hero-cinema__tl-item {
    flex: 0 0 auto;
    text-align: center;
    padding: 0 0 18px;
  }
  body.home .bi-hero-cinema__tl-line { display: none; }
  body.home .bi-hero-cinema__tl-about { display: none; }
  body.home .bi-hero-cinema__tl-year { font-size: clamp(10px, 2.8vw, 14px); }
  body.home .bi-hero-cinema__tl-era {
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: .12em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  body.home .bi-hero-cinema__copy { max-width: 74vw; }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE  ≤ 767 px
   Stacked layout: 16:9 image on top (full car visible, no crop),
   copy block below on solid background. A deep bottom-fade on the
   image bleeds into the dark section below so it reads as one
   unified hero — no hard edge between image and content.

   Single consolidated ruleset for `.bi-hero-cinema` at ≤767/768px
   (869e373da) — previously 3 overlapping @media blocks (one bare
   ≤768px margin-top reset near the top of the file, one unscoped
   ≤767px block, and a third body.home-scoped ≤767px block here)
   fought over the same properties: margin-top flipped between 0
   (≤768px) and -80px (≤767px, a 1px inconsistent zone), and several
   declarations in the old unscoped block were dead code, always
   shadowed by the higher-specificity `body.home .bi-hero-cinema*`
   rules above (only reachable because `.bi-hero-cinema` exclusively
   renders on the homepage, which is always in `body.home` context)
   — most notably `min-height: 0`, which never actually won, leaving
   mobile stuck with the desktop `min-height: min(100svh, 940px)` and
   a large blank gap above the copy. This block must stay positioned
   after the "Homepage polish" body.home rules above: at equal
   specificity the cascade is decided by source order, not just the
   media query, so a body.home-scoped override earlier in the file
   (as this block originally was) can never win here.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .bi-hero-cinema {
    display: block;
    aspect-ratio: unset;
    /* (869e373da round 4) `margin-top: -80px` (still correct on desktop,
       see the base rule at the top of this file) pulls the hero up so its
       image bleeds under the fixed, translucent `.bi-nav` — the desktop
       full-bleed effect. `.bi-hero-cinema` isn't inside `.bi-main` (it's a
       sibling before it in front-page.php), so `.bi-main`'s own responsive
       padding-top (nav.css) never compensates for it here; on mobile the
       hero is a compact stacked card (round 1), not a full-bleed backdrop,
       so the same negative pull just put the image directly behind the
       header instead — reported as misaligned, "should start below the
       mobile header". A POSITIVE margin-top matching the mobile nav's own
       height pushes the image down to start right where the header ends,
       same principle `.bi-main`'s padding-top already uses on every
       non-hero page.
       (869ea1cap) That fixed 80px matched only the bar's own height, not
       `env(safe-area-inset-top)` — .bi-nav adds that as extra padding-top
       on notched phones, so the header's true bottom edge sat lower than
       80px and the top sliver of the photo was still covered on an iPhone
       with a notch/Dynamic Island. --bi-header-h (header.php) measures the
       header's actual rendered bottom edge at runtime, which already
       includes that inset, so this now tracks it exactly on every device
       instead of only on ones with no notch. */
    margin-top: var(--bi-header-h, 50px);
  }
  body.home .bi-hero-cinema { min-height: 0; }

  /* Image block: sized to the landscape photo's natural ratio */
  .bi-hero-cinema__video,
  .bi-hero-cinema__sequence {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .bi-hero-cinema__frame {
    background-position: center center;
    background-size: cover;
    /* Serve the ~800w derivative on phones instead of the desktop ≥1600w one —
       same custom properties set per-frame in front-page.php (869e3ptbq). */
    background-image: var(--bi-hero-img-800);
  }

  .bi-hero-cinema__grain { opacity: .03; }

  /* The desktop/tablet era-nav rail is absolutely positioned and, at this
     width, lands directly over the top of the stacked photo (its own text
     visible as a "ghost strip" bleeding across the image, partially behind
     the fixed translucent nav) — the stacked-card layout has no room for an
     overlay column. Swipe (main.js) plus the counter arrows below already
     cover per-slide navigation on mobile; the era rail is desktop/tablet-only
     from here down (869e3ptbq). */
  body.home .bi-hero-cinema__timeline { display: none; }

  /* Copy sits below the image on solid background. Only `background`
     and `animation` are set at the bare-selector level — every other
     copy property is already governed by the always-on, higher-
     specificity `body.home .bi-hero-cinema__copy` rule above, so this
     block overrides `max-width`/`padding` there directly instead of
     via a bare rule that could never win them. */
  .bi-hero-cinema__copy {
    background: var(--bg);
    animation: none;
  }
  body.home .bi-hero-cinema__copy {
    max-width: 100%;
    padding: 0 var(--bi-shell-gutter) clamp(28px, 8vw, 56px);
  }
  body.home .bi-hero-cinema__title { font-size: clamp(28px, 9vw, 44px); }
  /* (3119) `width: 100%; justify-content: center` dropped, and nothing put
     in its place. On a phone this button stretched to the full copy-block
     width, which is the behaviour Martien asked to stop on the chassis
     page (PR #1376); it keeps its own width here too. No replacement
     alignment rule is written because there is nowhere for one to land:
     this selector is (0,2,1) and brand-home.css pins align-self:
     flex-start at (0,3,1), which wins inside a media query just as it
     does outside one. Left-aligned is also the right answer here -- the
     hero copy above it is left-aligned on mobile, so the button lines up
     with its own text instead of floating in the middle. */

  /* Slide counter — the only remaining manual advance control on
     mobile (the era-nav rail only jumps between eras, not individual
     frames; main.js has no swipe handling). Restored in normal flow
     below the copy block, rather than the absolutely-positioned
     desktop placement, so it can't overlap the copy/CTA once the
     hero is a stacked block layout. */
  body.home .bi-hero-cinema__counter {
    position: static;
    padding: 0 var(--bi-shell-gutter) clamp(24px, 6vw, 40px);
  }
  body.home .bi-hero-cinema__counter-arrow {
    font-size: 22px;
    padding: 10px;
  }
}

/* ──────────────────────────────────────────────────────────────
   SMALL PHONE  ≤ 640 px — kept as a separate block from the ≤767px
   rule above for cascade-order reasons (source order decides at
   equal specificity). Since 3336 the bar is 50px at every width, so
   both blocks quote the same 50px fallback; the measured
   --bi-header-h still wins whenever JS has run.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bi-hero-cinema { margin-top: var(--bi-header-h, 50px); }
}

/* ──────────────────────────────────────────────────────────────
   PHONE LANDSCAPE — make the hero image fill the full viewport
   height, matching category/type/chassis hero behaviour.
   The nav is hidden in this orientation (--bi-header-h = 0),
   so margin-top: 0 and min-height: 100dvh give a true full-bleed.
   Overrides the ≤767px stacked-block rules above; must sit later
   in source order to win at equal specificity.
   ────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .bi-hero-cinema {
    min-height: 100dvh;
    margin-top: 0;
  }
  body.home .bi-hero-cinema,
  body.front-page .bi-hero-cinema {
    min-height: 100dvh; /* override the mobile min-height:0 rule */
  }
  .bi-hero-cinema__video,
  .bi-hero-cinema__sequence {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
  }
  .bi-hero-cinema__copy {
    background: transparent; /* was solid --bg in stacked mobile layout */
  }
}

/* ══════════════════════════════════════════════════════════════
   OFFSCREEN RENDER SKIP — let the browser skip layout and paint
   work for editorial bands that are still far below the viewport.
   `contain-intrinsic-size` gives the browser a stable size hint
   so the scrollbar doesn't jump as sections come into view.
   ══════════════════════════════════════════════════════════════ */
.bi-atelier,
.bi-register-preview,
.bi-cinematic,
.bi-curated-shell,
.bi-curated-closing,
.bi-type-studies {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

/* ══════════════════════════════════════════════════════════════
   ATELIER DETAIL STRIP — three-panel craftsmanship band.
   Cropped close-ups read as macro details; bottom-aligned copy
   with gold chip, serif title, and a refined caption.
   ══════════════════════════════════════════════════════════════ */
.bi-atelier {
  background: hsl(var(--bg-hsl));
  padding: clamp(72px, 9vw, 132px) 0 clamp(48px, 6vw, 96px);
}
.bi-atelier__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 72px);
}
.bi-atelier__head .ch-sec-eyebrow { margin-bottom: 18px; }
.bi-atelier__head .ch-sec-h2 em {
  font-style: italic;
  color: var(--gold);
}
.bi-atelier__head .ch-sec-desc {
  margin-top: 18px;
  color: hsl(var(--fg-hsl) / .72);
}
.bi-atelier__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: hsl(var(--gold-hsl, 42 55% 52%) / .18);
}
.bi-atelier__panel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0b0b0c;
  isolation: isolate;
  cursor: default;
}
.bi-atelier__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.82) brightness(.7) contrast(1.05);
  transform: scale(1.08);
  transition: transform 1400ms cubic-bezier(.2,.7,.2,1), filter 600ms ease;
  will-change: transform, filter;
}
.bi-atelier__panel:hover .bi-atelier__media {
  transform: scale(1.0);
  filter: saturate(1) brightness(.82) contrast(1);
}
.bi-atelier__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 40%, hsl(var(--bg-hsl) / .35) 60%, hsl(var(--bg-hsl) / .95) 100%);
}
.bi-atelier__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}
.bi-atelier__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: clamp(22px, 3vw, 40px);
  color: var(--fg);
  transform: translateY(8px);
  opacity: .96;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), opacity 400ms ease;
}
.bi-atelier__panel:hover .bi-atelier__body {
  transform: translateY(0);
  opacity: 1;
}
.bi-atelier__chip {
  display: inline-block;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid hsl(var(--gold-hsl, 42 55% 52%) / .55);
  padding: 6px 12px;
  margin-bottom: 18px;
}
.bi-atelier__title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--fg);
}
.bi-atelier__caption {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.65;
  color: hsl(var(--fg-hsl) / .78);
  margin: 0;
  max-width: 42ch;
}
@media (max-width: 960px) {
  .bi-atelier__grid { grid-template-columns: 1fr; }
  .bi-atelier__panel { aspect-ratio: 16 / 11; }
}

/* ══════════════════════════════════════════════════════════════
   FEATURED LINEAGE — Classic vs Modern split.
   Classic emphasises the chassis count (a tangible record figure).
   Modern reads as an image first, with minimal overlay copy.
   ══════════════════════════════════════════════════════════════ */
.bi-curated-group + .bi-curated-group { margin-top: clamp(40px, 5vw, 72px); }
.bi-curated-group__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid hsl(var(--fg-hsl) / .14);
}
.bi-curated-group__chip {
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 14px;
  border: 1px solid var(--gold);
}
.bi-curated-group__note {
  font-size: 12px;
  letter-spacing: .04em;
  color: hsl(var(--fg-hsl) / .55);
}

/* Classic — chassis count surfaced top-right of each card */
.bi-curated-card__chassis-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  text-align: right;
  padding: 10px 14px 8px;
  background: hsl(var(--bg-hsl) / .42);
  border: 1px solid hsl(var(--gold-hsl) / .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bi-curated-card__chassis-num {
  display: block;
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.bi-curated-card__chassis-label {
  display: block;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: hsl(var(--fg-hsl) / .72);
  margin-top: 5px;
}

/* Modern — image-first portrait cards, minimal overlay */
.bi-curated-grid--modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bi-curated-card--modern {
  min-height: 0;
  aspect-ratio: 3 / 4;
  display: block;
  border-color: hsl(var(--gold-hsl) / .08);
}
.bi-curated-card--modern .bi-curated-card__media {
  filter: saturate(1) brightness(.82) contrast(1.02);
}
.bi-curated-card--modern:hover .bi-curated-card__media {
  filter: saturate(1.05) brightness(.92) contrast(1.04);
}
.bi-curated-card__overlay--modern {
  background:
    linear-gradient(180deg, transparent 55%, hsl(var(--bg-hsl) / .55) 80%, hsl(var(--bg-hsl) / .92) 100%);
}
.bi-curated-card__body--modern {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(20px, 2.5vw, 30px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  transform: none;
}
.bi-curated-card__body--modern .bi-curated-card__title {
  font-size: clamp(20px, 2.1vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg);
  line-height: 1.05;
}
.bi-curated-card__tag {
  flex-shrink: 0;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  padding-bottom: 4px;
}

@media (max-width: 960px) {
  .bi-curated-grid--modern { grid-template-columns: 1fr; }
  .bi-curated-card--modern { aspect-ratio: 16 / 11; }
  .bi-curated-card__chassis-badge {
    top: 14px;
    right: 14px;
    padding: 8px 12px;
  }
  .bi-curated-card__chassis-num { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   BCC PAGE CINEMATIC BAND — copy aligned to the bottom-right
   over the archive film, not the default centred placement.
   ══════════════════════════════════════════════════════════════ */
.bi-cinematic.bi-cinematic--bcc {
  align-items: flex-end;
  min-height: 100svh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bi-cinematic--bcc .bi-cinematic__inner--right {
  padding-bottom: clamp(48px, 6vw, 96px);
}
.bi-cinematic--bcc .bi-cinematic__copy {
  text-align: right;
  margin-left: auto;
}
.bi-cinematic--bcc .bi-cinematic__rule {
  margin-left: auto;
  margin-right: 0;
}
.bi-cinematic--bcc .bi-cinematic__desc {
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 768px) {
  .bi-cinematic--bcc .bi-cinematic__inner--right {
    justify-content: flex-start;
    padding-bottom: 40px;
  }
  .bi-cinematic--bcc .bi-cinematic__copy,
  .bi-cinematic--bcc .bi-cinematic__desc,
  .bi-cinematic--bcc .bi-cinematic__rule {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   DETAIL STUDIES — short silent clips on type pages illustrating
   engine, interior, coachwork, or heritage at close range.
   Cinematic 1280:540 aspect with a label chip + caption.
   ══════════════════════════════════════════════════════════════ */
.bi-type-studies {
  padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 80px);
  background: hsl(var(--bg-hsl));
}
.bi-type-studies__head {
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  text-align: center;
}
.bi-type-studies__head .ch-sec-eyebrow { margin-bottom: 16px; }
.bi-type-studies__head .ch-sec-h2 em {
  font-style: italic;
  color: var(--gold);
}
.bi-type-studies__head .ch-sec-desc {
  margin-top: 16px;
  color: hsl(var(--fg-hsl) / .72);
}
.bi-type-studies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: hsl(var(--gold-hsl, 42 55% 52%) / .18);
}
.bi-type-studies__panel {
  position: relative;
  aspect-ratio: 1280 / 540;
  overflow: hidden;
  background: #0b0b0c;
  isolation: isolate;
}
.bi-type-studies__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.82) contrast(1.02);
  transition: filter 600ms ease, transform 1200ms cubic-bezier(.2,.7,.2,1);
  transform: scale(1.02);
  pointer-events: none;
}
.bi-type-studies__panel:hover .bi-type-studies__video {
  filter: saturate(1) brightness(.94) contrast(1.04);
  transform: scale(1.0);
}
.bi-type-studies__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, hsl(var(--bg-hsl) / .35) 60%, hsl(var(--bg-hsl) / .92) 100%);
}
.bi-type-studies__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2.4vw, 30px);
  color: var(--fg);
}
.bi-type-studies__chip {
  display: inline-block;
  font-family: var(--f-label), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid hsl(var(--gold-hsl, 42 55% 52%) / .55);
  padding: 5px 12px;
  margin-bottom: 12px;
}
.bi-type-studies__note {
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.55;
  color: hsl(var(--fg-hsl) / .78);
  margin: 0;
  max-width: 42ch;
}
@media (max-width: 960px) {
  .bi-type-studies__grid { grid-template-columns: 1fr; }
  .bi-type-studies__panel { aspect-ratio: 16 / 11; }
}

/* ══════════════════════════════════════════════════════════════
   BCC PROCESS (III) — give it a Bugatti photographic backdrop
   so the 6 steps read against an editorial image, not flat text.
   ══════════════════════════════════════════════════════════════ */
.bi-fp-section.bi-curated-shell[data-bcc-bg],
.bi-fp-section.bi-curated-shell.has-bcc-image {
  position: relative;
  isolation: isolate;
}
.bi-fp-section.bi-curated-shell.has-bcc-image::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--bcc-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .18;
  filter: saturate(.8) brightness(.6);
  z-index: -1;
}
.bi-fp-section.bi-curated-shell.has-bcc-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(var(--bg-hsl) / .85) 0%, hsl(var(--bg-hsl) / .7) 50%, hsl(var(--bg-hsl) / .9) 100%);
  z-index: -1;
}

/* ══════════════════════════════════════════════════════════════
   STAKEHOLDERS (IV) — add subtle institutional photography
   to each stakeholder card.
   ══════════════════════════════════════════════════════════════ */
.bi-stakeholders--editorial .bi-stakeholder {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.bi-stakeholders--editorial .bi-stakeholder[data-photo]::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
  opacity: .22;
  filter: grayscale(.4) saturate(.85);
  z-index: -1;
  transition: opacity 300ms ease, filter 300ms ease;
}
.bi-stakeholders--editorial .bi-stakeholder[data-photo]:hover::before {
  opacity: .35;
  filter: grayscale(.2) saturate(1);
}

/* ══════════════════════════════════════════════════════════════
   CLOSING CTA — full-bleed Type 57 SC Atlantic backdrop.
   ══════════════════════════════════════════════════════════════ */
.bi-curated-closing {
  position: relative;
  isolation: isolate;
}
.bi-curated-closing[data-photo]::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
  opacity: .25;
  filter: saturate(.85) brightness(.6);
  z-index: -1;
}
.bi-curated-closing[data-photo]::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, hsl(var(--bg-hsl) / .5), hsl(var(--bg-hsl) / .85)),
    linear-gradient(180deg, hsl(var(--bg-hsl) / .65) 0%, hsl(var(--bg-hsl) / .9) 100%);
  z-index: -1;
}