/* ═══════════════════════════════════════════════════════════════
   BRAND SKIN — homepage (Joe's Brand Style Guide, 13-08-2026 meeting)

   Loaded after hero-cinema.css on the front page only, and scoped under
   body.bi-brand-skin (toggled by the Brand Style settings screen), so
   switching the skin off restores the previous look with zero risk.

   Every value comes from the CSS variables printed by the bugatti-insights
   plugin (BrandStyle::print_css_vars) — colors/fonts are the site-wide
   tokens, --bi-* are the scale/spacing/shape tokens from the settings.

   What this skin changes, per the 13-08 meeting decisions:
   · Hero becomes a split layout — solid text panel left, UNTOUCHED photo
     right (no shade/grain/gradients, guide rules 2+5), rotation JS intact.
   · The category strip under the hero becomes a left-to-right TIMELINE
     showing title + years only (no descriptions, no divider lines, no
     connector line/bulbs — plain text row per Martien's feedback).
   · The 01/06 counter text is dropped (kept: prev/next arrows).
   · The ƎB emblem stays hidden pending the brand-rights agreement.
   Components and data are unchanged — this is styling only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: split layout ──────────────────────────────────────── */
body.bi-brand-skin.home .bi-hero-cinema {
  /* Height comes from the in-flow copy panel (min-height there), not from
     the section: min-height 0 kills hero-cinema.css's base
     min(100svh,940px), which silently re-applied once the skin stopped
     setting its own and blew the photo up to 822px while the panel was
     661px (13-08). */
  min-height: 0 !important;
  background: var(--sur);
  display: block;
  padding-bottom: var(--bi-tl-h, 118px);
}
/* (869etqynu, decision A) Desktop split layout only: bleed the section up
   under the now-transparent-at-rest fixed header, same technique
   .bdb-cat-hero uses below — negative margin pulls the section flush with
   the true viewport top, matching positive padding-top pushes the in-flow
   copy panel back down by the same amount so its visual position is
   unchanged. Below 1025px the hero stacks (photo on top of the panel, see
   the "Tablet / mobile" block further down) and never sits under the
   header, so margin/padding there stay at the plain generic body offset.
   (09-09 meeting, task 3057) `body.bi-brand-skin` already carries its own
   site-wide `padding-top:var(--bi-header-h)` (below, ~line 1237) — this
   section's -margin/+padding pair only CANCELS that existing offset before
   re-adding it, so the net effect was to pull the section's own box (and the
   absolutely-positioned photo inside it) up flush with the true viewport
   top, i.e. zero clearance from the fixed header regardless of the photo's
   own crop. Any partial buffer here still leaves the header crossing the
   photo by (header height − buffer), so a real fix has to cancel the pull
   entirely rather than shrink it: margin/padding both go to 0, leaving the
   section positioned by the body's own header-height padding alone, same as
   every non-hero page. min-height below is adjusted to match (it no longer
   needs to subtract the header height the padding-top used to re-add). The
   header itself is untouched — still transparent at rest — it just no
   longer has a photo underneath it to bleed over. */
@media (min-width: 1025px) {
  body.bi-brand-skin.home .bi-hero-cinema {
    margin-top: 0;
    padding-top: 0;
  }
}
body.bi-brand-skin.home .bi-hero-cinema__sequence,
body.bi-brand-skin.home .bi-hero-cinema__video {
  position: absolute;
  z-index: 0;
  inset: 0 0 var(--bi-tl-h, 118px) var(--bi-hero-split, 38%);
  width: auto;
  height: auto;
}
/* Guide rules 2 + 5: photography stays clean — no grain/noise texture. The
   shade layer used to be dropped entirely too; it's re-purposed instead as
   the header-zone scrim (desktop only, see below) — the text panel already
   carries its own solid background, so the shade only needs to cover the
   bare photo strip where the transparent header crosses it. */
body.bi-brand-skin.home .bi-hero-cinema__shade,
body.bi-brand-skin.home .bi-hero-cinema__grain {
  display: none !important;
}
@media (min-width: 1025px) {
  body.bi-brand-skin.home .bi-hero-cinema__shade {
    display: block !important;
    inset: 0 0 auto var(--bi-hero-split, 38%);
    height: calc(var(--bi-header-h, 50px) + 64px);
    background: linear-gradient(to bottom, hsl(var(--bg-hsl) / .82) 0%, transparent 100%);
  }
}

/* Solid text panel, left */
body.bi-brand-skin.home .bi-hero-cinema__copy {
  /* In flow, same clip fix: the section grows with the panel content on
     short viewports; min-height keeps the cinematic proportions. The
     section's padding-bottom reserves the timeline strip. */
  position: relative;
  z-index: 3;
  /* Same formula as .bdb-cat-hero__inner — the photo spans exactly this
     panel's height (its inset stops at the timeline strip), so the hero
     picture is per definition as tall as on category/type pages (13-08:
     the 92svh-based variant made the homepage photo taller than the rest).
     (09-09 meeting, task 3057) No longer subtracts --bi-header-h: the
     section's own padding-top (which this used to compensate for) is 0 at
     desktop now, see the ≥1025px block above — only ≤1024px ever renders
     this value uncontested (the "Tablet / mobile" block below resets
     min-height to 0 for the stacked layout), so this edit is desktop-only
     in effect. */
  min-height: min(78svh, 720px);
  width: var(--bi-hero-split, 38%);
  max-width: none;
  margin: 0;
  background: var(--sur);
  /* No divider against the photo (Martien 13-08 round 5b: no --line
     hairlines in the hero) — the surface/photo contrast is the edge. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  text-shadow: none;
  /* Header no longer overlays the hero (the section starts below it), so
     the panel needs no extra clearance at the top. */
  padding: 56px clamp(28px, 3.5vw, 60px) 48px var(--bi-space-x, 70px);
}
body.bi-brand-skin.home .bi-hero-cinema__copy * { text-shadow: none; }

body.bi-brand-skin.home .bi-hero-cinema__eyebrow,
body.bi-brand-skin.home .bi-hero-cinema__era {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
  /* Tight against the rule directly under it (Martien 13-08: the gap
     between the category name and the line was far too large). */
  margin: 0 0 10px;
}
body.bi-brand-skin.home .bi-hero-cinema__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--bi-size-h1, 62px);
  line-height: 1.06;
  letter-spacing: normal;
  text-transform: none; /* guide sets headers in serif title case, not caps */
  color: var(--fg);
  margin: 0 0 14px;
}
body.bi-brand-skin.home .bi-hero-cinema__tagline {
  font-family: var(--bi-f-accent, var(--f-display));
  font-style: normal;
  font-weight: 400;
  font-size: var(--bi-size-subtitle, 22px);
  letter-spacing: normal;
  text-transform: none;
  color: var(--gold);
  margin: 0;
}
body.bi-brand-skin.home .bi-hero-cinema__rule {
  display: block;
  width: 56px;
  border: 0;
  border-top: 1px solid var(--gold);
  /* No top margin: the eyebrow above carries the (reduced) 10px gap. */
  margin: 0 0 24px;
}
/* ƎB emblem stays off pending the brand-rights agreement (2026-07-29). */
body.bi-brand-skin.home .bi-hero-cinema__emblem { display: none; }
/* Same rule for the giant ƎB watermark behind the footer's BCC band ("What
   separates a Bugatti record from a Bugatti rumour?") — it read as a stray
   letter Ǝ on the right (Martien 15-08) and the emblem is off site-wide
   anyway; the band keeps the plain --bg the neighbouring sections use. */
body.bi-brand-skin .bi-bcc-sticky-section::before { content: none; }

body.bi-brand-skin.home .bi-hero-cinema__cat-desc {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: var(--bi-size-body-lg, 18px);
  line-height: 1.65;
  color: hsl(var(--fg-hsl) / .66);
  max-width: 42ch;
  margin: 0;
}
/* (3119) Only this button's placement in the hero stays here. Its
   appearance was the reference every other CTA was supposed to match, so
   it now comes from the same place they do — .bi-cta in buttons.css —
   rather than being described here and approximated everywhere else. */
body.bi-brand-skin.home .bi-hero-cinema__explore {
  align-self: flex-start;
  margin-top: 44px;
}

