/* Scene strip – a low, full-width photo with one claim. Never a whole screen, never right after the hero.
   .scene          the strip; height from --scene-h (default 52vh, capped)
   .scene__photo   the photo, covers the strip; --focus keeps the unit in view
   .scene__text    bottom left: eyebrow, claim, one line of facts */

.scene {
  --scene-h: clamp(360px, 52vh, 560px);
  --focus: 30% 60%;
  position: relative;
  display: grid;
  align-content: end;
  height: var(--scene-h);
  overflow: hidden;
  background: #0c0e10;
  color: #f6f7f9;
  isolation: isolate;
}

.scene__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(8deg, rgb(10 12 15 / 0.72) 0%, rgb(10 12 15 / 0.3) 40%, transparent 65%);
}

.scene__text {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--gutter) var(--space-7);
  max-width: 40rem;
}

.scene__eyebrow {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: rgb(246 247 249 / 0.72);
}

.scene__claim {
  margin: 0;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.scene__line {
  margin: 0;
  font-size: var(--text-lead);
  color: rgb(246 247 249 / 0.82);
}

@media (max-width: 760px) {
  .scene {
    --scene-h: clamp(320px, 56vh, 480px);
    --focus: 18% 60%;
  }

  /* The text sits over the sofa on phones: a stronger foot gradient keeps it readable */
  .scene::after {
    background: linear-gradient(180deg, transparent 30%, rgb(10 12 15 / 0.55) 60%, rgb(10 12 15 / 0.86) 100%);
  }

  .scene__text {
    padding-bottom: var(--space-4);
  }

  .scene__line {
    font-size: var(--text-body);
  }
}