/* Interactive showpieces shared by both directions: project journey (jv) and dawn-to-night lighting (lv). */

/* ---------- project journey ---------- */
.jv-top{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:18px}
.jv-tabs,.lv-tabs{display:flex;gap:8px;flex-wrap:wrap}
.jv-p,.lv-p{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 16px;border:1px solid var(--rule-2);border-radius:var(--r,0);text-align:left;color:var(--mute);transition:border-color .3s,background .3s,color .3s}
.jv-p b,.lv-p b{font-size:15.5px;font-weight:600;color:inherit}
.jv-p span,.lv-p span{font-size:13px}
.jv-p:hover,.lv-p:hover{border-color:var(--ink);color:var(--ink)}
.jv-p.on,.lv-p.on{background:var(--ink);border-color:var(--ink);color:#fff}
.jv-scope{font-size:15px;color:var(--mute);max-width:34em}
.jv-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark);border-radius:var(--r,0)}
.jv-set{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.jv-set.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.jv-set img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0)}
.jv-set img.base{clip-path:none}
.jv-set img.wipe{clip-path:inset(0 calc(100% - var(--w,0%)) 0 0)}
.jv-set img.wipe::after{content:""}
.jv-stage::after{content:"";position:absolute;top:0;bottom:0;left:var(--wl,0%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 0 18px rgba(255,255,255,.6);opacity:var(--wo,0);pointer-events:none;transition:opacity .25s}
.jv-cap{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);max-width:min(420px,70%);padding:16px 18px;background:rgba(12,18,14,.82);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r,0);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.jv-cap.swap{opacity:0;transform:translateY(6px)}
.jv-cap b{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;padding:3px 8px;background:#fff;color:var(--ink);border-radius:999px}
.dir-b .jv-cap b{background:var(--lime,#94C83D);border-radius:3px;text-transform:uppercase;font-family:var(--fd);letter-spacing:.06em}
.jv-cap span{margin-left:10px;font-size:13.5px;opacity:.8}
.jv-cap p{margin-top:9px;font-size:15.5px;line-height:1.45}
.jv-rail{padding:26px 6px 6px}
.jv-track{position:relative;height:56px}
.jv-track::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--rule-2)}
.jv-fill{position:absolute;left:0;top:10px;height:2px;width:calc(var(--t,0) * 20%);background:var(--ink)}
.dir-b .jv-fill{background:var(--green)}
.jv-tick{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--mute);font-size:13.5px;font-weight:500;white-space:nowrap}
.jv-tick:first-of-type{transform:none;align-items:flex-start}
.jv-tick:last-of-type{transform:translateX(-100%);align-items:flex-end}
.jv-tick i{width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid var(--rule-2);transition:border-color .3s,background .3s,transform .3s}
.jv-tick.done i{border-color:var(--ink);background:var(--ink)}
.dir-b .jv-tick.done i{border-color:var(--green);background:var(--green)}
.jv-tick.on{color:var(--ink)}
.jv-tick.on i{transform:scale(1.2);box-shadow:0 0 0 5px rgba(20,32,25,.12)}
.jv-range{position:absolute;left:-11px;right:-11px;top:-2px;width:calc(100% + 22px);height:34px;margin:0;opacity:0;cursor:ew-resize}
.jv .ba-note{margin-top:8px}
.jv template{display:none}
@media (max-width:640px){
  .jv-cap{position:static;max-width:none;border-radius:0}
  .jv-stage{aspect-ratio:auto;display:flex;flex-direction:column}
  .jv-set{position:relative;aspect-ratio:16/10;inset:auto}
  .jv-set:not(.on){display:none}
  .jv-tick span{font-size:12px;opacity:0;transition:opacity .25s}
  .jv-tick.on span{opacity:1}
}

