.hero .wrap{min-height:calc(100vh - 92px);min-height:calc(100svh - 92px);display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}
.hero h1{padding-top:0}
.hero h1,.hero .wrap>p:not(.scroll-cue){animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap>p:not(.scroll-cue){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}}
.hero .scroll-cue{color:var(--wood);font-weight:700;margin-top:44px;animation:nudge 1.7s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(8px)}}

.build{height:600vh;background:var(--char)}
.build-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#dfe9ea;display:flex;align-items:center}
#bsvg{width:100%;height:100%;max-height:100%;overflow:visible;display:block}
.stage-card{position:absolute;left:clamp(16px,3vw,40px);top:clamp(16px,3vw,36px);width:min(390px,calc(100% - 32px));background:rgba(255,255,255,.95);padding:16px 20px;color:var(--char)}
.stage-no{font-size:13px;font-weight:700;color:var(--wood2);letter-spacing:.1em}
.stage-card h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 2px}
.stage-card p:last-of-type{font-size:14px;line-height:1.7;min-height:3.4em}
.stage-bar{height:4px;background:#e4e0d5;margin-top:10px}
.stage-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:var(--wood2)}

.works figure{transition:transform .25s ease-out,box-shadow .25s;will-change:transform}
.works figure:hover{box-shadow:0 24px 44px rgba(0,0,0,.34)}

.sim{background:#e7e3d8}
.sim-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px}
.sim-stage{background:linear-gradient(#cfe0e4,#eef3ec 72%);position:relative;overflow:hidden}
#simsvg{display:block;width:100%;height:auto}
.sim-price{position:absolute;left:18px;top:14px;line-height:1.3}
.sim-price span{display:block;font-size:13px;font-weight:700}
.sim-price strong{font-size:clamp(34px,4.6vw,54px);font-weight:900}
.sim-price strong b{font-weight:900;font-variant-numeric:tabular-nums}
.sim-price small{display:block;font-size:13px;color:#40443b}
.sim-ctrl{background:#fff;padding:24px 22px}
.sim-ctrl>label{display:flex;justify-content:space-between;font-weight:700;margin-bottom:4px}
.sim-ctrl output{font-weight:900;font-size:22px;color:var(--wood2);line-height:1.2}
input[type=range]{padding:0;border:0;accent-color:var(--wood2);height:32px;cursor:pointer}
fieldset{border:0;padding:0;margin:14px 0 0}
legend{font-weight:700;padding:0;margin-bottom:6px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg label{margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg span{display:block;text-align:center;padding:10px 4px;border:1px solid #b9b5a8;font-size:15px;transition:background .15s,color .15s}
.seg input:checked+span{background:var(--char);color:var(--bone);border-color:var(--char)}
.seg input:focus-visible+span{outline:3px solid var(--wood);outline-offset:2px}
.sim-ctrl .btn{margin-top:20px}
.sim-note{font-size:12.5px;color:var(--sub);margin-top:10px;line-height:1.6}

.up{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.up.in{opacity:1;transform:none}

@media (max-width:760px){
  .sim-grid{grid-template-columns:1fr}
  .stage-card{padding:12px 14px}
  .stage-card p:last-of-type{min-height:5em}
}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .wrap>p{animation:none!important}
  .build{height:auto}
  .build-pin{position:relative;height:70vh}
  .up{opacity:1;transform:none;transition:none}
}