/* ── Hero: era timeline strip (bottom, left → right) ─────────── */
body.bi-brand-skin.home .bi-hero-cinema__timeline {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: var(--bi-tl-h, 118px);
  width: auto;
  transform: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  background: var(--sur);
  /* No hairline above the era strip (round 5b) — surface tone carries it. */
  border-top: none;
  border-left: none;
  /* (3201) Bottom edge of the strip: the base rule in hero-cinema.css paints
     it 1px rgba(255,255,255,.06), which is near-invisible (Martien 10-09:
     "this border at the bottom should be a bit thicker"). Explicit override
     here — the sitewide hairline token, still a hairline, clearly
     visible. Top/left stay off per the round-5b decision above; only the
     bottom gets a line. (3216) The hard-coded 2px became --bi-hairline-w in
     tokens.css: this line is the reference thickness for every divider
     hairline in the family. */
  border-bottom: var(--bi-hairline-w, 2px) solid var(--line);
  padding: 0 var(--bi-space-x, 70px);
  overflow: visible;
}
body.bi-brand-skin.home .bi-hero-cinema__timeline::before { content: none; }

body.bi-brand-skin.home .bi-hero-cinema__tl-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  text-align: left;
  padding: 32px 28px 0 0;
  justify-content: center;
  background: none;
  border: none;
  text-decoration: none;
}
/* (13-08 feedback, Martien) No decorative connector line or node bulbs —
   the strip is just years + title, reading left to right. content:none on
   both pseudo-elements also neutralizes the pre-skin underline styles. */
body.bi-brand-skin.home .bi-hero-cinema__tl-item::before,
body.bi-brand-skin.home .bi-hero-cinema__tl-item.is-active::before,
body.bi-brand-skin.home .bi-hero-cinema__tl-item::after,
body.bi-brand-skin.home .bi-hero-cinema__tl-item.is-active::after { content: none; }
/* Era name on TOP in the small-caps overline style, years UNDERNEATH in the
   serif display style (Martien 13-08 swap: content trades places, each
   position keeps its style). .bi-hero-cinema__tl-year is the DOM node
   carrying the era NAME; __tl-date carries the year range — DOM order is
   already name-then-years, so the old order:-1 that pulled the years up is
   simply dropped. Inactive items are white-ish throughout; the hovered or
   active item turns gold. */
body.bi-brand-skin.home .bi-hero-cinema__tl-year {
  display: block;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-button, 11px);
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  transition: color .25s ease;
}
body.bi-brand-skin.home .bi-hero-cinema__tl-date {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(var(--bi-size-subtitle, 22px) - 2px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  margin: 0;
  transition: color .25s ease;
}
/* Descriptions dropped from the strip (13-08 meeting) — data still present
   in the DOM for screen readers/SEO, just not shown. */
body.bi-brand-skin.home .bi-hero-cinema__tl-era { display: none; }
body.bi-brand-skin.home .bi-hero-cinema__tl-line { display: none; }
body.bi-brand-skin.home .bi-hero-cinema__tl-item:hover .bi-hero-cinema__tl-year,
body.bi-brand-skin.home .bi-hero-cinema__tl-item.is-active .bi-hero-cinema__tl-year,
body.bi-brand-skin.home .bi-hero-cinema__tl-item:hover .bi-hero-cinema__tl-date,
body.bi-brand-skin.home .bi-hero-cinema__tl-item.is-active .bi-hero-cinema__tl-date {
  color: var(--gold);
}
body.bi-brand-skin.home .bi-hero-cinema__tl-about {
  flex: 0 0 auto;
  /* Same box geometry as the era items (32px top offset + centered
     content) so the label sits on the same visual line as their text —
     align-self:center used to float it on the strip's own midline
     instead (Martien 13-08 round 5c). */
  align-self: stretch;
  margin-left: auto;
  padding: 32px 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.bi-brand-skin.home .bi-hero-cinema__tl-about::before,
body.bi-brand-skin.home .bi-hero-cinema__tl-about::after { content: none; }
/* No arrow after the label (round 5c) — it's a list item like the eras,
   not a call-to-action chip. (3002: the arrow span itself is gone from
   front-page.php now, so there's nothing left to hide here.) */
body.bi-brand-skin.home .bi-hero-cinema__tl-about-label {
  font-family: var(--f-label);
  font-weight: 700;
  font-size: var(--bi-size-button, 11px);
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  /* Same rule as the era items: white-ish at rest, gold when hovered or
     when the About slide is the active one. */
  color: var(--fg);
  transition: color .25s ease;
}
body.bi-brand-skin.home .bi-hero-cinema__tl-about:hover .bi-hero-cinema__tl-about-label,
body.bi-brand-skin.home .bi-hero-cinema__tl-about.is-active .bi-hero-cinema__tl-about-label {
  color: var(--gold);
}

/* ── Hero: counter → arrows only (01/06 text dropped, 13-08) ─── */
/* (13-08 feedback, Martien) Arrows on the LEFT, bare — no borders, no
   boxes — and they grow on hover / shrink back on unhover. */
body.bi-brand-skin.home .bi-hero-cinema__counter {
  left: var(--bi-space-x, 70px);
  right: auto;
  bottom: calc(var(--bi-tl-h, 118px) + 22px);
  gap: 18px;
  text-shadow: none;
}
body.bi-brand-skin.home .bi-hero-cinema__counter-cur,
body.bi-brand-skin.home .bi-hero-cinema__counter-sep,
body.bi-brand-skin.home .bi-hero-cinema__counter-total { display: none; }
body.bi-brand-skin.home .bi-hero-cinema__counter-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: none;
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  text-shadow: none;
  transform: scale(1);
  transition: transform .22s ease, color .22s ease;
}
/* The little triangle (Martien 12-09): currentColor fill with a dark
   hairline stroke, so the SHAPE itself carries contrast on light imagery
   even without the scrim disc behind it. */
body.bi-brand-skin.home .bi-hero-cinema__tri { display: block; }
body.bi-brand-skin.home .bi-hero-cinema__tri path {
  fill: currentColor;
  stroke: hsl(220 45% 4% / .55);
  stroke-width: 1;
  stroke-linejoin: round;
}
body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:hover {
  transform: scale(1.35);
  color: var(--gold);
}
body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:focus,
body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--bi-radius, 0);
}

/* ── Hero: prev/next arrows pop onto the photo's own edges (task 3002) ──
   The buttons stay DOM children of .bi-hero-cinema__counter — main.js
   selects them by [data-hero-prev]/[data-hero-next], not by DOM position
   — so position:absolute here only detaches them visually from the
   counter's bottom-left spot onto the photo itself, low-opacity at rest,
   fuller on hover/focus over their own dark scrim (readable on both
   light and dark hero frames). Vertical centering is against the
   PHOTO's own box (section height minus the timeline strip), not the
   whole section. Desktop split-layout only: the counter (and these
   buttons with it) is already display:none below 1025px, where the
   existing in-flow "counter below copy" mobile fallback is untouched. */
@media (min-width: 1025px) {
  /* .bi-hero-cinema__counter is itself position:absolute (hero-cinema.css)
     and, with its own text hidden above and both buttons now popped out
     below, has no in-flow content left to size itself by — it collapses
     to a ~0×0 box. Left absolute, its buttons' percentages/calc()s below
     would resolve against THAT collapsed box instead of the hero section.
     Switching it to static makes the section (.bi-hero-cinema, itself
     position:relative) the buttons' containing block again. */
  body.bi-brand-skin.home .bi-hero-cinema__counter {
    position: static;
  }
  /* Contrast system (Martien 12-09: always visible on light AND dark
     frames): a blurred dark scrim disc guarantees a stable dark backdrop
     under the triangle regardless of the photo (backdrop-filter darkens
     white paint; the disc's own tint covers browsers without it), a faint
     white rim separates the disc from dark photos, and the triangle is
     WHITE with a dark hairline stroke - readable on both extremes. Gold
     returns on hover, on the guaranteed-dark disc. */
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow {
    position: absolute;
    top: calc((100% - var(--bi-tl-h, 118px)) / 2);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: hsl(220 45% 4% / .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid hsl(0 0% 100% / .22);
    color: #fff;
    opacity: .85;
    transform: translateY(-50%) scale(1);
    transition: opacity .22s ease, transform .22s ease, background .22s ease, color .22s ease;
  }
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow[data-hero-prev] {
    left: calc(var(--bi-hero-split, 38%) + 24px);
  }
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow[data-hero-next] {
    right: 24px;
  }
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:hover,
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:focus,
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:focus-visible {
    opacity: 1;
    background: hsl(220 45% 4% / .72);
    color: var(--gold);
    transform: translateY(-50%) scale(1.12);
    border-radius: 50%;
  }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow {
    transition: opacity .22s ease, background .22s ease, color .22s ease;
    transform: translateY(-50%);
  }
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:hover,
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:focus,
  body.bi-brand-skin.home .bi-hero-cinema__counter-arrow:focus-visible {
    transform: translateY(-50%);
  }
}

/* ── Register quick-access bar (component unchanged: two buttons) ── */
body.bi-brand-skin .bi-reg-bar {
  background: var(--bg);
}
/* (3119) Two rules stood here: a 1px-gold-border solid-gold treatment for
   every curated-actions link, and an .is-secondary outline beside it. The
   first was already dead on arrival — the block near line 720 below
   restated border/padding on the same selector, so its 1px border never
   rendered and only its box-shadow:none and !important radius survived.
   That is the shape of the problem this task exists for: a rule everyone
   read as the definition of the button while the browser ignored most of
   it. The three roles now live once, in assets/css/buttons.css, keyed on
   .bi-cta rather than on position or on .is-secondary. The squared corner
   still comes from the plugin's site-wide radius blanket in
   BrandStyle.php, which reaches these elements via [class*="-cta"]. */

/* ── Featured Chassis — header + card overrides ── */
body.bi-brand-skin .bi-feat-section__hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 36px;
}
body.bi-brand-skin .bi-feat-section__hd-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.bi-brand-skin .bi-feat-section__hd-right {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
}
body.bi-brand-skin .bi-feat-section .ch-sec-eyebrow {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
}
body.bi-brand-skin .bi-feat-section__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 3.5vw, 48px);
  letter-spacing: 0;
  color: var(--fg, #e8dfc8);
  margin: 0;
  line-height: 1.1;
}
body.bi-brand-skin .bi-feat-section__title em {
  font-style: italic;
  color: var(--gold);
}

