/* ==========================================================
   Lozy · Rent family — additions on the CBW design system
   (cbw.css carries all tokens/components; these are the few
   rent-specific pieces: the AEO answer block, the hero tag,
   and a 4-column stats grid.)
   ========================================================== */

/* ---------- short-answer block (the AEO lever) ---------- */
.cbw .answer{background:var(--paper)}
.cbw .answer__box{max-width:1080px;padding:clamp(32px,4vw,64px);border:1px solid var(--line);border-radius:24px;background:var(--canvas)}
.cbw .answer__q{font:800 clamp(24px,3vw,44px)/1.06 var(--fd);letter-spacing:-.04em;margin-top:8px;max-width:24ch}
.cbw .answer__a{margin-top:20px;max-width:76ch;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--graphite)}

/* ---------- global screen-reader-only (h1 lives outside .cbw) ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- hero scrolling story ---------- */
.cbw .hero-story{padding:0;overflow:visible;background:#0b0b0b;height:260vh}
.cbw .hs__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cbw .hs__media{position:absolute;inset:0}
.cbw .hs__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.cbw .hs__img.is-on{opacity:1;transform:scale(1)}
.cbw .hs__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.6) 46%,rgba(5,5,5,.24) 100%)}
.cbw .hs__wrap{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hh,0px) + 12px);padding-bottom:74px}
.cbw .hero-story .crumbs{color:rgba(255,255,255,.62)}
.cbw .hero-story .crumbs li+li::before{color:rgba(255,255,255,.34)}
.cbw .hero-story .crumbs a,.cbw .hero-story .crumbs [aria-current]{color:rgba(255,255,255,.92)}
.cbw .hero-story .hero__kicker{color:#fff}
.cbw .hero-story .display{color:#fff}
.cbw .hero-story .hero__sub{color:rgba(255,255,255,.8);max-width:52ch}
.cbw .hero-story .hero__meta{color:rgba(255,255,255,.64)}
.cbw .hero-story .hero__meta a{color:#fff}
.cbw .hero-story .btn--ghost{border-color:rgba(255,255,255,.42);color:#fff}
.cbw .hero-story .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.cbw .hs__stage{position:absolute;left:var(--px);right:var(--px);bottom:26px;z-index:3;display:flex;align-items:center;gap:18px;color:#fff}
.cbw .hs__stage-num{font:800 clamp(24px,2.6vw,36px)/1 var(--fd);color:var(--accent);font-variant-numeric:tabular-nums}
.cbw .hs__stage-label{font:700 clamp(14px,1.4vw,18px)/1 var(--fm);letter-spacing:.05em;text-transform:uppercase}
.cbw .hs__progress{flex:1;height:2px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.cbw .hs__progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.cbw .hs__stage-count{font:500 12px/1 var(--fm);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
html:not(.cbw-js) .cbw .hero-story{height:auto}
html:not(.cbw-js) .cbw .hs__pin{position:relative;height:88vh}
@media (max-width:640px){
  .cbw .hero-story .hero__sub{color:rgba(255,255,255,.86)}
  .cbw .hs__scrim{background:linear-gradient(200deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.72) 55%,rgba(5,5,5,.4) 100%)}
  .cbw .hs__stage{gap:12px;bottom:18px}
  .cbw .hs__stage-label{font-size:12px;letter-spacing:.03em}
}

/* ---------- 4-column stats (CBW ships a 3-col + 2-col variant) ---------- */
.cbw .stats__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){ .cbw .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cbw .stat:nth-child(3){border-left:0} }
@media (max-width:767px){ .cbw .stats__grid{grid-template-columns:1fr} .cbw .stat:nth-child(n){border-left:0} }

/* ---------- story board: leased cell + station dots ---------- */
.cbw .st-cell{transition:fill .4s var(--ease)}

/* ---------- city blocks (one city per keyword) ---------- */
.cbw .city-block{padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--line)}
.cbw .city-block__h{font:800 clamp(26px,2.8vw,40px)/1.05 var(--fd);letter-spacing:-.035em}
.cbw .city-block__p{max-width:74ch;margin-top:14px;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--graphite)}
.cbw .city-block .gw__tiles{margin-top:22px}
.cbw .city-block:first-of-type{border-top:0}

/* ---------- story: photo crossfade stage ---------- */
.cbw .story__photo{position:absolute;inset:0}
.cbw .story__photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.cbw .story__photo-img.is-on{opacity:1}

/* ---------- band: warehouse-unit scroll scene ---------- */
.cbw .unit{margin:clamp(48px,6vw,88px) auto clamp(40px,5vw,72px);max-width:1060px}
.cbw .unit__svg{display:block;width:100%;height:auto}
.cbw .unit__svg text{font-family:var(--fm)}

/* ---------- cinematic transition: empty → running ---------- */
.rent-sky{position:relative;height:240vh;background:#E8E6DF}
.rent-sky__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint}
.rent-sky__bg{position:absolute;inset:0;background:radial-gradient(90% 72% at 50% 0%,#F4F2EC 0%,#E8E6DF 55%,#DCD9D1 100%)}
.rent-sky__empty,.rent-sky__run{position:absolute;bottom:11vh;width:min(52vw,740px);will-change:transform,opacity}
.rent-sky__empty{left:var(--px);transform:rotate(-4deg)}
.rent-sky__run{right:var(--px);transform:rotate(4deg);opacity:0}
.rent-sky__empty img,.rent-sky__run img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;border:1px solid rgba(14,14,14,.12);box-shadow:0 30px 60px rgba(0,0,0,.14)}
.rent-sky__cap{position:absolute;top:18vh;z-index:4;color:var(--ink)}
.rent-sky__cap--a{left:var(--px)}
.rent-sky__cap--b{right:var(--px);text-align:right;opacity:0}
.rent-sky__cap .mono{display:block;margin-bottom:12px;color:var(--muted)}
.rent-sky__big{display:block;font:800 clamp(52px,9vw,148px)/.9 var(--fd);letter-spacing:-.05em}
.rent-sky__white{position:absolute;inset:0;z-index:5;background:var(--paper);opacity:0;pointer-events:none}
html:not(.cbw-js) .rent-sky{height:auto}
html:not(.cbw-js) .rent-sky__pin{position:relative;height:72vh}
html:not(.cbw-js) .rent-sky__run,html:not(.cbw-js) .rent-sky__cap--b,html:not(.cbw-js) .rent-sky__white{display:none}