/* =============================================================
   HZL Microsite — Business Excellence Drivers
   Story-scroll: 4 rotating card slides.
   Each card enters with 30° rotation (bottom-left origin) → 0°.
   Previous card pins; new card sweeps on top.
   Managed by GSAP ScrollTrigger in business-excellence.js.
   ============================================================= */

/* ── Outer wrapper ────────────────────────────────────────────── */
.bed-flow {
  position: relative;
}

/* ── Each slide: one full-screen card ────────────────────────── */
.bed-flow__slide {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;       /* clips the rotated inner during entry */
}

/* ── Inner: the element GSAP rotates ─────────────────────────── */
.bed-flow__inner {
  position: relative;
  min-height: 100svh;
  width: 100%;
  background: #030210;    /* fallback while image loads */
  transform-origin: bottom left;
  will-change: transform;
  overflow: hidden;
}

/* ── Background image ─────────────────────────────────────────── */
.bed-flow__inner > picture {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

.bed-flow__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

/* ── Gradient scrim ───────────────────────────────────────────── */
.bed-flow__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(3, 2, 16, 0.55)  0%,
      rgba(3, 2, 16, 0.10) 30%,
      rgba(3, 2, 16, 0.08) 55%,
      rgba(3, 2, 16, 0.82) 72%,
      rgba(3, 2, 16, 0.96) 100%
    );
}

/* ── Dark patch behind text (left-side vignette) ─────────────── */
.bed-flow__foot {
  position: relative;
}
.bed-flow__foot::before {
  content: '';
  position: absolute;
  inset: -3rem -3rem -2rem -4rem;
  background: radial-gradient(ellipse 90% 100% at 20% 80%, rgba(0,0,0,0.68) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  border-radius: 4px;
}

/* ── Content block (above bg + scrim) ────────────────────────── */
.bed-flow__content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--utility-h, 0px) + var(--bar-h, 88px) + 0.6rem)
    clamp(2rem, 6vw, 6rem)
    calc(var(--arc-nav-h, 88px) + clamp(2rem, 4vw, 3.5rem));
  color: #fff;
}

/* ── Top: label + rule ────────────────────────────────────────── */
.bed-flow__top {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.bed-flow__label {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9ed15a;
  margin: 4.5rem 0 -0.75rem;
}

.bed-flow__hr {
  display: block;
  height: 1px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Middle: huge title (flex-grows to fill space) ───────────── */
.bed-flow__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vh, 3.5rem) 0;
}

.bed-flow__title {
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.90;
  color: rgba(238, 242, 246, 0.97);
  margin: 0;
}

/* ── Bottom: HR + subtitle + CTA ─────────────────────────────── */
.bed-flow__foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bed-flow__sub {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.55vw, 20px);
  font-weight: 400;
  color: rgba(238, 242, 246, 0.90);
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 520px;
}

.bed-flow__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.68em 1.55em;
  border-radius: 999px;
  border: 1.5px solid rgba(127, 185, 66, 0.55);
  background: rgba(127, 185, 66, 0.08);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #7fb942;
  text-decoration: none;
  width: fit-content;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}

.bed-flow__cta:hover {
  background: rgba(127, 185, 66, 0.18);
  border-color: #7fb942;
  color: #fff;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bed-flow__content {
    padding:
      calc(var(--utility-h, 0px) + var(--bar-h, 56px) + 1.5rem)
      1.5rem
      calc(var(--arc-nav-h, 72px) + 2rem);
  }

  .bed-flow__title {
    font-size: 35px;
  }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bed-flow__inner {
    transform: none !important;
    will-change: auto;
  }
}