/* Cards: borderless, transparent background, no hover border */
body.bi-brand-skin .bi-feat-card {
  border: 0;
  background: transparent;
  border-radius: 0;
}
body.bi-brand-skin .bi-feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px hsl(220 45% 2% / .45);
  border-color: transparent;
}
body.bi-brand-skin .bi-feat-card::after { display: none; }

/* Photo: aspect-ratio based, no initial zoom */
body.bi-brand-skin .bi-feat-card__photo {
  height: auto;
  aspect-ratio: 4 / 3;
}
body.bi-brand-skin .bi-feat-card__photo-bg {
  transform: none;
  transition: transform .5s ease;
}
body.bi-brand-skin .bi-feat-card:hover .bi-feat-card__photo-bg {
  transform: scale(1.04);
}

/* Body: flush left (no side padding), tighter gap */
body.bi-brand-skin .bi-feat-card__body {
  padding: 1rem 0 0.5rem;
  gap: 0.35rem;
}

/* Footer: no separator line */
body.bi-brand-skin .bi-feat-card__footer {
  border-top: 0;
  /* 3059: was a flat 0.5rem, which overrode main.css's margin-top:auto and
     left each card's CTA floating at whatever height its summary happened to
     end. auto pushes the footer to the bottom so all three CTAs share one
     baseline; 0.5rem survives as the minimum gap via padding-top, since auto
     collapses to zero once a card is the tallest in its row. */
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Summary text: slightly more visible */
body.bi-brand-skin .bi-feat-card__summary {
  color: hsl(40 20% 78% / .8);
}
body.bi-brand-skin .bi-feat-card--empty__photo {
  background:
    radial-gradient(circle at 50% 38%, hsl(var(--gold-hsl) / .14), transparent 44%),
    linear-gradient(160deg, rgba(7,10,16,.98), rgba(16,21,29,.95));
}

/* Grid gap */
body.bi-brand-skin .bi-feat-grid { gap: var(--bi-gap, 36px); }
body.bi-brand-skin .bdb-cat-nav-card {
  height: auto;
  /* No hairline around picture cards (Martien 13-08 round 5: gold/olive
     borders around photos are not in the style guide). */
  border: 0;
  border-radius: var(--bi-radius, 0);
  background: var(--sur);
}
body.bi-brand-skin .bdb-cat-nav-card:hover {
  /* (3133) Was transform:none/box-shadow:none, leaving this the only card
     family on the site whose hover is a text-color change and nothing else
     (.bi-feat-card and .bcc-pillar both lift). Restoring the lift + shadow
     the un-skinned component already defines (bugatti-dashboard.css) brings
     it back in line with them; the gold/olive BORDER stays suppressed —
     that part of Martien's 13-08 "no borders around photos" rule above is
     untouched, since border stays 0 at rest and this rule never sets
     border-color. */
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}
body.bi-brand-skin .bdb-cat-nav-card__media {
  height: auto;
  aspect-ratio: var(--bi-img-ratio, 1400/860); /* guide rule 3 */
}
body.bi-brand-skin .bdb-cat-nav-card__bg,
body.bi-brand-skin .bdb-cat-nav-card:hover .bdb-cat-nav-card__bg { transform: none; }
/* Guide rule 2: no gradient wash over the car photo. */
body.bi-brand-skin .bdb-cat-nav-card__overlay { display: none; }
body.bi-brand-skin .bdb-cat-nav-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 24px 24px;
  /* (3216) Photo→label divider inside the card follows the sitewide
     hairline thickness (the card's own outer border is a different
     family and stays untouched). */
  border-top: var(--bi-hairline-w, 2px) solid var(--line);
  gap: 6px;
}
body.bi-brand-skin .bdb-cat-nav-card__label {
  font-family: var(--f-display);
  /* 869etva9p (Joe/Martien 01-09): category names on the cards read too
     small — nudged +2px off the token, same calc-offset pattern the hero
     timeline date (.bi-hero-cinema__tl-date) already uses. */
  font-size: calc(var(--bi-size-h4, 28px) + 2px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
body.bi-brand-skin .bdb-cat-nav-card__stats {
  font-family: var(--f-label);
  font-weight: 600;
  /* 869etva9p: chassis/type-count line +2px, in step with __label above. */
  font-size: calc(var(--bi-size-button, 11px) + 2px);
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: hsl(var(--fg-hsl) / .6);
}
body.bi-brand-skin .bdb-cat-nav-card__browse {
  font-family: var(--f-label);
  font-weight: 700;
  font-size: var(--bi-size-button, 11px);
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Tablet / mobile: photo on top, panel below, timeline scrolls ── */
@media (max-width: 1024px) {
  body.bi-brand-skin.home .bi-hero-cinema {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
  }
  body.bi-brand-skin.home .bi-hero-cinema__sequence,
  body.bi-brand-skin.home .bi-hero-cinema__video {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    height: clamp(240px, 46vw, 430px);
  }
  body.bi-brand-skin.home .bi-hero-cinema__copy {
    position: relative;
    inset: auto;
    width: 100%;
    /* Desktop's split layout sets min-height to the photo's own height plus
       justify-content:center to vertically center the text inside it (line
       ~63/72) — on the stacked mobile layout the panel must size to its own
       content and sit flush under the photo instead, or the leftover
       centering leaves large empty bands above the era title and below the
       button (869ej10rx). */
    min-height: 0;
    justify-content: flex-start;
    border-right: none;
    /* (task 1638) Was 40px — a leftover from the desktop split-layout value,
       never revisited once the layout stacked photo-then-copy on tablet/
       phone. That reads as a large gap between the photo and the Type
       title right under it (09-03 meeting feedback). 18px matches the
       tight, "one connected section" spacing already used for the same
       photo-then-caption pattern elsewhere on this page (e.g. the Featured
       chassis dossier cards, .bi-feat-card__body padding-top). */
    padding: 18px 22px 46px;
    margin: 0;
  }
  body.bi-brand-skin.home .bi-hero-cinema__title { font-size: clamp(38px, 9vw, 52px); }
  body.bi-brand-skin.home .bi-hero-cinema__timeline {
    position: relative;
    inset: auto;
    top: auto;
    height: auto;
    justify-content: flex-start;
    gap: 30px;
    padding: 0 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.bi-brand-skin.home .bi-hero-cinema__tl-item {
    flex: 0 0 auto;
    min-width: 150px;
    text-align: left;
    padding: 30px 8px 24px 0;
  }
  /* __tl-date is the serif part after the swap (era name sits on top in
     the overline style) — the compact size follows the serif element. */
  body.bi-brand-skin.home .bi-hero-cinema__tl-date { font-size: 17px; }
  body.bi-brand-skin.home .bi-hero-cinema__tl-about { display: inline-flex; padding: 0 8px; }
  body.bi-brand-skin.home .bi-hero-cinema__counter { display: none; }
}

/* The era tile image only exists for the phone layout — desktop keeps the
   text-only strip. */
body.bi-brand-skin.home .bi-hero-cinema__tl-img { display: none; }

/* Phones (Martien 13-08, supersedes the round-5c vertical stack): the era
   strip renders as inline flowing tiles, TWO per row, category picture above
   the text, everything centered per tile. */
@media (max-width: 640px) {
  /* (3191) The hero copy's horizontal gutter, on the phone only. The ≤1024
     rule above sets `18px 22px 46px` and wins over hero-cinema.css's own
     phone rule on specificity (0,3,1 against 0,2,1), so this is the
     declaration that actually paints the homepage hero on a phone · the
     22px there was the reason the hero sat 4px outside the logo line while
     everything below sat 0.8px inside it. Vertical values are unchanged:
     the 18px top is task 1638's measured photo-to-title gap and the 46px
     bottom is the panel's own rhythm. Tablets keep 22px, because the ≤1024
     rule is untouched and the gutter token is only redefined below 640. */
  body.bi-brand-skin.home .bi-hero-cinema__copy {
    padding: 18px var(--bi-shell-gutter) 46px;
  }
  body.bi-brand-skin.home .bi-hero-cinema__timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    height: auto;
    overflow-x: visible;
    padding: 26px var(--bi-shell-gutter) 32px;
  }
  body.bi-brand-skin.home .bi-hero-cinema__tl-item {
    min-width: 0;
    padding: 0;
    text-align: center;
    align-items: center;
  }
  body.bi-brand-skin.home .bi-hero-cinema__tl-img {
    display: block;
    width: 100%;
    aspect-ratio: var(--bi-img-ratio, 1400/860); /* guide rule 3 */
    background-size: cover;
    background-position: center;
    /* Image first (DOM order), text below — order reset to natural. */
    order: -1;
    margin: 0 0 10px;
  }
  /* About: a full-width row after the tiles, centered, no image. */
  body.bi-brand-skin.home .bi-hero-cinema__tl-about {
    grid-column: 1 / -1;
    align-self: center;
    justify-content: center;
    margin-left: 0;
    padding: 6px 0 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE BRAND RULES (13-08 round 4 — "everything in line with
   the design"). Loaded on every page; colors/fonts already come from
   the tokens, these rules align component chrome: olive hairlines
   instead of gold-alpha borders, straight corners on areas, gold
   tracked overlines, and the footer per the design document.
   ═══════════════════════════════════════════════════════════════ */

/* (3119) The editorial/curated CTA outline treatment lived here: 16px 36px,
   2px --line, tracked caps, gold-fill hover, no lift. Every decision in it
   survives — it IS the solo role — it just lives in assets/css/buttons.css
   now, next to the other two roles instead of two hundred lines away from
   them. The notes it carried are kept there: Martien 13-08 "exactly like
   the other buttons", the 30-08 dark-gold-hairline-with-white-letters
   rule, and the 01-09 live-meeting bump from 1px to 2px because 1px read
   too thin on this exact button. */

/* Section eyebrows/overlines — document treatment everywhere. */
body.bi-brand-skin .ch-sec-eyebrow {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
}

/* Round 6 (869ehnavq): the blanket "olive hairline on every [class*=card]"
   rule that used to live here is gone — it's exactly the stray colored
   border round 5 was supposed to remove (it painted a visible olive edge
   on .bi-feat-card's own pre-existing border, e.g.). The blanket
   square-corner rule (border-radius) is unaffected and still lives in the
   plugin's printed CSS. */

/* ── Footer ── */
/* (3216) The footer's divider hairlines follow the hero timeline's
   thickness: every decorative separator in the family reads
   --bi-hairline-w (2px) instead of its old 1px. Width only — the olive
   --line recolour these rules already carried is unchanged. The base
   widths in main.css stay 1px so switching the skin off restores the
   previous look, hence the explicit per-side width overrides here. */
body.bi-brand-skin .site-footer {
  background: var(--sur);
  border-top: var(--bi-hairline-w, 2px) solid var(--line);
}
body.bi-brand-skin .site-footer__cta {
  border-color: var(--line);
  border-bottom-width: var(--bi-hairline-w, 2px);
}
body.bi-brand-skin .site-footer__bottom {
  border-color: var(--line);
  border-top-width: var(--bi-hairline-w, 2px);
}
body.bi-brand-skin .site-footer__cta-stat {
  border-color: var(--line);
}
body.bi-brand-skin .site-footer__cta-stat b,
body.bi-brand-skin .site-footer__cta-stat strong {
  font-family: var(--f-display);
  color: var(--gold);
}
body.bi-brand-skin .site-footer__col-head {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
}
/* BCC step blocks (13-08 redesign) — the boxed cards with arrows read as
   foreign next to the open timeline/stats language. Now the same open
   treatment used everywhere else: a single olive hairline on top, gold
   tracked number, serif name, muted condensed body. No boxes, no arrows,
   no gem ornament. */
body.bi-brand-skin .bi-bcc-card {
  background: none;
  border: none !important; /* 13-08: top hairline dropped too — fully open */
  border-radius: 0 !important;
  padding: 8px 8px 8px 0;
}
body.bi-brand-skin .bi-bcc-card:hover {
  transform: none;
  box-shadow: none;
}
body.bi-brand-skin .bi-bcc-card__arrow,
body.bi-brand-skin .bi-bcc-card__gem { display: none !important; }
body.bi-brand-skin .bi-bcc-card__num {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
  color: var(--gold);
}
body.bi-brand-skin .bi-bcc-card__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  margin: 10px 0 8px;
  transition: color .25s ease;
}
body.bi-brand-skin .bi-bcc-card:hover .bi-bcc-card__name { color: var(--gold); }
body.bi-brand-skin .bi-bcc-card__desc {
  /* Running text (869etqyny) — see .bdb-cat-hero__desc above for why. */
  font-family: var(--f-body, var(--f-label));
  font-weight: 300;
  font-size: var(--bi-size-body-sm, 14px);
  line-height: 1.6;
  color: hsl(var(--fg-hsl) / .6);
}

/* ── Round 5 (Martien 13-08 live feedback) ─────────────────────
   Stray gold hairlines that are not in the style guide. */

/* Round 6 (869ehnavq): the header icon buttons (Ask the AI chat bubble +
   tour question mark) and the mobile floating-pill bar used to be patched
   here with a body.bi-brand-skin override, higher-specificity than the
   base rule in nav.css/tour.css but leaving that base rule's gold-dim
   border / pill margins in place. A QA pass (Lessy, 2026-08-15) read
   nav.css/tour.css directly and flagged both as unfixed — a reasonable
   read, since the task's own technical notes name those exact rules.
   Both are now fixed at the source in nav.css/tour.css instead; no
   override needed here, and the fix no longer depends on the brand-skin
   toggle being on. */

/* Types archive "explore by era" grid (round 5 follow-up, Martien 13-08:
   the featured category cards there carry a different gold border than
   the one the picture-card fix above already removed). border-width
   stays so nothing reflows, only the color goes away. */
body.bi-brand-skin .bi-era-grid__cell,
body.bi-brand-skin .bi-era-grid__cell:hover,
body.bi-brand-skin .bi-era-grid__cell--featured,
body.bi-brand-skin .bi-era-grid__cell--featured:hover {
  border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   SPLIT HERO — CATEGORY + TYPE PAGES (13-08 round 6)
   Same layout language as the homepage hero: solid text panel left,
   ONE clean photo right (the category's/type's main picture — no
   slider), no veil/gradient over the car, no zoom-on-hover. The
   category page keeps its existing subcategories/types bar (photo +
   title cards) directly under the hero; the type page has no strip.
   ═══════════════════════════════════════════════════════════════ */

/* ── shared: section shell + photo right + veil handles header contrast ── */
body.bi-brand-skin .bdb-cat-hero,
body.bi-brand-skin .bdb-ch-hero {
  position: relative;
  display: block;
  min-height: 0 !important; /* kill the dashboard-css 74vh base — see home shell note */
  background: var(--sur);
  overflow: hidden; /* height comes from the in-flow panel (min-height there) */
}
/* (869etqynu, decision A) Desktop split layout only: bleed the section up
   under the now-transparent-at-rest fixed header, same -margin/+padding
   technique the homepage hero above uses — the negative margin pulls the
   section's box (and the absolutely-positioned .bg inset:0 inside it) up
   flush with the true viewport top, while the matching padding-top pushes
   the in-flow panel content back down by the same amount, so the panel's
   own visual position is unchanged and only the photo bleeds up behind the
   header. Below 1025px the heroes stack (photo full-width above the panel,
   see the mobile/tablet block further down) and never sit under the header
   at all, so they're left at the generic body padding-top push, unchanged —
   matching the homepage hero's own precedent at the same breakpoint.
   (09-09 meeting, task 3057) `body.bi-brand-skin` already carries its own
   site-wide `padding-top:var(--bi-header-h)` (nav.css/brand-home.css) — this
   -margin/+padding pair only cancelled that existing offset and re-added it,
   netting the section's box (and its absolutely-positioned .bg) flush with
   the true viewport top, i.e. zero clearance from the fixed header. That
   matters most here: chassis pages render the photo with
   background-size:contain (the "whole car always visible" policy above), so
   a tall/narrow source photo can fill the box's full height with zero
   letterbox gap at the top — any partial buffer still leaves the header
   crossing straight over the car by (header height − buffer). Cancelling the
   pull entirely (both margin and padding to 0, matching the homepage hero's
   own fix above) is what actually clears it: the section falls back to the
   body's own header-height padding, same as every non-hero page. The
   __inner/__bottom min-height/max-height formulas below are adjusted to
   match (padding-top no longer re-adds the header height, so it's no longer
   subtracted there either). The header itself is untouched — still
   transparent at rest — it just no longer has a photo underneath it to
   bleed over. */
@media (min-width: 1025px) {
  body.bi-brand-skin .bdb-cat-hero,
  body.bi-brand-skin .bdb-ch-hero {
    margin-top: 0;
    padding-top: 0;
  }
}
/* The footage layer has to follow the photo it replaces into the right-hand
   pane of the split layout, otherwise it would run under the text panel. */
body.bi-brand-skin .bdb-cat-hero__bg,
body.bi-brand-skin .bdb-cat-hero__video,
body.bi-brand-skin .bdb-ch-hero__bg {
  inset: 0 0 0 var(--bi-hero-split, 38%);
  background-position: center;
  transform: none !important;
  transition: none;
}
body.bi-brand-skin .bdb-ch-hero:hover .bdb-ch-hero__bg { transform: none !important; }
/* The text panel already carries its own solid background — enough
   contrast for the header where it crosses that half. This veil only needs
   to cover the bare photo strip on the right, and only where the header
   actually overlaps it (the desktop split layout above). .bdb-ch-hero__veil
   stays hidden: no live template renders `.bdb-ch-hero` markup any more
   (single-bcc_type.php / single-bcc_chassis.php both reuse .bdb-cat-hero,
   see their own header comments), so there is nothing to protect there. */
body.bi-brand-skin .bdb-cat-hero__veil,
body.bi-brand-skin .bdb-ch-hero__veil { display: none; }
@media (min-width: 1025px) {
  body.bi-brand-skin .bdb-cat-hero__veil {
    display: block;
    inset: 0 0 auto var(--bi-hero-split, 38%);
    height: calc(var(--bi-header-h, 50px) + 64px);
    background: linear-gradient(to bottom, hsl(var(--bg-hsl) / .82) 0%, transparent 100%);
  }
}

/* ── category hero: inner content becomes the left panel ── */
body.bi-brand-skin .bdb-cat-hero__inner {
  /* In flow (not absolute) so the SECTION grows with the panel content —
     on wide-but-short viewports the fixed 78svh box used to clip the
     bottom of the panel (stats/Explore invisible, 13-08 feedback). The
     min-height keeps the tall cinematic look on normal screens. */
  position: relative;
  width: var(--bi-hero-split, 38%);
  min-height: min(calc(78svh - var(--bi-header-h, 50px)), 720px);
  max-width: none;
  margin: 0;
  background: var(--sur);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 72px clamp(28px, 3.5vw, 60px) 48px var(--bi-space-x, 70px);
}
body.bi-brand-skin .bdb-cat-hero__eyebrow {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
}
body.bi-brand-skin .bdb-cat-hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--bi-size-h1, 62px);
  line-height: 1.06;
  color: var(--fg);
  text-shadow: none;
}
body.bi-brand-skin .bdb-cat-hero__title em {
  font-family: var(--bi-f-accent, var(--f-display));
  font-style: italic;
  color: var(--gold);
}
body.bi-brand-skin .bdb-cat-hero__desc {
  /* Running text (869etqyny) — was --f-label (Roboto Condensed), a leftover
     of the pre-30-08 "everything non-heading" rule; body copy moved to
     --f-body (Tinos) in PR #1256 but this direct declaration was missed. */
  font-family: var(--f-body, var(--f-label));
  font-weight: 300;
  font-size: var(--bi-size-body-lg, 18px);
  line-height: 1.65;
  color: hsl(var(--fg-hsl) / .66);
  max-width: 42ch;
  text-shadow: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.bi-brand-skin .bdb-cat-hero__stat-n {
  font-family: var(--f-display);
  color: var(--gold);
}
body.bi-brand-skin .bdb-cat-hero__stat-l {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: var(--fg);
}
/* (brand-skin .bdb-cat-hero__explore override removed — the Explore scroll
   link is gone site-wide, 2999/3302/#1443 + this change.) */

/* ── type hero: bottom block becomes the left panel, topbar above it ── */
body.bi-brand-skin .bdb-ch-hero__bottom {
  /* In flow, same formula as .bdb-cat-hero__inner — section height = panel
     height. max-height hard-caps the chassis panel to match category/type so
     tall content (many facts, long coachwork label) can't push the hero taller.
     overflow:hidden clips anything that exceeds the cap. align-items:flex-start
     so content flows from the top and excess clips at the bottom (not both). */
  position: relative;
  width: var(--bi-hero-split, 38%);
  min-height: min(calc(78svh - var(--bi-header-h, 50px)), 720px);
  max-height: min(calc(78svh - var(--bi-header-h, 50px)), 720px);
  overflow: hidden;
  background: var(--sur);
  display: flex;
  align-items: flex-start;
  padding: 96px clamp(28px, 3.5vw, 60px) 48px var(--bi-space-x, 70px);
}
/* (09-09 meeting, task 3057) Matches the section's own margin/padding fix
   above (both now 0 at desktop, cancelling the header bleed entirely) — the
   -header-h term in min-height/max-height above existed only to compensate
   for the padding-top this cancels, so it's dropped here too. Placed after
   both base rules so it wins the cascade at equal specificity regardless of
   media-query order. */
@media (min-width: 1025px) {
  body.bi-brand-skin .bdb-cat-hero__inner {
    min-height: min(78svh, 720px);
  }
  body.bi-brand-skin .bdb-ch-hero__bottom {
    min-height: min(78svh, 720px);
    max-height: min(78svh, 720px);
  }
}
body.bi-brand-skin .bdb-ch-hero__topbar {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: var(--bi-hero-split, 38%);
  flex-wrap: wrap;
  padding: 26px clamp(28px, 3.5vw, 60px) 0 var(--bi-space-x, 70px);
}
body.bi-brand-skin .bdb-ch-hero__bottom-inner { width: 100%; display: block; }
body.bi-brand-skin .bdb-ch-hero__eyebrow {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
  text-transform: uppercase;
  color: var(--gold);
}
body.bi-brand-skin .bdb-ch-hero__num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--bi-size-h1, 62px);
  line-height: 1.06;
  color: var(--fg);
  text-shadow: none;
}
body.bi-brand-skin .bdb-ch-hero__family {
  font-family: var(--bi-f-accent, var(--f-display));
  font-style: italic;
  font-size: var(--bi-size-subtitle, 22px);
  color: var(--gold);
}
/* (13-08 feedback, Divo page) The facts row inherited boxed/blurred cells
   from the dashboard CSS — restyled as the same clean stat treatment the
   homepage register band and the category hero use: bare gold serif value
   over a small tracked label, no boxes. */
body.bi-brand-skin .bdb-ch-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 52px;
  margin-top: 38px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.bi-brand-skin .bdb-ch-hero__fact {
  background: none;
  padding: 0;
}
body.bi-brand-skin .bdb-ch-hero__fact-value {
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1.15;
  color: var(--gold);
  white-space: normal;
  max-width: none;
  overflow: visible;
  text-overflow: unset;
}
body.bi-brand-skin .bdb-ch-hero__fact-label {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  color: hsl(var(--fg-hsl) / .55);
  margin-bottom: 0;
  margin-top: 6px;
}
/* Category hero stats get the identical treatment for consistency. */
body.bi-brand-skin .bdb-cat-hero__stat-n {
  font-size: 30px;
  line-height: 1.15;
  display: block;
}

/* ── mobile/tablet: photo on top, panel below ── */
@media (max-width: 1024px) {
  body.bi-brand-skin .bdb-cat-hero,
  body.bi-brand-skin .bdb-ch-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* bugatti-dashboard.css caps .bdb-ch-hero at max-height 420px on phones
       (written for the old overlay hero where hero height = photo height).
       In this stacked layout the text panel alone fills that cap, so the
       photo — a shrinkable flex item — was crushed to 0px and chassis pages
       showed no picture on mobile at all. */
    max-height: none;
  }
  body.bi-brand-skin .bdb-cat-hero__bg,
  body.bi-brand-skin .bdb-ch-hero__bg {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    height: clamp(240px, 46vw, 420px);
    flex: 0 0 auto;
  }
  /* Stacked, the photo becomes a real flex item that takes up room. The
     footage layer must stay absolute and ride on top of it instead, or it
     would add a second band of its own below the picture. */
  body.bi-brand-skin .bdb-cat-hero__video {
    inset: 0 0 auto 0;
    height: clamp(240px, 46vw, 420px);
  }
  body.bi-brand-skin .bdb-cat-hero__inner,
  body.bi-brand-skin .bdb-ch-hero__bottom {
    position: relative;
    inset: auto;
    width: 100%;
    border-right: none;
    padding: 36px 22px 44px;
    /* Task 3036 · the desktop rules above give this panel a fixed
       min-height/max-height of min(78svh - header, 720px) so it can fill the
       full-bleed split hero next to the photo. Stacked on mobile the photo is
       a separate block above, so that reserved height is pure slack: with the
       desktop justify-content:center still in force the panel padded its
       content out to ~578px and pushed the first line of text 122px below the
       photo (measured at 390x844 against the compiled CSS). Release the
       height here and let the panel size to its own content, so the 36px
       padding above is the real photo-to-text gap. */
    min-height: 0;
    max-height: none;
    justify-content: flex-start;
  }
  body.bi-brand-skin .bdb-ch-hero__topbar {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 18px 22px 0;
  }
  body.bi-brand-skin .bdb-cat-hero__title,
  body.bi-brand-skin .bdb-ch-hero__num { font-size: clamp(38px, 9vw, 52px); }
}

/* (3191) Phone gutter for the category, type and chassis heroes · the same
   change the homepage hero gets, on the pages the homepage links into. The
   ≤1024 rules above win on specificity over anything in bugatti-dashboard.css,
   so this is where the 22px actually came from; below it .ch-page sits on the
   shell gutter, which meant the hero panel and the content under it started
   on two different lines. Only the horizontal value moves: the 36px and 18px
   tops are task 3036's measured photo-to-text gaps, and tablets keep 22px
   because the ≤1024 block is untouched. */
@media (max-width: 640px) {
  body.bi-brand-skin .bdb-cat-hero__inner,
  body.bi-brand-skin .bdb-ch-hero__bottom {
    padding: 36px var(--bi-shell-gutter) 44px;
  }
  body.bi-brand-skin .bdb-ch-hero__topbar {
    padding: 18px var(--bi-shell-gutter) 0;
  }
}

/* (13-08 feedback) No "01 / 06"-style counters anywhere — the fullscreen
   photo lightbox showed one at the bottom when opening a hero slide.
   Both lightbox variants carry one; hide them under the brand skin. */
body.bi-brand-skin .bi-lightbox__counter,
body.bi-brand-skin .bi-photo-lightbox__counter { display: none !important; }

/* Guide: headings in serif title case — the category hero title carried an
   uppercase transform from its pre-skin styling. */
body.bi-brand-skin .bdb-cat-hero__title {
  text-transform: none;
  letter-spacing: normal;
}

/* (13-08 feedback) Strip/nav cards are JUST the picture with the type or
   category name below it — no stats line, no Browse link, no icon overlay. */
body.bi-brand-skin .bdb-cat-nav-card__stats,
body.bi-brand-skin .bdb-cat-nav-card__browse,
body.bi-brand-skin .bdb-cat-nav-card__icon { display: none !important; }

/* Homepage never loads bugatti-dashboard.css, so the card's __bg div had no
   positioning there at all (static, height 0) — which is why a pinned
   Featured Chassis showed a black box instead of its photo. Make the card
   image self-contained in the skin. */
body.bi-brand-skin .bdb-cat-nav-card__media { position: relative; }
body.bi-brand-skin .bdb-cat-nav-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* (13-08 feedback) No icons in section eyebrows — "FEATURED CHASSIS" showed
   one in front of the label. Overlines are text-only in the document. */
body.bi-brand-skin .ch-sec-eyebrow svg,
body.bi-brand-skin .ch-sec-eyebrow img { display: none; }

/* The category hero title's inner span carried its own uppercase transform
   (the #996 fix only unset it on the parent) — serif title case per guide. */
body.bi-brand-skin .bdb-cat-hero__title-main {
  text-transform: none;
  letter-spacing: normal;
}

/* Joe's 01-09 ruling: Tinos (--f-display) is never set uppercase, anywhere —
   only Roboto Condensed (--f-label/--f-ui) overlines and micro-labels keep
   the caps treatment. These headings/names carried an uppercase transform
   from their pre-brand-skin styling in main.css — revert to normal
   capitalisation with the same 1px tracking as the mobile card names above
   (869etqypm). .bi-type-card__name (Types Archive grid) is fixed separately
   below, next to its existing brand-skin rule. The React sliders
   (.bi-slider__title/__nav-title — category/type/variant names), the Types
   Archive marquee (.bi-marquee__item), the Variant page masthead
   (.bi-page-masthead__h1) and its content headings (.bi-content h2). */
body.bi-brand-skin .bi-slider__title,
body.bi-brand-skin .bi-slider__nav-title,
body.bi-brand-skin .bi-marquee__item,
body.bi-brand-skin .bi-page-masthead__h1,
body.bi-brand-skin .bi-content h2 {
  text-transform: none;
  letter-spacing: 1px;
}
body.bi-brand-skin .bi-type-card:hover .bi-type-card__name {
  letter-spacing: 1px;
}


/* (13-08 feedback) Subcategories/types bars: no slider with arrows on
   desktop when the cards don't fit — wrap onto multiple lines instead.
   Mobile keeps the natural horizontal swipe. */
/* Arrows and dots are gone at EVERY width: desktop wraps multiline and
   mobile stacks rows — nothing slides any more, so slider chrome is
   meaningless everywhere. */
body.bi-brand-skin .bdb-type-slider__arrow,
body.bi-brand-skin .bdb-type-slider__dots { display: none !important; }
@media (min-width: 1025px) {
  body.bi-brand-skin .bdb-type-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--bi-gap, 36px);
    overflow: visible;
    transform: none !important;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
    width: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════
   GENERIC HEADER OFFSET (13-08 — "do it in a generic way")
   ONE mechanism pushes every page below the fixed header: padding on
   <body>, driven by the measured --bi-header-h. All the per-template
   offsets that existed before (the homepage hero's margin, .bi-main's
   80px desktop padding and mobile var padding) are neutralized under
   the skin so nothing double-pushes. New templates need no own offset.
   ═══════════════════════════════════════════════════════════════ */
body.bi-brand-skin { padding-top: var(--bi-header-h, 50px); }
body.bi-brand-skin .bi-main { padding-top: 0; }
@media (max-width: 640px) {
  body.bi-brand-skin .bi-main { padding-top: 0; }
}

/* ═══ MOBILE ALIGNMENT (13-08 feedback) ═══
   · Homepage timeline: hard left-aligned, no centering anywhere.
   · Category/type page bars: each card becomes a ROW on mobile — text on
     the left, picture on the right.
   · The site-wide Types page's Featured Types row (869ek90bz) shares the
     exact same .bdb-cat-nav-card markup as the Category page's bar, but its
     container is .bi-types-featured__row (a plain CSS grid — main.css),
     not .bdb-type-track (a scroll-snap slider — bugatti-dashboard.css), so
     it needs its own selector here rather than picking up .bdb-type-track's
     base flex/overflow-x slider styles, which would fight its grid layout
     at desktop widths. Kept in lockstep with .bdb-type-track below so the
     two rows read as the same design at every breakpoint. */
@media (max-width: 1024px) {
  body.bi-brand-skin.home .bi-hero-cinema__timeline {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-left: 22px;
  }
  body.bi-brand-skin.home .bi-hero-cinema__tl-item {
    text-align: left;
    align-items: flex-start;
  }

  body.bi-brand-skin .bdb-type-track,
  body.bi-brand-skin .bi-types-featured__row { display: block; }
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card {
    display: flex;
    flex-direction: row-reverse; /* DOM: media first — reversed = text left, picture right */
    align-items: center;
    width: 100%;
    min-width: 0;
    height: auto;
    margin-bottom: 14px;
  }
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card__media,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card__media {
    flex: 0 0 128px;
    aspect-ratio: var(--bi-img-ratio, 1400/860);
    height: auto;
  }
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card__content,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card__content {
    flex: 1;
    min-width: 0;
    border-top: none;
    border-right: 1px solid var(--line);
    padding: 16px 18px;
    text-align: left;
    align-items: flex-start;
  }
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card__label,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card__label { font-size: calc(var(--bi-size-body-lg, 18px) + 2px); } /* 869etva9p: +2px */
}

/* (13-08 feedback) Header icon labels on desktop: the language toggle shows
   "EN" and search shows "Search" — the chat icon now shows "Ask AI" and the
   question mark shows "Info" in the same treatment. Hidden on small screens
   like the search label. */
.bi-nav__icon-label {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: var(--bi-size-button, 11px); /* task 1638: was hardcoded 11px */
  letter-spacing: var(--bi-ls-button, 1px);
  text-transform: uppercase;
  margin-left: 7px;
  white-space: nowrap;
}
.bi-nav__icon .bi-nav__icon-label,
.bi-tour-trigger-icon .bi-nav__icon-label { color: inherit; }
@media (max-width: 640px) { .bi-nav__icon-label { display: none; } }
/* The icon/tour buttons were fixed circular tap targets — let them widen to
   fit their new labels on desktop. */
@media (min-width: 641px) {
  .bi-nav__icon,
  .bi-tour-trigger-icon { width: auto; border-radius: var(--bi-radius, 0); padding: 0 10px; }
}

/* (13-08) The bdb-type-card family (Related types bar on type pages, types
   archive grid) follows the same picture + name rule as bdb-cat-nav-card:
   no meta line, no "Browse/Open type" link. */
body.bi-brand-skin .bdb-type-track .bdb-type-card__meta,
body.bi-brand-skin .bdb-type-track .bdb-type-card__open { display: none !important; }
body.bi-brand-skin .bdb-type-track .bdb-type-card__name {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}

/* (13-08) Register quick-access bar: BCC-style closing CTA text above the
   two (unchanged) buttons — centered, eyebrow + serif title with the gold
   italic accent, like page-bcc.php's "Continue exploring" section. */
body.bi-brand-skin .bi-reg-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.bi-brand-skin .bi-reg-bar .ch-sec-eyebrow { justify-content: center; }
body.bi-brand-skin .bi-reg-bar .ch-sec-h2 { margin: 14px 0 30px; }
body.bi-brand-skin .bi-reg-bar .bi-curated-closing__actions { justify-content: center; }
/* (3119) Two near-identical primary overrides used to sit here: one scoped
   to .bi-reg-bar (869ej11zv) and one to .site-footer__cta-actions
   (869ekj972), written a fortnight apart because the second band never
   inherited the first band's fix. Both said "primary is whatever is not
   .is-secondary", which is a definition by exclusion: it cannot express a
   group of three, and it silently makes every button primary in a group
   where nobody remembered the class. Marking the lead button
   .bi-cta--primary in the markup says the same thing once, positively,
   and works for both bands and for the chassis page's group of three.
   The translateY(-2px) hover-lift both carried is dropped: the Explore
   Collection button is the reference and it does not move. */

/* (13-08) /types archive cards in the exact category-page card style:
   hairline-bordered tile, clean photo (guide ratio) on top, Tinos name
   below — no meta line, no "Open type" link. Applies to the All Types
   grid AND the Featured Types row (both use .bi-type-card). */
body.bi-brand-skin .bi-type-card {
  background: var(--sur);
  border: 1px solid var(--line);
  border-radius: 0 !important;
  overflow: hidden;
  transition: border-color .25s ease;
  /* The pre-skin card was a 300px-min photo tile with the title overlaid
     (absolute img + absolute bottom body) — that's what made the tiles
     "way too high" with dark filler. Flow layout instead: photo block on
     top, name row below, height = content. */
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}
body.bi-brand-skin .bi-type-card:hover {
  border-color: var(--gold);
  transform: none;
  box-shadow: none;
}
body.bi-brand-skin .bi-type-card__img {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: var(--bi-img-ratio, 1400/860);
  height: auto;
  border-radius: 0;
  transform: none !important;
}
body.bi-brand-skin .bi-type-card:hover .bi-type-card__img {
  transform: none !important;
  filter: none;
}
body.bi-brand-skin .bi-type-card__body {
  position: relative;
  inset: auto;
  background: none;
  min-height: 0 !important; /* pre-skin rule forces 384px to align overlay tiles */
  padding: 14px 16px 16px;
  /* (3216) Photo→name divider inside the tile: sitewide hairline width.
     The tile's own 4-side border above stays 1px (card border family). */
  border-top: var(--bi-hairline-w, 2px) solid var(--line);
}
body.bi-brand-skin .bi-type-card__title,
body.bi-brand-skin .bi-type-card__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  /* 01-09 ruling (Joe, 869etqypm): 1px tracking, same as the other mobile
     card names, now that this never carries an uppercase transform. */
  letter-spacing: 1px;
  text-transform: none;
  color: var(--fg);
  transition: color .25s ease;
}
body.bi-brand-skin .bi-type-card:hover .bi-type-card__title,
body.bi-brand-skin .bi-type-card:hover .bi-type-card__name { color: var(--gold); }
body.bi-brand-skin .bi-type-card__meta,
body.bi-brand-skin .bi-type-card__open { display: none !important; }

/* Phones: subcategory/type strips become 2-col vertical tiles —
   picture on top, name underneath — instead of a sideways scroll slider. */
@media (max-width: 640px) {
  body.bi-brand-skin .bdb-type-track,
  body.bi-brand-skin .bi-types-featured__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    cursor: default;
    margin: 0;
    padding: 0;
  }
  body.bi-brand-skin .bdb-type-track > *,
  body.bi-brand-skin .bi-types-featured__row > * {
    min-width: 0;
    width: auto;
    flex: none;
    height: auto;
    scroll-snap-align: none;
  }
  /* Override the 1024px row-reverse so each card stacks vertically:
     picture first in DOM → picture on top, name below. */
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card {
    flex-direction: column;
  }
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card__media,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card__media {
    flex: unset;
    width: 100%;
    aspect-ratio: var(--bi-img-ratio, 1400/860);
    height: auto;
  }
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card__content,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card__content {
    border-right: none;
    border-top: var(--bi-hairline-w, 2px) solid var(--line); /* (3216) */
    text-align: left;
    align-items: flex-start;
    padding: 8px 10px 10px;
  }
  /* 30-08 notes: on phones the type/category names go back to normal
     capitalisation with 1px tracking — the forced caps + wide tracking
     was never in the design (names are "Type 57S" there, not "TYPE 57S"). */
  body.bi-brand-skin .bdb-type-track .bdb-cat-nav-card__label,
  body.bi-brand-skin .bi-types-featured__row .bdb-cat-nav-card__label {
    font-size: calc(var(--bi-size-body-sm, 14px) + 2px); /* 869etva9p: +2px */
    text-transform: none;
    letter-spacing: 1px;
  }
  body.bi-brand-skin .bdb-type-slider__arrow { display: none; }
}

