/* ============================================================
   Brands cinematic slideshow (mirror-style) — second carousel
   Left-justified. Text overlay (ghost number + headline + meta/CTA)
   pinned left; image track to its right with upcoming images peeking
   in, dimmed until active. On advance: number + image slide in from
   the right, headline rolls down, meta/CTA rolls up.
   ============================================================ */
.bss-stage {
  position: relative;
  width: 100%;
  margin: 90px 0 0;
  padding: 0 0 0 clamp(40px, 10vw, 145px);   /* left = responsive page margin (matches statement section); right = 0 */
  box-sizing: border-box;
}
.bss-viewport {
  position: relative;
  height: 760px;
  overflow: hidden;
}
/* data-only source slides are hidden; JS builds the visible UI */
.bss-slide { display: none; }

/* ---- Text overlay, pinned to the left ---- */
.bss-text {
  position: absolute;
  left: 0; top: 0;
  width: 34%;
  height: 100%;
  /* no z-index → does NOT create a stacking context, so the children's
     own z-index compete directly with the image track (z-index 2):
     number behind (1), title + foot in front (3). */
  pointer-events: none;
}
.bss-num {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 42px;
  left: -64px;           /* shifted left (16px more) */
  width: 760px;
  height: 360px;
  padding-top: 0.18em;    /* keep tall glyph tops from clipping */
  z-index: 1;
  font-family: 'Bebas Neue';
  font-weight: 400;
  font-size: 228px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(58, 58, 66, 0.5);
}
.bss-num-track { position: absolute; left: clamp(70px, 8.3vw, 120px); top: 0; }
.bss-num-i { position: absolute; left: 0; top: 0; white-space: nowrap; }
.bss-stage .bss-title {
  position: absolute;
  top: 53%;
  left: 0;
  transform: translateY(-50%);
  margin: 0;
  z-index: 3;
  pointer-events: none;   /* don't intercept hover over the photo behind it */
  overflow: hidden;          /* top/bottom walls clip the rolling name */
  /* Fixed-wide box so the wrapper never shrinks to the incoming name's
     width during a transition (which clipped longer OUTGOING names on the
     right). The roll is purely vertical, so a wide box is safe — text is
     left-aligned at left:0 and the extra width is invisible. */
  width: 80vw;
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
  font-size: clamp(52px, 5.72vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #3a3a42;
  max-width: none;
  /* Give descenders (g, y, p) room so they aren't clipped by the bottom
     roll-behind wall; padding sits inside the overflow:hidden clip box. */
  padding-bottom: 0.16em;
}
.bss-title-i { display: block; white-space: nowrap; }
.bss-title-i.bss-roll-out-down { position: absolute; top: 0; left: 0; width: max-content; }
.bss-meta { overflow: hidden; position: relative; }
.bss-meta-i { display: block; }
.bss-meta-i.bss-roll-out-up { position: absolute; top: 0; left: 0; width: max-content; }
.bss-foot {
  position: absolute;
  left: 0;
  bottom: 8%;        /* city + CTA sit just above the photo's bottom edge */
  z-index: 3;
}
.bss-meta {
  font-family: 'Jost';
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(58, 58, 66, 0.6);
  margin-bottom: 14px;
  height: 1.4em;          /* single-line clip window for the roll-up wall */
  line-height: 1.4;
  white-space: nowrap;    /* never wrap, so the wall only ever shows 1 line */
}
.bss-cta {
  display: inline-block;
  font-family: 'Jost';
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3a3a42;
  text-decoration: none;
  padding-bottom: 6px;
  position: relative;
  pointer-events: auto;
  z-index: 3;
}
.bss-cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: #d97a4f;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.bss-cta:hover::after { transform: scaleX(0); transform-origin: right; }

/* Entrance animations, re-triggered each advance via .bss-animate.
   All four elements share the SAME duration (1.25s), SAME delay (0), and
   SAME easing so they start and finish in perfect lock-step with the image
   tiles' 1.25s slide. */
.bss-num { overflow: hidden; }            /* the invisible "wall" that clips the digit */
.bss-num-i.bss-num-in  { animation: bssNumIn  1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }
.bss-num-i.bss-num-out { animation: bssNumOut 1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }
.bss-title-i.bss-roll-in-down  { animation: bssRollInDown  1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }
.bss-title-i.bss-roll-out-down { animation: bssRollOutDown 1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }
.bss-meta-i.bss-roll-in-up     { animation: bssRollInUp    1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }
.bss-meta-i.bss-roll-out-up    { animation: bssRollOutUp   1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }
@keyframes bssNumIn   { from { transform: translateX(760px); } to { transform: translateX(0); } }
@keyframes bssNumOut  { from { transform: translateX(0); } to { transform: translateX(-760px); } }
@keyframes bssRollInDown  { from { transform: translateY(-115%); } to { transform: translateY(0); } }
@keyframes bssRollOutDown { from { transform: translateY(0); } to { transform: translateY(115%); } }
@keyframes bssRollInUp    { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes bssRollOutUp   { from { transform: translateY(0); } to { transform: translateY(-115%); } }

/* ---- Cycling tagline: THEY ARE <salmon word>, word rolls up behind a wall ---- */
.bc-tagline { margin: 0 0 clamp(6px, 1vw, 16px); }
.brands-carousel.home-statement .bc-tag,
.brands-carousel.home-statement .bc-tag .bc-tag-cycle,
.brands-carousel.home-statement .bc-tag .bc-tag-i {
  font-family: 'Bebas Neue' !important;
  font-weight: 400 !important;
}
.brands-carousel.home-statement .bc-tag {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(44px, 6.4vw, 116px);
  line-height: 1;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.28em;
  white-space: nowrap;
}
.brands-carousel.home-statement .bc-tag .bc-tag-cycle {
  display: inline-block;
  position: relative;
  overflow: visible;
  clip-path: inset(-0.05em -100% -0.05em 0);
  color: var(--accent);
}
.bc-tag-i { display: block; white-space: nowrap; }
.bc-tag-i.bc-tag-out { position: absolute; left: 0; top: 0; width: max-content; }
.bc-tag-i.bc-tag-in      { animation: bssRollInUp  1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }
.bc-tag-i.bc-tag-out-anim { animation: bssRollOutUp 1.25s cubic-bezier(0.4, 0, 0.1, 1) forwards; }

/* ---- Image tiles: absolutely positioned, slid via per-tile transform ---- */
.bss-imgtrack {
  position: absolute;
  top: 53%;
  left: clamp(190px, 16.7vw, 240px);   /* responsive: a hair left of the ghost
                    number's center, scales with viewport so the active image
                    overlaps the name + number consistently across screens. */
  width: 0;
  height: 0;
  z-index: 2;
}
.bss-tile {
  position: absolute;
  left: 0;
  top: 0;
  width: min(1140px, 52vw);
  height: calc(min(1140px, 52vw) / 1.7757);
  background-size: cover;
  background-position: center;
  overflow: hidden;          /* clip the zoom so it stays within the frame */
  opacity: 0.3;
  transform: translateY(-50%) translateX(0) scale(var(--bss-zoom,1));
  transition: transform 1.25s cubic-bezier(0.4, 0, 0.1, 1),
              opacity 1s cubic-bezier(0.4, 0, 0.1, 1);
  will-change: transform, opacity;
}
/* Zoom layer: a clipped copy of the tile's image that scales on hover.
   Scaling THIS (not the tile box) keeps the zoom inside the frame. */
.bss-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 3s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.bss-tile.is-active { opacity: 1; }
/* No grow-on-hover on the active tile. */
.bss-tile.bss-nojump { transition: none !important; }

/* Optional edge vignette (opt-in via data-vig="1"): a deep left fade to full
   black starting ~27% in, plus a thin fade on the top, bottom and right
   edges. Layered gradients composite so the black regions reinforce. */
.bss-tile--vig::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  --vig-tint: rgba(0,0,0,0);
  background:
    linear-gradient(var(--vig-tint), var(--vig-tint)),
    linear-gradient(to right, #000 0%, rgba(0,0,0,0) 37%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 12%),
    linear-gradient(to top, #000 0%, rgba(0,0,0,0) 12%),
    linear-gradient(to left, #000 0%, rgba(0,0,0,0) 12%);
}
/* Oaklandish-style variant: same vignette + a slight overall darkening. */
.bss-tile--vigdark::after { --vig-tint: rgba(0,0,0,0.28); }

/* ---- Progress ticks ---- */
.bss-ticks {
  display: flex;
  gap: 0.85vw;
  margin-top: 0vw;
}
.bss-tick {
  width: 2.4vw;
  max-width: 34px;
  min-width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.4s ease;
  cursor: pointer;
}
.bss-tick.is-active { background: #d97a4f; }

@media (max-width: 1279px) {
  .bss-stage { padding: 0 0 0 clamp(24px, 10vw, 145px); margin: 64px 0 0; }
  .bss-viewport { height: 440px; }
  .bss-text { width: 42%; }
  .bss-num { font-size: 150px; top: 6%; }
  .bss-title { font-size: clamp(32px, 7vw, 52px); }
  .bss-imgtrack { left: 30%; }
  .bss-tile { width: 360px; height: 203px; }
  /* Pin subcaption + VIEW ALL BRANDS to the bottom of the viewport so they
     sit below the photo instead of overlapping it (mobile only). */
  .bss-foot { position: absolute !important; top: auto !important; bottom: 18px !important; left: 0 !important; margin: 0 !important; }
}

/* Tablet/mobile: keep the city + CTA on the photo's bottom edge. */
@media (max-width: 1279px) { .bss-foot { bottom: 8%; } }
@media (max-width: 767px) { .bss-foot { bottom: 7%; } }

/* ---- MOBILE PORTRAIT ONLY: photo fills the stage width ----
   The viewport itself carries the aspect ratio and the active tile is pinned
   to it (the imgtrack is a 0x0 anchor in the base CSS, so tiles can't be
   sized against it). Foot + ticks stay absolute, placed BELOW the photo. */
@media (max-width: 1279px) {
  /* One shared inset for the tagline AND the whole carousel so they can never
     drift apart, regardless of other .wrap/.hs-inner rules. */
  .brands-carousel .bc-tagline { padding-left: clamp(40px, 10vw, 145px) !important; padding-right: clamp(40px, 10vw, 145px) !important; }
  .bss-stage { padding: 0 0 0 clamp(40px, 10vw, 145px) !important; overflow-x: clip !important; }
  .bss-viewport {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 11 !important;
    /* Clip the PHOTOS (imgtrack), not the viewport — the viewport also holds
       the text/foot overlay, so clipping it hid the foot below the photo. */
    overflow: visible !important;
    margin-bottom: 124px !important;
  }
  .bss-imgtrack {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    overflow: hidden !important;
    transform: none !important;
  }
  .bss-tile {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    opacity: 0 !important;
    margin: 0 !important;
  }
  .bss-tile.is-active { opacity: 1 !important; }
  .bss-text { position: absolute !important; inset: 0 !important; width: 100% !important; }
  .bss-title { font-size: clamp(30px, 9vw, 46px) !important; top: 76% !important; }
  /* Sit just under the photo: the overlay is inset:0 on the viewport, so a
     negative offset past its bottom edge lands in the reserved margin. */
  .bss-foot {
    position: absolute !important;
    top: auto !important;
    bottom: -78px !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Ticks sit past the foot's full extent (foot spans 17–78px below the photo). */
  .bss-ticks { position: absolute !important; top: auto !important; bottom: -106px !important; left: 0 !important; margin: 0 !important; }
}

/* 5 — brand name sits lower on the photo in mobile portrait */
@media (max-width: 1279px) {
  .bss-title { top: auto !important; bottom: 10% !important; transform: none !important; }
}

/* ===== NARROW LAYOUT: single alignment source of truth =====
   The stage's padding box defines the gutter. Every descendant aligns at 0
   against it — no hardcoded lefts (the base CSS puts left:240px on the
   imgtrack), no auto margins, no transforms that shift horizontally. */
@media (max-width: 1279px) {
  .bss-stage .bss-imgtrack {
    position: static !important;
    left: auto !important; right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  .bss-stage .bss-viewport,
  .bss-stage .bss-text {
    left: 0 !important; right: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .bss-stage .bss-tile {
    left: 0 !important; right: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .bss-stage .bss-title,
  .bss-stage .bss-foot,
  .bss-stage .bss-ticks,
  .bss-stage .bss-num-track {
    left: 0 !important; right: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* ===== CAROUSEL GUTTER = PAGE GUTTER, AT EVERY WIDTH =====
   .wrap is { max-width: 1440px; margin: 0 auto; padding: 0 40px }. The stage
   and tagline now use the IDENTICAL box, so their left edge is always the
   page's left edge — no media queries, nothing to fall out of sync. */
.brands-carousel .wrap.bc-tagline,
.brands-carousel .bss-stage {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(40px, 10vw, 145px) !important;
  /* No right gutter — the next photo bleeds off the right edge. */
  padding-right: 0 !important;
}
/* Everything inside aligns at 0 against that padding box. */
.brands-carousel .bss-stage .bss-viewport,
.brands-carousel .bss-stage .bss-text,
.brands-carousel .bss-stage .bss-title,
.brands-carousel .bss-stage .bss-foot,
.brands-carousel .bss-stage .bss-ticks {
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ===== TICKS: take them out of absolute positioning in the narrow layout =====
   As an absolutely-positioned box their containing block wasn't the padded
   stage, so left:0 landed on the section edge instead of the gutter. In normal
   flow they simply start at the stage's padding edge like everything else. */
@media (max-width: 1279px) {
  .brands-carousel .bss-stage .bss-ticks {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 26px 0 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }
}

/* Desktop: gap between the "THEY ARE …" tagline and the top of the photo. Fluid
   so it scales with the tagline type (clamp(44px, 6.4vw, 116px)) instead of
   staying fixed and reading tighter as the screen grows. ~32px at 1440, opening
   to 56px on large monitors. */
@media (min-width: 1280px) {
  .brands-carousel .bss-stage { margin-top: clamp(16px, 2.2vw, 56px); }
}

/* Desktop: the stage viewport was a FIXED 760px tall while the photo scales with
   width (min(1140px, 52vw) / 1.7757). The photo is centred at 53%, so a shorter
   photo on a narrower screen left far more dead space above it — ~192px at
   1440px wide vs ~82px at 2560px, which is why the gap looked bigger on a laptop.
   Tie the viewport height to the photo height (the ratio the capped 1140px photo
   produces: 760/642 = 1.184) so the framing is proportionally identical at every
   desktop width. At 2560+ this evaluates to the original 760px. */
@media (min-width: 1280px) {
  .brands-carousel .bss-viewport { height: calc(min(1140px, 52vw) / 1.7757 * 1.184); }
}