/* Interactive tools: studio, holiday designer, estimator, savings, quiz, fixture guide */
.tool-mount{position:relative;min-height:380px}
.studio{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:stretch}
.studio-left{position:sticky;top:96px;align-self:start;display:grid;gap:16px}
.studio-stage{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;border:1px solid var(--line-2);background:#04060d;box-shadow:0 50px 140px -40px rgba(255,140,40,.4)}
.studio-svg{position:absolute;inset:0}
.studio-hud{position:absolute;left:18px;top:18px;display:flex;gap:10px;z-index:2}
.studio-hud span{padding:8px 14px;border-radius:999px;background:rgba(5,7,13,.65);backdrop-filter:blur(8px);border:1px solid var(--line-2);font:500 11px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--amber-2)}
.studio-hint{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;text-align:center;font:500 11px/1.4 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:rgba(247,240,228,.7);text-shadow:0 2px 14px #000;pointer-events:none}
.studio-panel{padding:24px;border-radius:26px;background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line-2);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:12px}
.tp-h{display:flex;align-items:center;gap:8px;margin-top:6px;font:500 11px/1.2 var(--f-m);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.tp-h b{margin-left:auto;color:var(--ivory);font-weight:500;letter-spacing:.1em}
.tp-link{margin-left:auto;background:none;border:0;font:500 10.5px var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:2px 4px}
.tp-link+.tp-link{margin-left:6px}
.tp-link:hover{color:var(--amber-2)}
.tp-tabs{display:flex;gap:8px}
.tp-tabs--wrap{flex-wrap:wrap}
.tp-tab{flex:1;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ivory);font:500 13.5px var(--f-b);transition:.3s;text-align:center}
.tp-tabs--wrap .tp-tab{flex:0 1 auto}
.tp-tab:hover{border-color:var(--line-2)}
.tp-tab.is-on{background:linear-gradient(135deg,#ffdf9c,#ffb454);color:#1b1004;border-color:transparent}
.tp-chips{display:flex;flex-wrap:wrap;gap:8px}
.tp-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font:500 13.5px var(--f-b);transition:.3s}
.tp-chip i{width:10px;height:10px;border-radius:50%;background:#3b4668;transition:.3s}
.tp-chip:hover{border-color:var(--line-2)}
.tp-chip.is-on{color:#fff;border-color:var(--amber);background:rgba(255,180,84,.12);box-shadow:0 0 28px -8px rgba(255,170,70,.8)}
.tp-chip.is-on i{background:var(--amber);box-shadow:0 0 12px 3px rgba(255,180,84,.8)}
.tp-scale{display:flex;justify-content:space-between;font:500 10px var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:-4px}
.tp-time{display:flex;align-items:center;gap:12px}
.tp-play{flex:0 0 44px;height:44px;border-radius:50%;border:1px solid var(--amber);background:rgba(255,180,84,.12);color:var(--amber);display:grid;place-items:center;transition:.3s}
.tp-play:hover{background:var(--amber);color:#1a0f02}
.tp-time .tp-rng{flex:1}
.tp-rng{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;margin:0}
.tp-rng::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(255,180,84,.25),rgba(255,180,84,.7))}
.tp-rng::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(255,180,84,.25),rgba(255,180,84,.7))}
.tp-rng--k::-webkit-slider-runnable-track{background:linear-gradient(90deg,#ff9329,#ffc27d 35%,#fff0dc 70%,#d9e8ff)}
.tp-rng--k::-moz-range-track{background:linear-gradient(90deg,#ff9329,#ffc27d 35%,#fff0dc 70%,#d9e8ff)}
.tp-rng--t::-webkit-slider-runnable-track{background:linear-gradient(90deg,#78a9dc,#ffc27d 28%,#ff8a4e 38%,#26356b 55%,#05070d)}
.tp-rng--t::-moz-range-track{background:linear-gradient(90deg,#78a9dc,#ffc27d 28%,#ff8a4e 38%,#26356b 55%,#05070d)}
.tp-rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7de,#ffb454);border:0;box-shadow:0 0 0 4px rgba(255,180,84,.25),0 0 24px rgba(255,170,70,.9)}
.tp-rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7de,#ffb454);border:0;box-shadow:0 0 0 4px rgba(255,180,84,.25),0 0 24px rgba(255,170,70,.9)}
.tp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tp-row label,.est-rng{display:flex;flex-direction:column;gap:2px;font:500 12px/1.3 var(--f-b);color:var(--text)}
.tp-row label b,.est-rng b{color:var(--amber-2);font-weight:600;margin-left:6px}
.est-rng{font-size:.95rem;margin:10px 0}
.tp-custom{display:flex;gap:10px}
.tp-custom input{width:48px;height:36px;border:0;border-radius:10px;background:none;padding:0;cursor:pointer}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:38px;height:38px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.18);transition:.3s}
.swatch:hover{transform:scale(1.12)}
.swatch.is-on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,180,84,.7),0 0 24px rgba(255,170,70,.7)}
.est-box{margin-top:6px;padding:16px 18px;border-radius:16px;background:rgba(255,180,84,.08);border:1px solid var(--line-2)}
.est-box span{display:block;font:500 10.5px var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.est-box b{display:block;font:340 1.8rem/1.2 var(--f-d);color:var(--ivory);margin:4px 0}
.est-box small{display:block;color:var(--mute);font-size:.8rem;line-height:1.45}

/* scene styling */
.scene{width:100%;height:100%;display:block;--c:255,170,90;--night:0;--lum:1;--win:.12}
.scene .gs{stop-color:rgb(var(--c))}
.scene .gcore{fill:rgb(255,240,214)}
.scene .fx{mix-blend-mode:screen;opacity:calc(var(--lum,1) * var(--night,0) * var(--on,0));transition:opacity .8s ease}
.scene .win{fill:rgb(var(--c));opacity:var(--win,.12);filter:drop-shadow(0 0 calc(var(--night,0) * 9px) rgba(var(--c),.95));transition:opacity .6s}
.scene .win--door{fill:rgb(var(--c))}
.scene .hwpost{fill:#6a5a3a}
.scene .pool{transition:fill .4s}
.scene .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame 1.15s ease-in-out infinite alternate}
@keyframes flame{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.94,1.1) skewX(3deg)}100%{transform:scale(1.04,.96) skewX(-3deg)}}

/* holiday bulbs */
.hscene .hh{filter:blur(4px)}
.hscene .bh{--bo:.55;opacity:var(--bo)}
.hscene .bc{--bo:1;opacity:var(--bo)}
.hscene .bc{filter:drop-shadow(0 0 2px currentColor)}
.m-twinkle .bh,.m-twinkle .bc{animation:tw 2.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.m-chase .bh,.m-chase .bc{animation:chase 1.5s linear infinite;animation-delay:calc(var(--i,0) * -.05s)}
.m-fade .bh,.m-fade .bc{animation:fadeb 3.4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:var(--bo)}50%{opacity:calc(var(--bo) * .2)}}
@keyframes chase{0%,55%{opacity:var(--bo)}56%,100%{opacity:calc(var(--bo) * .1)}}
@keyframes fadeb{0%,100%{opacity:var(--bo)}50%{opacity:calc(var(--bo) * .15)}}

/* estimator */
.est{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.est-main{padding:clamp(22px,3vw,40px);border-radius:28px;background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line-2);display:grid;gap:34px}
.est-q{font:380 1.4rem/1.2 var(--f-d);color:var(--ivory);margin-bottom:16px}
.opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt-grid--3{grid-template-columns:repeat(3,1fr)}
.opt-grid--4{grid-template-columns:repeat(4,1fr)}
.opt-grid--2{grid-template-columns:repeat(2,1fr)}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);transition:.35s var(--ease);position:relative}
.opt b{font:400 1.2rem/1.2 var(--f-d);color:var(--ivory)}
.opt small{color:var(--mute);font-size:.88rem;line-height:1.4}
.opt--sm{padding:14px 16px;font:500 14px/1.3 var(--f-b);gap:10px;align-items:flex-start}
.opt--sm svg{color:var(--amber)}
.opt:hover{border-color:var(--line-2);transform:translateY(-3px)}
.opt.is-on{border-color:var(--amber);background:rgba(255,180,84,.12);color:#fff;box-shadow:0 0 36px -10px rgba(255,170,70,.8)}
.opt.is-on::after{content:"";position:absolute;right:12px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px 3px rgba(255,180,84,.8)}
.check{display:flex;gap:12px;align-items:center;margin-top:16px;color:var(--text);cursor:pointer}
.check input{width:20px;height:20px;accent-color:#ffb454}
.est-hint{color:var(--mute);font-size:.88rem;margin:8px 0 0}
.est-side{position:sticky;top:104px}
.est-result{padding:30px;border-radius:28px;background:linear-gradient(165deg,rgba(255,180,84,.14),rgba(255,255,255,.02));border:1px solid var(--amber);box-shadow:0 0 90px -30px rgba(255,150,50,.6);display:grid;gap:14px}
.est-num{font:330 clamp(2rem,3.4vw,2.8rem)/1.1 var(--f-d);color:var(--ivory);letter-spacing:-.02em}
.est-bar{height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.est-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#ff8a3d,#ffd58a);box-shadow:0 0 18px rgba(255,170,70,.8);transition:width .6s var(--ease)}
.est-list{list-style:none;display:grid;gap:8px;margin:0}
.est-list li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.92rem;color:var(--text)}
.est-list b{color:var(--ivory);font-weight:500;text-align:right}
.est-fine{font-size:.78rem;color:var(--mute);margin:0}

/* savings */
.sav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.sav-in,.sav-out{padding:clamp(22px,3vw,38px);border-radius:28px;border:1px solid var(--line-2);background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));display:grid;gap:10px;align-content:start}
.sav-out{border-color:var(--amber);background:linear-gradient(165deg,rgba(255,180,84,.14),rgba(255,255,255,.02))}
.sav-big{font:320 clamp(3rem,6vw,5rem)/1 var(--f-d);letter-spacing:-.03em;background:linear-gradient(95deg,#ffe2a8,#ffb454 60%,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.sav-sub{color:var(--text);margin-bottom:6px}
.sav-bars{display:grid;gap:14px;margin:10px 0}
.sav-bars span{display:block;font:500 11px var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.sav-bars b{display:block;margin-top:6px;font:500 .88rem var(--f-b);color:var(--ivory)}
.sav-bar{height:14px;border-radius:14px;background:rgba(255,255,255,.07);overflow:hidden}
.sav-bar i{display:block;height:100%;border-radius:14px;background:linear-gradient(90deg,#8a93ad,#c7cfe6);transition:width .6s var(--ease)}
.sav-bar--led i{background:linear-gradient(90deg,#ff8a3d,#ffd58a);box-shadow:0 0 22px rgba(255,170,70,.8)}
.sav-num{margin-top:8px}

/* quiz */
.quiz{max-width:900px;margin-inline:auto;padding:clamp(24px,3.5vw,48px);border-radius:30px;background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid var(--line-2);box-shadow:0 50px 140px -40px rgba(255,140,40,.35)}
.quiz-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:30px}
.quiz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff8a3d,#ffd58a);box-shadow:0 0 16px rgba(255,170,70,.8);transition:width .5s var(--ease)}
.quiz-n{font:500 11px var(--f-m);letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.quiz-q{font:340 clamp(1.7rem,3vw,2.5rem)/1.15 var(--f-d);margin:10px 0 24px}
.quiz-nav{display:flex;justify-content:space-between;margin-top:26px}
.quiz-body.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.quiz-res{display:grid;gap:14px;margin:6px 0 26px}
.qr{display:flex;gap:18px;align-items:center;padding:14px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:.4s var(--ease)}
.qr:hover{border-color:var(--amber);transform:translateX(6px);background:rgba(255,180,84,.07)}
.qr-img{flex:0 0 120px;aspect-ratio:16/10;border-radius:14px;overflow:hidden}
.qr-img img{width:100%;height:100%;object-fit:cover}
.qr-b{flex:1}
.qr-b small{display:block;font:500 10.5px var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.qr-b b{display:block;font:400 1.4rem/1.2 var(--f-d);color:var(--ivory);margin:2px 0 8px}
.qr-b i{display:block;height:5px;border-radius:5px;background:linear-gradient(90deg,#ff8a3d,#ffd58a)}

/* fixture guide */
.fixg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:stretch}
.fixg-stage{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;border:1px solid var(--line-2);background:#04060d;box-shadow:0 50px 140px -40px rgba(255,140,40,.4)}
.fixg-info{display:flex;flex-direction:column;gap:16px}
.fixg-list{display:flex;flex-wrap:wrap;gap:8px}
.fx-tab{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font:500 13px var(--f-b);transition:.3s}
.fx-tab:hover{border-color:var(--line-2)}
.fx-tab.is-on{background:linear-gradient(135deg,#ffdf9c,#ffb454);color:#1b1004;border-color:transparent}
.fixg-card{padding:26px;border-radius:24px;border:1px solid var(--line-2);background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));flex:1}
.fixg-card h3{font:400 1.7rem var(--f-d);margin-bottom:12px}
.fixg-card dl{display:grid;gap:12px;margin:0}
.fixg-card dt{font:500 10.5px var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.fixg-card dd{margin:2px 0 0;color:var(--ivory)}
.form-note{padding:10px 14px;border-radius:12px;background:rgba(255,180,84,.1);border:1px dashed var(--line-2);color:var(--amber-2);font-size:.9rem;margin:0}
.tool-sec .wrap--wide{position:relative}
.tool-formsec{background:radial-gradient(90% 60% at 50% 0,rgba(255,170,70,.07),transparent 70%),var(--ink-2)}

@media (max-width:1100px){
  .studio,.est,.sav,.fixg{grid-template-columns:1fr}
  .est-side{position:static}
  .studio-stage{min-height:0;aspect-ratio:16/10}
  .opt-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .opt-grid,.opt-grid--3{grid-template-columns:1fr}
  .opt-grid--4{grid-template-columns:1fr 1fr}
  .tp-row{grid-template-columns:1fr}
  .studio-stage{aspect-ratio:4/3}
  .qr-img{flex-basis:90px}
}

/* photo-composite studio */
.pscene{position:absolute;inset:0;--night:0;--lum:1}
.pscene img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none}
.ps-tint{position:absolute;inset:0;mix-blend-mode:multiply;transition:background .3s}
.ps-sky,.ps-l{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none}
.ps-l{opacity:calc(var(--on,0) * var(--lum,1) * var(--night,0));transition:opacity .9s ease}
.ps-l img{filter:var(--wf,none)}

.studio-note{padding:22px 26px;border-radius:22px;background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line);min-height:128px}
.studio-note h4{font:400 1.4rem/1.2 var(--f-d);margin:10px 0 6px}
.studio-note p{margin:0;color:var(--text);font-size:.97rem;max-width:62ch}
@media (max-width:1100px){.studio-left{position:static}}

.studio>*{min-width:0}
.studio-stage{width:100%}