/* (3128) The chassis-column / propose-page brand remap that used to sit here
   is gone, because it is now the default. Task 869entcc9 remapped the
   dashboard's own custom properties to the site tokens for
   .single-bcc_chassis and .bdb-propose-page ("middle area of the chassis
   page ... blue background, not in line with the rest of the site"), and
   that approach was right: every bdb-* rule already reads those variables,
   so remapping the variables fixes 41 components at once instead of
   restyling them one by one.

   What it could not do at the time was apply everywhere.
   .bugatti-dashboard-page is shared by seven templates, and moving all of
   them meant moving the internal dashboard too, which nobody had asked for.
   So the remap was scoped to two templates and the category/type pages kept
   the old palette, which left the register rendering two different greys on
   pages that link straight into each other.

   tokens.css does the remap once now, on .bugatti-dashboard-page itself, and
   the internal dashboard opts back out by name via .bdb-admin-shell. Every
   line this block carried is a line there. */

/* ── Body-copy font (869etqyny) ──────────────────────────────────────────
   .bugatti-dashboard-page (bugatti-dashboard.css:21) sets its own base
   `font-family: var(--f-label)` (Roboto Condensed — correct for the real
   admin dashboard, a UI-chrome-only screen). Any descendant paragraph that
   doesn't declare its own font-family inherits that instead of the site's
   `--f-body` (Tinos) — confirmed live on .bdb-ch-prose (chassis biography)
   and .bdb-propose-hero__desc/.bdb-propose-recent__desc (contact/propose).

   Type and category pages hit the same root cause (.bdb-cat-hero__desc,
   fixed directly above) but are deliberately NOT added to this container-
   level remap: unlike chassis/propose, their templates render no other
   unstyled body-copy that relies on inheriting from .bugatti-dashboard-page
   (verified against single-bcc_type.php / taxonomy-bcc_category.php — the
   hero description and the breadcrumb nav below are the only unstyled text
   either renders, both fixed directly instead), and their pages don't have
   chassis/propose's history of already-audited "safe to remap" labels —
   remapping the whole container risks flipping an unrelated inheriting UI
   label (e.g. .bdb-ch-eyebrow has no font-family of its own and would
   silently pick up Tinos) to the body face for a page that never needed it
   fixed. Direct, per-element fixes stay safer there. */
