/* Interior Hero -- breadcrumbed page hero with an optional image carousel. */

.interiorhero-block {
  position: relative;
}

/* Where a statbar follows the hero, the hero gives back exactly the strip's
   height so the two together fill one screen -- the four selling points then
   read without scrolling, as they do on the home page (Jon, 2026-08-31).
   Pages with no statbar under the hero keep the taller stage. */
.interiorhero-block:has(+ .statbar-block) .interiorhero-stage {
  min-height: 620px;
  height: calc(100svh - 62px);
}

@media (max-width: 1199px) {
  /* 2x2 statbar */
  .interiorhero-block:has(+ .statbar-block) .interiorhero-stage {
    min-height: 540px;
    height: calc(100svh - 110px);
  }
}

.interiorhero-stage {
  position: relative;
  min-height: 730px;
  height: calc(100svh + 50px);
  overflow: hidden;
  background: var(--bellco-bg);
}

.interiorhero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

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

.interiorhero-scrim {
  position: absolute;
  inset: 0;
  display: block;
}

.interiorhero-scrim--side {
  background: linear-gradient(to right, rgba(8, 14, 24, 0.98) 0%, rgba(8, 14, 24, 0.85) 50%, rgba(8, 14, 24, 0.55) 100%);
}

.interiorhero-scrim--base {
  background: linear-gradient(to top, rgba(8, 14, 24, 1) 0%, rgba(8, 14, 24, 0.4) 30%, transparent 70%);
}

.interiorhero-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bellco-mint);
  z-index: 2;
}

.interiorhero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 160px;   /* clears the fixed header + breadcrumb */
  padding-bottom: 32px;
}

/* ── Breadcrumb ── */

.interiorhero-crumbs {
  position: absolute;
  top: 104px;
  left: 48px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font1);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bellco-muted);
}

.interiorhero-crumbs a {
  color: var(--bellco-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.interiorhero-crumbs a:hover {
  color: #ffffff;
}

.interiorhero-crumb-sep {
  color: rgba(242, 242, 240, 0.2);
}

.interiorhero-crumb-current {
  color: var(--bellco-mint);
}

/* ── Copy ── */

.interiorhero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}

.interiorhero-block--split .interiorhero-grid {
  grid-template-columns: repeat(2, 1fr);
}

.interiorhero-copy {
  max-width: 780px;
}

.interiorhero-eyebrow {
  margin: 0 0 20px;
}

.interiorhero-title {
  font-size: 70px;
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.interiorhero-accent {
  display: block;
  color: var(--bellco-mint);
}

.interiorhero-sub {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(242, 242, 240, 0.6);
  max-width: 520px;
  margin: 0 0 40px;
}

.interiorhero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* ── Carousel ── */

.interiorhero-carousel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.interiorhero-stagearea {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: var(--bellco-bg-card);
}

.interiorhero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.interiorhero-slide.is-active {
  opacity: 1;
}

/* The stage height is deliberate (it sizes the hero), so this box keeps its
   fixed height and only the crop's anchor moves. Portrait sources lose ~54%
   here; spending that on the floor rather than the machine head is free. */
.interiorhero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.interiorhero-frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(139, 217, 186, 0.2);
  pointer-events: none;
}

.interiorhero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(8, 14, 24, 0.75);
  border: 1px solid rgba(139, 217, 186, 0.3);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.interiorhero-nav:hover {
  background: rgba(8, 14, 24, 0.95);
  border-color: var(--bellco-mint);
}

.interiorhero-nav--prev {
  left: 12px;
}

.interiorhero-nav--prev .bellco-icon {
  transform: rotate(180deg);
}

.interiorhero-nav--next {
  right: 12px;
}

.interiorhero-count {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font1);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(242, 242, 240, 0.7);
  background: rgba(8, 14, 24, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
}

/* ── Video panel ──
   Replaces the carousel when "What Sits Beside the Copy" is Video. It reuses
   .interiorhero-frame so the mint border reads identically either way.

   The hero's height is viewport-driven (min-height + 100svh on .interiorhero-stage),
   not driven by this panel, so the video is free to take its own 16/9 shape
   instead of being cropped into the carousel's 460px box. max-height is the
   footprint the carousel occupied -- stage 460 + 6 gap + 58 thumbs -- so a very
   wide column can never make the panel taller than what it replaced.

   object-fit is contain, not cover: these are videos a producer framed, and a
   16/9 file in a 16/9 box is identical either way, while anything else is
   letterboxed against the card colour rather than silently cropped. */

.interiorhero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 524px;
  overflow: hidden;
  background: var(--bellco-bg-card);
}

.interiorhero-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The whole still is the hit area -- a 72px circle is a small target on a
   touch screen, and there is nothing else in the panel to click. */
.interiorhero-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  background: rgba(8, 14, 24, 0.22);
  border: 0;
  cursor: pointer;
  transition: background 0.25s ease;
}

.interiorhero-play:hover,
.interiorhero-play:focus-visible {
  background: rgba(8, 14, 24, 0.06);
}

.interiorhero-play:focus-visible {
  outline: 2px solid var(--bellco-mint);
  outline-offset: -4px;
}

.interiorhero-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding-left: 4px; /* optical centring: a triangle's mass sits left of centre */
  border-radius: 50%;
  background: var(--bellco-mint);
  color: var(--bellco-on-mint);
  transition: transform 0.25s ease;
}