/* ---------- dawn to night ---------- */
.lv-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0f0d;border-radius:var(--r,0)}
.lv-set{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.lv-set.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.lv-set img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity}
.lv-set .lv-day{opacity:1}
.lv-set .lv-nightoff{filter:brightness(.34) saturate(.55) hue-rotate(8deg)}
.lv-read{position:absolute;right:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:12px 16px;background:rgba(12,18,14,.7);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r,0)}
.lv-time{font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.dir-b .lv-time{font-family:var(--fd);letter-spacing:.01em}
.lv-state{font-size:13px;opacity:.8}
.lv-ctl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 28px;align-items:center;margin-top:20px}
.lv-slide{display:flex;align-items:center;gap:14px}
.lv-ic{font-size:18px;color:var(--mute);line-height:1}
.lv-range{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#9cc3e6 0%,#f2c46d 45%,#e07a52 58%,#2b3a63 78%,#0d1426 100%)}
.lv-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.lv-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.lv-sw{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap}
.lv-sw i{position:relative;width:52px;height:30px;border-radius:999px;background:var(--rule-2);transition:background .3s}
.lv-sw i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.lv-sw[aria-checked="true"] i{background:#E7B85A}
.lv-sw[aria-checked="true"] i::after{transform:translateX(22px)}
@media (max-width:900px){.lv-ctl{grid-template-columns:1fr}.lv-sw{justify-self:start}}
@media (max-width:640px){.lv-time{font-size:20px}.lv-read{padding:9px 12px}}

/* ---------- stone configurator ---------- */
.cf-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark);border-radius:var(--r,0)}
.cf-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;clip-path:inset(0 0 0 0)}
.cf-im.on{opacity:1}
.cf-im.in{opacity:1;z-index:2;clip-path:inset(0 100% 0 0);animation:cfWipe 1s var(--ease) forwards}
@keyframes cfWipe{to{clip-path:inset(0 0 0 0)}}
.cf-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;z-index:3;box-shadow:0 0 16px rgba(255,255,255,.7);opacity:0}
.cf-stage.wiping .cf-line{animation:cfLine 1s var(--ease) forwards}
@keyframes cfLine{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
.cf-name{position:absolute;left:clamp(14px,2vw,26px);top:clamp(14px,2vw,26px);z-index:4;padding:9px 14px;background:rgba(12,18,14,.78);color:#fff;font-weight:600;font-size:15px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--r,0)}
.cf-ctl{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:18px}
.cf-sws{display:flex;gap:10px;flex-wrap:wrap}
.cf-sw{display:flex;align-items:center;gap:11px;padding:8px 14px 8px 8px;border:1px solid var(--rule-2);border-radius:var(--r,999px);text-align:left;color:var(--mute);transition:border-color .25s,color .25s,background .25s}
.cf-sw i{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cf-sw b{display:block;font-size:14.5px;font-weight:600;color:inherit}
.cf-sw small{display:none}
.cf-sw:hover{border-color:var(--ink);color:var(--ink)}
.cf-sw.on{border-color:var(--ink);background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cf-sw.on small{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.cf-cta{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--ink)}
.cf-cta svg{width:14px;height:14px}
.dir-b .cf-sw{border-radius:4px}
@media (max-width:640px){.cf-sws{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:2px var(--gut) 6px;scrollbar-width:none}.cf-sw{flex:none}}
@media (prefers-reduced-motion:reduce){.cf-im.in,.cf-stage.wiping .cf-line{animation:none;clip-path:none}}

/* ---------- under-the-patio cutaway ---------- */
.ca{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:center}
.ca-fig{background:var(--card);border:1px solid var(--rule);border-radius:var(--r,0);padding:clamp(14px,2vw,28px);box-shadow:0 1px 0 var(--rule)}
.ca-fig svg{display:block;width:100%;height:auto;overflow:visible}
.ca .cl{transition:transform .7s var(--ease),opacity .4s var(--ease);transform-box:view-box}
.c-pav{fill:#B5AA98;stroke:#7E7466;stroke-width:1.2}.c-pav-bg{fill:#9D9283}
.c-jnt{fill:#E6DCC8}
.c-bed{fill:#E2CFA3}
.c-base{fill:#B7B3AA}.c-stone{fill:#8E8A82}
.c-fab{fill:#33463A}
.c-clay{fill:#A8532F}.c-clay-l{stroke:#8A4630;stroke-width:1.5}
.c-hatch{stroke:rgba(0,0,0,.18);stroke-width:1}
.c-edge{fill:#2B2F2C}.c-spike{stroke:#2B2F2C;stroke-width:3;stroke-linecap:round}
.c-fall{stroke:var(--ink);stroke-width:1.4}.c-lab{font:500 11.5px var(--f);fill:var(--mute)}
.ca.open .cl[data-i="0"]{transform:translateY(-24px)}.ca.open .cl[data-i="1"]{transform:translateY(-24px)}
.ca.open .cl[data-i="2"]{transform:translateY(-15px)}.ca.open .cl[data-i="3"]{transform:translateY(-7px)}
.ca.open .cl[data-i="4"]{transform:translateY(-2px)}
.ca.open .cl-edge{transform:translateY(-15px)}
.ca.focus .cl{opacity:.72}
.ca.focus .cl.hl{opacity:1;filter:none}

.ca-list{list-style:none;border-top:1px solid var(--rule-2)}
.ca-it{border-bottom:1px solid var(--rule-2)}
.ca-it>button{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;width:100%;padding:13px 0;text-align:left;color:var(--mute);transition:color .25s}
.ca-it>button:hover,.ca-it.on>button{color:var(--ink)}
.ca-sw{width:22px;height:22px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ca-sw.c-pav{background:#B5AA98}.ca-sw.c-jnt{background:#E6DCC8}.ca-sw.c-bed{background:#E2CFA3}.ca-sw.c-base{background:#B7B3AA}.ca-sw.c-fab{background:#33463A}.ca-sw.c-clay{background:#B5603F}.ca-sw.c-edge{background:#2B2F2C}
.ca-t b{font-size:16.5px;font-weight:600;color:inherit;margin-right:8px}
.dir-b .ca-t b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.ca-t small{font-size:13.5px;color:var(--mute)}
.ca-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.ca-more>div{overflow:hidden;min-height:0;padding-left:42px}
.ca-it.on .ca-more{grid-template-rows:1fr}
.ca-more p{font-size:14.5px;line-height:1.5}
.ca-more .ca-x{color:#9B3D22;padding:6px 0 14px}
.dir-b .ca-more .ca-x{color:#9B3D22}
.m-on .ca:not(.built) .cl{opacity:0;transform:translateY(24px)}
@media (max-width:900px){.ca{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ca .cl{transition:none}}

/* ---------- service-area map cards ---------- */
.mapx .map .t{cursor:pointer;outline:none}
.mapx .map .t circle,.mapx .map .t rect{transition:transform .3s var(--ease);transform-box:fill-box;transform-origin:center}
.mapx .map .t:hover circle,.mapx .map .t.sel circle{transform:scale(1.9)}
.mapx .map .t.sel text{fill:var(--map-ink);font-weight:600}
.mapx .map .t:focus-visible text{text-decoration:underline}
.map .m-route{fill:none;stroke:var(--accent-l);stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round}
.map .m-route.draw{animation:mRoute 1s var(--ease) both}
@keyframes mRoute{from{stroke-dashoffset:120;opacity:0}to{stroke-dashoffset:0;opacity:1}}
.mapc{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;margin-top:14px;padding:10px;background:var(--card);color:var(--ink);border-radius:var(--r,0);box-shadow:0 18px 40px -22px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mapc.on{opacity:1;transform:none}
.mapc img{width:120px;height:90px;object-fit:cover;border-radius:var(--r,0)}
.mapc small{display:block;font-size:12.5px;color:var(--mute)}
.mapc b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.dir-b .mapc b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em;font-weight:500}
.mapc p{font-size:13.5px;line-height:1.4;margin-top:4px;color:var(--mute)}
.mapc a{display:inline-block;font-size:13.5px;font-weight:600;margin-top:6px;color:var(--ink)}
.dir-b .mapc a{color:var(--green)}
@media (max-width:640px){.mapc{grid-template-columns:90px 1fr}.mapc img{width:90px;height:90px}}
@media (prefers-reduced-motion:reduce){.map .m-route.draw{animation:none}.mapx .map .t circle{transition:none}}

/* ---------- project story: pinned, scroll-driven, chapter list on the left ---------- */
.st{position:relative;--pin-top:84px}
.dir-b .st{--pin-top:88px}
.st-pin{position:sticky;top:var(--pin-top);height:calc(100vh - var(--pin-top));display:flex;align-items:center}
.st{height:calc(var(--frames) * 52vh + 100vh)}
.st-grid{display:grid;grid-template-columns:minmax(240px,2.7fr) minmax(0,9.3fr);gap:clamp(24px,3vw,48px);align-items:center;width:100%}
.st-proj b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.dir-b .st-proj b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em;font-weight:500}
.st-proj span{display:block;font-size:14px;color:var(--mute);margin-top:4px;line-height:1.4}
.st-list{list-style:none;margin-top:22px;border-top:1px solid var(--rule-2)}
.st-ch{border-bottom:1px solid var(--rule-2)}
.st-ch>button{display:grid;grid-template-columns:34px 1fr;gap:10px;width:100%;padding:12px 0;text-align:left;color:var(--mute);transition:color .4s var(--ease)}
.st-ch>button:hover,.st-ch.on>button{color:var(--ink)}
.st-no{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;padding-top:3px}
.st-t b{display:block;font-size:17px;font-weight:600;color:inherit;letter-spacing:-.015em}
.dir-b .st-t b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.st-t small{display:block;font-size:13.5px;line-height:1.4;margin-top:2px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.st-ch.on .st-t small{max-height:60px;opacity:1}
.st-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.st-more>div{overflow:hidden;min-height:0;padding-left:44px}
.st-ch.on .st-more{grid-template-rows:1fr}
.st-cap{display:none;font-size:14.5px;line-height:1.5;padding-bottom:10px}
.st-cap.on,.st-cap-3d{display:block}
.st-dots{display:flex;gap:5px;padding-bottom:14px}
.st-dots em{width:18px;height:3px;border-radius:2px;background:var(--rule-2);transition:background .4s}
.st-dots em.on{background:var(--ink)}
.dir-b .st-dots em.on{background:var(--green)}
.st-prog{height:2px;background:var(--rule);margin-top:18px;overflow:hidden}
.st-prog i{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.dir-b .st-prog i{background:var(--green)}
.st-stage{position:relative;aspect-ratio:16/9;max-height:calc(100vh - var(--pin-top) - 48px);width:100%;overflow:hidden;background:#0d120f;border-radius:var(--r,0);margin-left:auto}
.st-f{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1);will-change:opacity}
.st-f.on{opacity:1}
.st-f img{width:100%;height:100%;object-fit:cover;display:block}
.st-f.st-3d img{position:absolute;top:34px;left:0;width:100%;height:calc(100% - 34px)}
.st-app{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.st-stage.in3d .st-app{opacity:1}
.st-bar{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#1d2220;color:rgba(255,255,255,.72);font-size:12.5px}
.st-bar i{width:10px;height:10px;border-radius:50%;background:#3a403c}
.st-bar span{margin-left:10px}
.st-cams{position:absolute;left:50%;bottom:18px;z-index:3;transform:translateX(-50%);display:flex;gap:4px;padding:4px;background:rgba(20,24,22,.78);border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}
.st-cam{padding:8px 14px;border-radius:999px;color:rgba(255,255,255,.75);font-size:13px;font-weight:500;transition:background .3s,color .3s}
.st-cam:hover{color:#fff}
.st-cam.on{background:#fff;color:#141816}
.st-cam:disabled{opacity:.35;cursor:not-allowed}
.sm{display:none}
@media (max-width:900px){
  .st{height:auto}
  .st-pin{display:none}
  .sm{display:block}
  .sm-ch{padding:18px 0;border-top:1px solid var(--rule-2)}
  .sm-ch header{display:grid;grid-template-columns:34px 1fr;gap:8px;margin-bottom:12px}
  .sm-ch b{display:block;font-size:17px;font-weight:600}
  .dir-b .sm-ch b{font-family:var(--fd);text-transform:uppercase;font-weight:500;letter-spacing:.02em}
  .sm-ch small{display:block;font-size:14px;color:var(--mute);margin-top:2px}
  .sm-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sm-strip::-webkit-scrollbar{display:none}
  .sm-f{flex:0 0 86%;margin:0;scroll-snap-align:start}
  .sm-f:only-child{flex-basis:100%}
  .sm-f img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r,0);display:block}
  .sm-f figcaption{font-size:14px;line-height:1.45;color:var(--mute);margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.st-f{transition:none;transform:none}}
.st-note{font-size:12px;line-height:1.4;color:var(--mute);margin-top:14px}