body.bi-brand-skin.single-bcc_chassis .bugatti-dashboard-page,
body.bi-brand-skin .bdb-propose-page {
  font-family: var(--f-body, var(--f-label));
}

/* (3133) Same root cause, same fix as .bdb-cat-hero__desc above: the shared
   breadcrumb nav declares no font-family of its own, so on category/type
   pages it inherits .bugatti-dashboard-page's Roboto Condensed instead of
   the site's Tinos — the only two templates where it doesn't match every
   other page that renders this exact component (collection, chassis, about,
   contact, search, /types/). Direct per-element fix, not a container remap,
   for the same reason given above. */
body.bi-brand-skin .bdb-ch-hero__crumb a,
body.bi-brand-skin .bdb-ch-hero__crumb-cur {
  font-family: var(--f-body, var(--f-label));
}

/* ── Typography ────────────────────────────────────────────────────────────
   The rules below are the ones bugatti-dashboard.css hard-codes in rem
   instead of reading a token, so the remap above cannot reach them. Each
   maps onto the brand scale already injected on the page by BrandStyle
   (--bi-size-*, --bi-ls-*), which is the same scale the homepage uses and
   the same one annotated down the left margin of Joe's homepage guide. */

/* Section eyebrows — guide overline: 12px / 1px (was .63rem / .22em; 01-09
   letterspacing ruling, 869etqypa, supersedes the guide's original .32em). */