.interiorhero-play:hover .interiorhero-play-icon,
.interiorhero-play:focus-visible .interiorhero-play-icon {
  transform: scale(1.08);
}

/* Ambient controls. Hidden until script.js confirms the loop is actually
   running, so a visitor who gets the poster instead never sees dead buttons.
   Bottom-right keeps them off the machine in every one of the three clips and
   out of the way of the native controls if the visitor asks for sound. */
.interiorhero-vidctl {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: none;
  gap: 8px;
}

.interiorhero-video.is-ambient .interiorhero-vidctl {
  display: flex;
}

.interiorhero-vidbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #fff;
  background: rgba(8, 14, 24, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.interiorhero-vidbtn:hover,
.interiorhero-vidbtn:focus-visible {
  color: var(--bellco-on-mint);
  background: var(--bellco-mint);
  border-color: var(--bellco-mint);
}

.interiorhero-vidbtn:focus-visible {
  outline: 2px solid var(--bellco-mint);
  outline-offset: 2px;
}

.interiorhero-vidbtn .is-hidden {
  display: none;
}

/* Once it is playing the native controls are the interface, so the overlay
   has to be gone -- not just transparent, or it would eat the clicks. */
.interiorhero-video.is-playing .interiorhero-play {
  display: none;
}

.interiorhero-video.is-playing .interiorhero-frame {
  display: none;
}

.interiorhero-thumbs {
  display: flex;
  gap: 2px;
  height: 58px;
}

.interiorhero-thumb {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.2s;
}

.interiorhero-thumb.is-active {
  border-color: var(--bellco-mint);
}

/* A 56px-tall nav thumbnail is decorative -- it only has to be *recognisable*
   as the slide it selects, so it keeps its strip height. Matching the slide's
   anchor means the thumb is a small copy of the slide, not a different crop. */
.interiorhero-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0.45;
  transition: opacity 0.3s;
}

.interiorhero-thumb.is-active .interiorhero-thumb-img {
  opacity: 1;
}

.interiorhero-thumb.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bellco-mint);
}

/*
 * The follow-up thank-you hero is a receipt, not a stage.
 *
 * `height: calc(100svh + 50px)` is right for an interior page whose hero IS
 * the content. It is wrong for a page that exists to put step 2 in front of
 * somebody: at 1920x1080 it measured 1130px, which pushed the follow-up
 * form's first field 233px below the fold. The visitor had to scroll to
 * discover there was anything to fill in -- on the one page where filling it
 * in is the entire point.
 *
 * Everything above the fold now: the confirmation, the "Optional" framing, and
 * the form with its first fields. Higher specificity than the responsive
 * overrides below, so it holds at every width without repeating itself in each.
 */
.bellco-followup-thankyou .interiorhero-stage {
  min-height: 0;
  height: auto;
  padding-bottom: 0;
}

.bellco-followup-thankyou .interiorhero-inner {
  justify-content: flex-start;
  padding-top: 148px;   /* still clears the fixed header + breadcrumb */
  padding-bottom: 48px;
}

@media (max-width: 767px) {
  .bellco-followup-thankyou .interiorhero-inner {
    padding-top: 124px;
    padding-bottom: 36px;
  }
}

@media (max-width: 1199px) {
  .interiorhero-stage {
    min-height: 620px;
    height: auto;
    padding-bottom: 64px;
  }

  .interiorhero-inner {
    padding-top: 152px;
  }

  .interiorhero-crumbs {
    left: 24px;
    right: 24px;
    top: 104px;
  }

  .interiorhero-block--split .interiorhero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .interiorhero-title {
    font-size: 52px;
  }

  .interiorhero-sub {
    font-size: 17px;
  }

  .interiorhero-stagearea {
    height: 360px;
  }
}

@media (max-width: 767px) {
  .interiorhero-stage {
    min-height: 540px;
  }

  .interiorhero-inner {
    padding-top: 132px;
  }

  .interiorhero-crumbs {
    top: 92px;
    font-size: var(--bellco-micro);
  }

  .interiorhero-title {
    font-size: 36px;
  }

  .interiorhero-sub {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .interiorhero-actions .btn {
    width: 100%;
  }

  .interiorhero-stagearea {
    height: 240px;
  }

  .interiorhero-thumbs {
    height: 44px;
  }
}

/* ==========================================================================
   Hero vertical alignment below 992  [hero-safe-center]

   .interiorhero-inner is a centred flex column whose padding-top is sized to clear the
   fixed header. Plain `center` overflows BOTH edges once the content is
   taller than the box, so on the five product pages with long hero copy the
   <h1> was being pushed up behind the header -- measured at -47px on
   /step-feeders/, -11px on /vibratory-bowl-feeders/, at 390-991px.

   `safe center` degrades to flex-start only in that overflow case, so heroes
   that already fit are untouched. Deliberately NOT applied at 1200+: there
   reproduced. Note this does NOT fix the separate, pre-existing problem that
   the hero content can be taller than the stage on a short viewport -- there
   the overflow simply moves from the top (H1 hidden behind the fixed header)
   to the bottom (CTA touching the stat bar), which is the better failure.
   The real fix for that is letting the stage grow; it needs a design call.
   ========================================================================== */
@media (max-width: 1399px) {
  .interiorhero-inner {
    justify-content: safe center;
  }
}

@media (max-width: 767px) {
  .interiorhero-play-icon {
    width: 56px;
    height: 56px;
  }
}