/* HardBoxIran v3.16.0 — Section 05: compact scroll-controlled production story */
.hbi-scroll-story{
  height:380vh;
}
.hbi-scroll-story__sticky{
  height:100svh;
  min-height:620px;
}
.hbi-scroll-story__grid{
  width:min(1240px,92vw);
  grid-template-columns:minmax(300px,.78fr) minmax(520px,1.35fr);
  gap:clamp(28px,4.4vw,60px);
}
.hbi-scroll-story__copy{padding:22px 0}
.hbi-scroll-story__eyebrow{font-size:12px;letter-spacing:.01em}
.hbi-scroll-story h2{
  margin:12px 0 10px;
  max-width:540px;
  font-size:clamp(32px,4vw,58px);
  line-height:1.14;
  letter-spacing:-1.2px;
}
.hbi-scroll-story__lead{
  max-width:500px;
  font-size:clamp(13px,1vw,15px);
  line-height:1.9;
}
.hbi-scroll-story__stage-card{
  min-height:92px;
  margin-top:17px;
  padding:13px 15px;
  border-radius:6px;
  border-right-width:2px;
  background:rgba(255,255,255,.035);
  backdrop-filter:none;
}
.hbi-scroll-story__stage-label{font-size:16px}
.hbi-scroll-story__stage-description{font-size:11px;line-height:1.75}
.hbi-scroll-story__progress{margin-top:14px}
.hbi-scroll-story__steps{grid-template-columns:repeat(7,minmax(0,1fr));margin-top:9px}
.hbi-scroll-story__steps span{padding:6px 3px;border-radius:5px}
.hbi-scroll-story__cta{margin-top:15px;min-height:42px;padding:9px 15px;border-radius:5px}
.hbi-line{height:min(545px,72vh)}
.hbi-approved-stages{
  inset:18px 0 28px;
  border-radius:12px;
  box-shadow:0 24px 58px rgba(0,0,0,.56);
}
.hbi-approved-stage figcaption{
  left:14px;
  bottom:14px;
  padding:6px 9px;
  border-radius:4px;
  background:rgba(7,8,8,.82);
  backdrop-filter:none;
  font-size:10px;
}
.hbi-scroll-story__scrollhint{bottom:11px}

/* Keep stage imagery dominant; no expensive decorative blur on the visual. */
.hbi-approved-stage img{will-change:transform;backface-visibility:hidden}
.hbi-approved-stage{will-change:opacity}

@media (max-width:900px){
  .hbi-scroll-story{height:280vh}
  .hbi-scroll-story__sticky{height:100svh;min-height:590px}
  .hbi-scroll-story__grid{
    width:min(100% - 24px,720px);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(220px,1fr);
    align-items:stretch;
    padding:36px 0 24px;
  }
  .hbi-scroll-story__copy{
    position:relative;
    z-index:4;
    padding:0 4px;
    text-align:right;
  }
  .hbi-scroll-story__eyebrow{justify-content:flex-start;font-size:10px}
  .hbi-scroll-story__eyebrow:before{width:22px}
  .hbi-scroll-story h2{
    max-width:none;
    margin:6px 0;
    font-size:clamp(24px,7vw,31px);
    line-height:1.22;
    letter-spacing:-.6px;
  }
  .hbi-scroll-story h2 br{display:none}
  .hbi-scroll-story__lead{
    margin:0;
    max-width:none;
    font-size:11px;
    line-height:1.65;
    text-align:right;
  }
  .hbi-scroll-story__stage-card{
    min-height:66px;
    margin-top:8px;
    padding:8px 10px;
    text-align:right;
  }
  .hbi-scroll-story__stage-label{font-size:13px}
  .hbi-scroll-story__stage-description{
    margin-top:3px;
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    font-size:9px;
    line-height:1.55;
  }
  .hbi-scroll-story__progress{margin:8px 0 0;width:100%;height:2px}
  .hbi-scroll-story__steps{margin-top:5px;gap:4px}
  .hbi-scroll-story__steps span{
    min-width:0;
    padding:4px 2px;
    border-radius:4px;
    font-size:7px;
    white-space:nowrap;
  }
  .hbi-scroll-story__cta{
    min-height:34px;
    margin-top:7px;
    padding:6px 10px;
    font-size:10px;
  }
  .hbi-line{
    align-self:stretch;
    width:100%;
    height:auto;
    min-height:230px;
    margin:0;
    transform:none;
  }
  .hbi-approved-stages{inset:9px 0 18px;border-radius:10px}
  .hbi-approved-stage img{
    width:100%;
    height:100%;
    margin:0;
    object-fit:cover;
  }
  .hbi-approved-stage figcaption{left:9px;bottom:9px;padding:4px 7px;font-size:8px}
  .hbi-scroll-story__scrollhint{bottom:7px;font-size:8px}
  .hbi-scroll-story__scrollhint:before{height:18px}
}

@media (max-width:430px){
  .hbi-scroll-story{height:250vh}
  .hbi-scroll-story__sticky{min-height:560px}
  .hbi-scroll-story__grid{width:calc(100% - 20px);padding-top:30px;grid-template-rows:auto minmax(205px,1fr)}
  .hbi-scroll-story__eyebrow{display:none}
  .hbi-scroll-story h2{font-size:23px;margin-top:0}
  .hbi-scroll-story__lead{display:block;font-size:9.5px;line-height:1.55}
  .hbi-scroll-story__stage-card{min-height:60px}
  .hbi-scroll-story__steps span{font-size:7px}
  .hbi-approved-stages{inset:7px 0 16px}
  .hbi-approved-stage img{object-fit:cover;background:#111}
}

@media (max-height:700px) and (max-width:900px){
  .hbi-scroll-story__grid{padding-top:22px;grid-template-rows:auto minmax(180px,1fr)}
  .hbi-scroll-story h2{font-size:22px}
  .hbi-scroll-story__lead{display:none}
  .hbi-scroll-story__stage-card{min-height:54px}
  .hbi-scroll-story__stage-description{-webkit-line-clamp:1}
  .hbi-scroll-story__cta{margin-top:5px}
}

@media (prefers-reduced-motion:reduce){
  .hbi-scroll-story{height:auto}
  .hbi-scroll-story__sticky{position:relative;height:auto;min-height:0;padding:40px 0}
  .hbi-scroll-story__grid{min-height:620px}
  .hbi-approved-stage{will-change:auto}
  .hbi-approved-stage img{will-change:auto}
}
/* v3.22 production video support */
.hbi-approved-stage video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#0c0c0c;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hbi-approved-stage video{display:none}}