body.bi-brand-skin.single-bcc_chassis .bdb-ch-eyebrow {
  font-family: var(--f-label);
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
}

/* Body copy — guide body: 16px (was .9rem ≈ 14.4px, noticeably tighter than
   every other page). Colour comes off the corrected --bugatti-text. */
body.bi-brand-skin.single-bcc_chassis .bdb-ch-prose {
  font-size: var(--bi-size-body, 16px);
  color: hsl(var(--fg-hsl) / .78);
}

/* Chapter headings — display face at the guide's H4, upright. The dashboard
   sets italic 300, which is a dashboard idiom; the brand's own card and
   section titles (see .bdb-cat-nav-card__label above) are upright 400. */
body.bi-brand-skin.single-bcc_chassis .bdb-ch-chapter__title {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--bi-size-h4, 28px);
  line-height: 1.15;
}

/* Spec grid keys — same overline scale as the eyebrows, but in Tinos, not
   the condensed face (Martien 02-09, 869eu80jv: field names = Tinos, data
   values = Roboto Condensed — font families live on the base rules in
   bugatti-dashboard.css; these overrides only map the sizes onto the brand
   scale). History: values were italic display serif, then standard body
   text (#1179), now the condensed token (869eu80jv). */
body.bi-brand-skin.single-bcc_chassis .bdb-ch-spec-cell__key {
  font-size: var(--bi-size-overline, 12px);
  letter-spacing: var(--bi-ls-overline, 1px);
}
body.bi-brand-skin.single-bcc_chassis .bdb-ch-spec-cell__val {
  font-size: var(--bi-size-body, 16px);
}

