/* components part 13 of 16 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

/* Side by side, the frames share one shape so a row lines up: renders fill it (cover),
   floor plans sit whole on white (contain). Full-width images keep their own shape. */
.cs-two img,.cs-pair img,.cs-grid img{aspect-ratio:4/3;object-fit:cover}
.cs-figs .cs-plan img,.cs-grid .cs-plan img{object-fit:contain;background:#fff;border:1px solid var(--hair)}
.cs-figs figcaption{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:9px;max-width:70ch}
.cs-pair figcaption b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.cs-story~section .sec-head{margin-bottom:clamp(28px,3.4vw,46px)}
/* Named projects by year: the shared .timeline kept inside the column, as a 4-across grid of years. */
.timeline.cs-tl{width:auto;margin-left:0;row-gap:30px;column-gap:24px}
.cs-tl .step{border-top:1px solid var(--hair);padding-top:14px}
.cs-tl .step .step-body{padding:0;margin:0;max-width:none}
.cs-tl .step p{font-size:15.5px;line-height:1.5}
.cs-next .svc-img{aspect-ratio:16/9}@media(max-width:900px){
  .cs-hero{min-height:clamp(400px,68vh,560px)}
  .cs-hero h1{font-size:clamp(36px,10vw,52px)}
  .cs-labels li{font-size:12px;padding:8px 12px}
  .cs-q{font-size:21px}
  .cs-body{display:flex;flex-direction:column;gap:0}
  .cs-side,.cs-prof{display:contents}
  .cs-card{order:1;gap:12px}
  .cs-logo{height:22px;margin-bottom:8px}
  .cs-card .rev-by{padding-top:12px}
  .cs-since{padding-top:12px}
  .cs-details{order:2;margin-top:16px}
  .cs-details summary{padding:12px 0;border-top:1px solid var(--hair);font-size:12px;color:var(--ink)}
  .cs-toc{order:3;position:sticky;top:var(--head-h);z-index:40;flex-direction:row;gap:8px;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(-1*var(--gut));padding:10px var(--gut);background:var(--white);border-bottom:1px solid var(--hair)}
  .cs-toc::-webkit-scrollbar{display:none}
  .cs-toc a{flex:0 0 auto;white-space:nowrap;gap:7px;padding:9px 14px;font-size:13.5px;border:1px solid var(--hair);border-radius:999px;background:var(--white)}
  .cs-prof>.btn{display:none}
  .cs-main{order:4;margin-top:34px}
  .cs-ch{scroll-margin-top:calc(var(--head-h) + 70px)}
  .cs-two,.cs-pair{grid-template-columns:minmax(0,1fr)}
  .cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rev-by{display:flex;align-items:center;gap:12px}
.rev-by img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px}
.rev-by b{display:block;font-size:15px;color:var(--ink)}
.rev-by span{display:block;font-size:13.5px;color:var(--muted)}
/* 360 HERO (.hero-pano, /services/virtual-tours/): the hero image is a flat still rendered
   from the panorama at its opening angle; the turning projection fades in over it once the
   page has loaded (the .svc-pano script), and a click opens the full viewer. */
.hero-pano{position:relative;height:100%;cursor:pointer}
.hero-pano .svc-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease;z-index:1;pointer-events:none}
.hero-pano .svc-canvas.on{opacity:1}
.hero-pano .svc-badge.hero-360{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;background:rgba(15,15,14,.72);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
/* BEFORE/AFTER HERO (.svc-split.hero-split, /services/virtual-staging/): the card slider at
   hero size. The images are absolutely placed by .svc-split, so the box sets the height. */
.hero-media .hero-split{position:relative;width:100%;height:100%;min-height:clamp(420px,40vw,620px);overflow:hidden}
.hero-split img.hero-img{min-height:0;height:100%}
.hero-split .ba-knob{width:48px;height:48px}
.hero-split .slab{font-size:11px}@media(max-width:1040px){.hero-media .hero-split{height:auto;min-height:0;aspect-ratio:16/10}}@media(max-width:700px){.hero-media .hero-split{aspect-ratio:2/1}}
/* LIGHT CYCLE HERO (.hero-cycle, /tools/ai-render/, 4 Nov 2026): one render relit in the app, crossfading evening sun,
   blue hour and night. Same box as .hero-split. The frames stack; .on is visible. The chip names the light, like the
   app's look picker. The slow push-in only runs once the cycle starts, and never with reduced motion. */
.hero-media .hero-cycle{position:relative;width:100%;height:100%;min-height:clamp(420px,40vw,620px);overflow:hidden;background:#1c1815}
.hero-cycle .hc-f.hero-img{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.hero-cycle .hc-f.hero-img.on{opacity:1}
.hero-cycle.hc-run .hc-f{animation:hcPush 26s ease-in-out infinite alternate}@keyframes hcPush{from{transform:scale(1)}to{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.hero-cycle.hc-run .hc-f{animation:none}}
.hc-chip{position:absolute;left:16px;bottom:16px;z-index:2;margin:0;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;
  border-radius:999px;background:rgba(20,19,16,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.hc-chip i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.hc-chip span{display:none}
.hc-chip span.on{display:inline}@media(max-width:1040px){.hero-media .hero-cycle{height:auto;min-height:0;aspect-ratio:3/2}}
.hc-inset{position:absolute;right:16px;bottom:16px;z-index:2;margin:0;width:clamp(120px,26%,190px);border-radius:10px;overflow:hidden;
  border:3px solid #fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);background:#fff}
.hc-inset img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hc-inset figcaption{position:absolute;left:6px;top:6px;padding:4px 8px;border-radius:999px;background:rgba(20,19,16,.7);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1}@media(max-width:600px){.hc-inset{width:30%;border-width:2px}}
/* LIVE DEMO HERO (.hero-stage, /tools/ai-render/, 5 Nov 2026): model > render > lights > video in one box, on the .svc-split
   slider. Chips and tabs copy the app's look picker. The cursor only shows during the autoplay. */
.hero-media .hero-stage{height:100%;min-height:clamp(460px,42vw,660px);aspect-ratio:auto;background:#1c1815}
.hero-stage img.hs-i{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity .9s ease}
.hero-stage img.hs-i.on{opacity:1}
.hero-stage .hs-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.hero-stage .hs-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.hero-stage.hs-vid .hs-v{opacity:1}
.hero-stage.hs-vid .sdiv,.hero-stage.hs-vid .ba-knob,.hero-stage.hs-vid .slab.l{opacity:0}
.hero-stage .sdiv,.hero-stage .ba-knob,.hero-stage .slab{transition:opacity .3s}
.hero-stage .slab{top:14px;bottom:auto;font-size:11px}
.hero-stage .slab.l{left:14px}.hero-stage .slab.r{right:14px}
.hs-bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;display:flex;flex-direction:column;gap:7px;padding:9px;border-radius:14px;background:rgba(20,19,16,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hs-tabs,.hs-row{display:flex;flex-wrap:wrap;gap:6px}
.hs-row{display:none}.hs-row.on{display:flex}
.hs-t,.hs-c{appearance:none;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;border-radius:999px;padding:6px 12px;font:600 12.5px/1.1 inherit;font-family:inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hs-t{font-weight:700}
.hs-t:hover,.hs-c:hover{border-color:#fff}
.hs-t.on,.hs-c.on{background:#fff;color:var(--ink);border-color:#fff}
.hs-t:focus-visible,.hs-c:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hs-cur{position:absolute;left:0;top:0;z-index:7;width:26px;height:26px;margin:-2px 0 0 -2px;fill:#fff;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;pointer-events:none;opacity:0;transition:transform .75s cubic-bezier(.5,.1,.2,1),opacity .3s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.hero-stage.hs-cur-on .hs-cur{opacity:1}
.hs-cur.hit{scale:.82}
.hs-pin{position:absolute;left:44%;top:24%;z-index:5;margin:0;max-width:220px;display:flex;align-items:flex-start;gap:8px;padding:9px 12px 9px 9px;border-radius:4px 14px 14px 14px;background:#fff;color:var(--ink);font-size:13px;line-height:1.35;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;pointer-events:none}
.hs-pin.on{opacity:1;transform:none}
.hs-pin i{flex:none;padding:3px 7px;border-radius:999px;background:var(--ink);color:#fff;font-style:normal;font-size:10.5px;font-weight:700}@media(max-width:1040px){.hero-media .hero-stage{height:auto;min-height:0;aspect-ratio:4/3}}@media(max-width:600px){.hs-bar{position:static;margin:0;border-radius:0;background:#1c1815}.hero-media .hero-stage{aspect-ratio:auto;display:block;overflow:hidden}.hero-stage::before{content:"";display:block;aspect-ratio:3/2}.hero-stage>img.hs-i,.hero-stage .hs-after,.hero-stage .ba-range{bottom:auto;height:auto;aspect-ratio:3/2}.hs-t,.hs-c{padding:6px 10px;font-size:12px}.hs-pin{left:30%;top:14%;max-width:180px;font-size:12px}.hero-stage .sdiv{bottom:auto;height:calc(100vw/1.5)}.hero-stage .ba-knob{top:calc(100vw/3)}}
.ws-mono{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#77736a;color:#fff;font-style:normal;font:700 14px/1 var(--disp)}
.hs-user{position:absolute;z-index:4;display:flex;align-items:flex-start;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.hs-user svg{width:22px;height:22px;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.hs-user span{margin:14px 0 0 -3px;padding:3px 9px;border-radius:999px;color:#fff;font-size:11.5px;font-weight:700;line-height:1.3;white-space:nowrap}
.hs-user.u1 svg{fill:#2f6fed}.hs-user.u1 span{background:#2f6fed}
.hs-user.u2 svg{fill:#c4307f}.hs-user.u2 span{background:#c4307f}
.hs-user.u1{left:58%;top:30%;animation:hsU1 13s ease-in-out infinite alternate}
.hs-user.u2{left:34%;top:52%;animation:hsU2 17s ease-in-out infinite alternate}
.hero-stage.hs-vid .hs-user{opacity:0}.hs-user{transition:opacity .3s}@keyframes hsU1{0%{transform:translate(0,0)}35%{transform:translate(-90px,70px)}70%{transform:translate(50px,120px)}100%{transform:translate(-30px,-40px)}}@keyframes hsU2{0%{transform:translate(0,0)}40%{transform:translate(120px,-70px)}75%{transform:translate(190px,40px)}100%{transform:translate(40px,-110px)}}