/* Buttons + tab labels — guide button: 11px / 1px (was .78rem / .1em; 01-09
   letterspacing ruling, 869etqypa, supersedes the guide's original .28em).
   Brings the CTAs under the tabs in line with the homepage's buttons. */
body.bi-brand-skin.single-bcc_chassis .bdb-btn,
body.bi-brand-skin.single-bcc_chassis .bdb-tabs__tab {
  font-family: var(--f-label);
  font-size: var(--bi-size-button, 11px);
  letter-spacing: var(--bi-ls-button, 1px);
}

/* ── Mobile: smaller BCC shield on the certification photo (task 3199) ──
   Frank/Stuart (meeting 10-09, 21:56): on phones the shield emblem sat over
   the front of the Type 35 and hid the car. Only the SIZE comes down (~30%);
   the overlap past the photo's left edge is intentional and stays — "it
   should jump out of it" — so left:-4% / top:50% / translateY(-50%) from
   main.css are untouched and the height stays auto (PNG keeps its own
   ratio). Same 900px breakpoint as the base mobile rule in main.css
   (.bi-home-cert__seal { width: clamp(100px, 28%, 160px); }); desktop
   (>900px) is unchanged. No .home in the scope: the seal's class only
   exists in the homepage cert section anyway, and the plain body.bi-brand-
   skin prefix is enough specificity to beat the unscoped main.css rule. */
@media (max-width: 900px) {
  body.bi-brand-skin .bi-home-cert__seal {
    width: clamp(70px, 19%, 112px);
  }
}

/* ── Arabic / RTL: flip photo–text panel split on homepage hero ──
   Scoped to the same min-width:1025px the split layout itself needs
   (mobile stacks photo-over-panel at max-width:1024px, see the "Tablet /
   mobile" block above — there is no left/right split to flip there).
   MUST stay scoped: an unscoped [dir="rtl"] selector's extra attribute
   specificity beats the mobile media-query rules below even though it
   has no @media guard of its own, so it silently overrode the mobile
   .bi-hero-cinema__copy padding/margin with the desktop panel's much
   wider --bi-space-x padding — the panel's text got pushed off-screen on
   phones (869entfqw testing-failed round: "right: 142px ... falls beside
   the page on mobile"). */
@media (min-width: 1025px) {
  [dir="rtl"] body.bi-brand-skin.home .bi-hero-cinema__sequence,
  [dir="rtl"] body.bi-brand-skin.home .bi-hero-cinema__video {
    inset: 0 var(--bi-hero-split, 38%) var(--bi-tl-h, 118px) 0;
  }
  [dir="rtl"] body.bi-brand-skin.home .bi-hero-cinema__copy {
    margin-left: auto;
    text-align: right;
    padding: 56px var(--bi-space-x, 70px) 48px clamp(28px, 3.5vw, 60px);
  }
  [dir="rtl"] body.bi-brand-skin.home .bi-hero-cinema__counter {
    left: auto;
    right: var(--bi-space-x, 70px);
  }
  /* (task 3002) The photo itself is mirrored to the LEFT in RTL (see the
     __sequence inset above) — keep the prev/next buttons on the photo's
     own left/right edges rather than the LTR --bi-hero-split offsets,
     which would otherwise land them inside the text panel. */
  [dir="rtl"] body.bi-brand-skin.home .bi-hero-cinema__counter-arrow[data-hero-prev] {
    left: 24px;
    right: auto;
  }
  [dir="rtl"] body.bi-brand-skin.home .bi-hero-cinema__counter-arrow[data-hero-next] {
    left: auto;
    right: calc(var(--bi-hero-split, 38%) + 24px);
  }
}

/* ── Arabic / RTL: flip photo–text panel split on category/type/chassis
   hero (.bdb-cat-hero / .bdb-ch-hero) — same split-layout formula as the
   homepage hero above, never covered by the original 869entfqw fix
   (869entfqw testing-failed round: "on the category page, the type page
   or the chassis page it is still shown incorrectly on desktop"). Same
   min-width:1025px scoping as above — mobile already stacks these
   (see the "mobile/tablet: photo on top, panel below" block above). */
@media (min-width: 1025px) {
  [dir="rtl"] body.bi-brand-skin .bdb-cat-hero__bg,
  [dir="rtl"] body.bi-brand-skin .bdb-cat-hero__video,
  [dir="rtl"] body.bi-brand-skin .bdb-ch-hero__bg {
    inset: 0 var(--bi-hero-split, 38%) 0 0;
  }
  [dir="rtl"] body.bi-brand-skin .bdb-cat-hero__inner {
    margin-left: auto;
    text-align: right;
    padding: 72px var(--bi-space-x, 70px) 48px clamp(28px, 3.5vw, 60px);
  }
  [dir="rtl"] body.bi-brand-skin .bdb-ch-hero__bottom {
    margin-left: auto;
    text-align: right;
    padding: 96px var(--bi-space-x, 70px) 48px clamp(28px, 3.5vw, 60px);
  }
  [dir="rtl"] body.bi-brand-skin .bdb-ch-hero__topbar {
    left: auto;
    right: 0;
    padding: 26px var(--bi-space-x, 70px) 0 clamp(28px, 3.5vw, 60px);
  }
}