:root{--ink:#17251f;--green:#78b52b;--green2:#9bcf4f;--muted:#68736e;--line:#dce3df;--paper:#fff;--soft:#f3f6f3;--shadow:0 20px 55px rgba(20,42,32,.12)}
*{box-sizing:border-box}body{margin:0;background:#f7f8f6;color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.topbar{height:76px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);position:sticky;top:0;z-index:10}.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px}.brand b{font-size:32px;letter-spacing:-6px}.brand b span{color:var(--green)}.brand i{font-style:normal;font-size:10px;letter-spacing:.17em;font-weight:800}.top-actions{display:flex;align-items:center;gap:18px}.top-actions a{color:var(--ink);font-size:11px;font-weight:700;text-decoration:none}.top-actions .outline{border:1px solid var(--line);padding:10px 14px}
main{max-width:1380px;margin:auto;padding:0 28px}.intro{padding:48px 25px 30px;display:flex;justify-content:space-between;align-items:end;gap:30px}.kicker{font-size:9px;letter-spacing:.22em;color:#5c9520;font-weight:900}.intro h1{font:500 clamp(38px,4vw,58px)/1.02 Georgia,serif;margin:10px 0}.intro h1 em{color:#6fa925;font-weight:400}.intro p{color:var(--muted);max-width:650px;margin:0}.trust{background:white;border:1px solid var(--line);display:flex;align-items:center;gap:13px;padding:17px 20px;min-width:290px}.trust>span{width:32px;height:32px;border-radius:50%;background:#e8f2dc;color:#619b22;display:grid;place-items:center;font-weight:900}.trust div{display:flex;flex-direction:column;gap:4px}.trust small{font-size:8px;letter-spacing:.13em;color:var(--muted);font-weight:800}.trust strong{font-size:12px}
.planner{display:grid;grid-template-columns:410px 1fr;background:white;border:1px solid var(--line);box-shadow:var(--shadow);min-height:700px}.controls{padding:27px 28px;max-height:700px;overflow:auto;border-right:1px solid var(--line)}.section-head{display:flex;align-items:center;gap:11px;margin:8px 0 16px}.section-head:not(:first-child){margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}.section-head span{font:italic 18px Georgia;color:#6caa25}.section-head h2{font:500 23px Georgia;margin:0}.measure-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.measure-grid label,.select-label{font-size:9px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;color:var(--muted)}.measure-grid label>span{display:flex;border:1px solid var(--line);margin-top:7px;background:white}.measure-grid input{border:0;width:100%;padding:11px;outline:none;color:var(--ink);font-weight:800}.measure-grid b{padding:11px 10px;color:var(--muted)}.select-label{display:block;margin-top:13px}.select-label select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);padding:11px;background:white;color:var(--ink);font-weight:700}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{border:1px solid var(--line);background:white;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}.choice.active{border-color:var(--green);box-shadow:inset 0 -3px var(--green);background:#fbfdf8}.choice strong{font-size:10px}.choice small{font-size:8px;color:var(--muted)}.roof-icon{width:45px;height:24px;border:3px solid var(--ink);transform:skewX(-18deg);background:repeating-linear-gradient(90deg,transparent 0 5px,var(--ink) 6px 7px)}.roof-icon.fixed{background:repeating-linear-gradient(90deg,#dce4df 0 5px,var(--ink) 6px 7px)}.label{display:block;font-size:9px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;color:var(--muted);margin:18px 0 10px}.swatches{display:flex;gap:10px}.swatches button{width:32px;height:32px;border-radius:50%;border:4px solid white;box-shadow:0 0 0 1px #ccd6d1;cursor:pointer}.swatches button.active{box-shadow:0 0 0 2px var(--green)}.extras{display:grid}.extras label{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}.extras input{accent-color:var(--green)}.extras span{display:flex;flex-direction:column;gap:3px}.extras b{font-size:10px}.extras small{color:var(--muted);font-size:8px}.extras strong{font-size:8px;color:var(--muted)}.side-count{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:10px;font-weight:700}.side-count div{display:flex;align-items:center;border:1px solid var(--line)}.side-count button{border:0;background:var(--soft);width:30px;height:29px;cursor:pointer}.side-count b{width:32px;text-align:center}.reset{border:0;background:none;color:var(--muted);font-size:9px;font-weight:800;margin-top:16px;cursor:pointer}
.preview{display:grid;grid-template-rows:55px 1fr 75px;background:#eaf0eb;min-width:0}.preview-top{background:white;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:8px;font-weight:900;letter-spacing:.11em}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#65a333;margin-right:5px}.view-buttons{display:flex}.view-buttons button{border:1px solid var(--line);background:white;padding:8px 12px;font-size:8px;font-weight:800;cursor:pointer}.view-buttons button.active{background:var(--ink);color:white}.scene{position:relative;overflow:hidden;background:linear-gradient(#99c8ec 0 47%,#d7dfd1 47% 100%);min-height:550px;transition:.3s}.scene.night{background:linear-gradient(#101b2d 0 47%,#26342f 47% 100%)}.sun{position:absolute;right:12%;top:9%;width:62px;height:62px;border-radius:50%;background:#fff5bd;box-shadow:0 0 50px #fff7c7}.night .sun{width:38px;height:38px;background:#e7edf5;box-shadow:0 0 30px #b9cef0}.house{position:absolute;right:-4%;top:14%;width:57%;height:48%;background:#eeeae1;box-shadow:0 20px 45px rgba(0,0,0,.12)}.house:before{content:"";position:absolute;inset:-8% 0 auto -8%;height:9%;background:#d8d4ca}.window,.door{position:absolute;background:linear-gradient(145deg,#5d7580,#1c2930);bottom:0;border:7px solid #343b39}.window{width:38%;height:62%;right:5%}.door{width:28%;height:74%;left:24%}.garden{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(160deg,#78915c,#425b3a)}.pergola-model{--model-color:#eee9df;position:absolute;left:16%;bottom:15%;width:62%;height:48%;filter:drop-shadow(10px 18px 12px rgba(0,0,0,.22))}.roof-frame{position:absolute;left:4%;right:0;top:4%;height:35%;border:12px solid var(--model-color);transform:skewY(-7deg);background:rgba(255,255,255,.12);z-index:4}.slats{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--model-color) 0 9%,transparent 9% 13%);transition:.25s}.slats.fixed{background:repeating-linear-gradient(90deg,var(--model-color) 0 11%,rgba(255,255,255,.35) 11% 13%)}.post{position:absolute;width:13px;background:var(--model-color);top:30%;bottom:0;z-index:3}.p1{left:4%}.p2{right:0}.p3{left:24%;opacity:.8}.p4{right:24%;opacity:.8}.furniture{position:absolute;left:27%;right:19%;bottom:1%;height:28%;display:flex;align-items:end;gap:5px}.furniture i{display:block;background:#d9d2c5;border:5px solid #353c38;height:52%;flex:1}.furniture i:nth-child(2){height:32%;flex:.5}.screen-panel,.glass-panel{position:absolute;top:34%;bottom:2%;z-index:2;display:none}.screen-panel{background:rgba(48,55,52,.7);border:4px solid var(--model-color)}.screen-a,.glass-a{left:5%;width:20%;transform:skewY(-7deg)}.screen-b,.glass-b{right:1%;width:24%;transform:skewY(-7deg)}.screen-c,.glass-c{left:25%;right:25%;border:4px solid var(--model-color)}.glass-panel{background:linear-gradient(135deg,rgba(205,238,247,.35),rgba(255,255,255,.1));border:4px solid var(--model-color)}.pergola-model.led .roof-frame{box-shadow:inset 0 -5px 5px #ffe7a8,0 5px 8px #ffd779}.night .pergola-model.led .roof-frame{box-shadow:inset 0 -8px 9px #ffd26a,0 12px 30px #ffbd4a}.dimension{position:absolute;border-top:1px solid rgba(23,37,31,.55);font-size:9px;font-weight:800;text-align:center}.dimension:before,.dimension:after{content:"";position:absolute;top:-4px;width:1px;height:8px;background:var(--ink)}.dimension:before{left:0}.dimension:after{right:0}.dimension span{background:rgba(255,255,255,.85);padding:4px 8px;position:relative;top:-11px}.width-dim{left:20%;right:21%;bottom:9%}.depth-dim{width:24%;right:2%;bottom:41%;transform:rotate(-50deg)}.scene-note{position:absolute;left:16px;bottom:14px;background:rgba(23,37,31,.85);color:white;padding:7px 10px;font-size:7px;letter-spacing:.08em}.spec-row{display:grid;grid-template-columns:repeat(4,1fr);background:white}.spec-row div{padding:17px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px}.spec-row small{font-size:7px;color:var(--muted);letter-spacing:.1em;font-weight:800}.spec-row strong{font:500 15px Georgia}
.price-section{margin:34px 0 70px;background:var(--ink);color:white;padding:42px 50px;display:grid;grid-template-columns:1.4fr .8fr;gap:60px}.included h2{font:500 31px Georgia;margin:9px 0 21px}.included-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;color:#d8e1dd;font-size:11px}.included-grid span::first-letter{color:var(--green2)}.included p{font-size:9px;color:#9fafaa;margin-top:22px}.price-card{background:white;color:var(--ink);padding:26px;text-align:center;display:flex;flex-direction:column}.price-card>small{font-size:8px;color:var(--muted);font-weight:900;letter-spacing:.1em}.price-card>strong{font:500 29px Georgia;margin:11px 0 4px}.price-card>span{font-size:9px;color:var(--muted);margin-bottom:18px}.price-card button,.submit{border:0;background:var(--green);color:white;padding:15px;font-weight:900;font-size:11px;cursor:pointer}.price-card button b{margin-left:13px}.price-card a{color:var(--ink);font-size:9px;font-weight:800;margin-top:12px;text-decoration:none}footer{background:#0e1d17;color:#afc0ba;text-align:center;padding:23px;font-size:10px}footer a{color:#b4df78;text-decoration:none}
dialog{border:0;padding:0;width:min(570px,calc(100vw - 28px));color:var(--ink);box-shadow:0 25px 80px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(11,27,20,.75);backdrop-filter:blur(4px)}#pergolaQuoteForm{padding:36px;position:relative}#pergolaQuoteForm h2{font:500 29px Georgia;margin:9px 0 5px}#pergolaQuoteForm>p{font-size:10px;color:var(--muted);margin:0 0 20px}.close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:25px;cursor:pointer;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:8px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.form-grid .wide{grid-column:1/-1}.form-grid input,.form-grid textarea{border:1px solid var(--line);padding:11px;outline:none}.consent{display:flex;gap:7px;font-size:9px;color:var(--muted);margin:13px 0}.consent input{accent-color:var(--green)}.dialog-price{background:var(--soft);padding:13px;display:flex;justify-content:space-between;font-size:10px;margin:12px 0}.submit{width:100%}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,25px);opacity:0;background:var(--ink);color:white;padding:13px 18px;font-size:10px;z-index:50;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){main{padding:0 14px}.intro{align-items:flex-start;flex-direction:column}.trust{width:100%}.planner{grid-template-columns:1fr}.controls{max-height:none;border-right:0}.preview{min-height:620px}.scene{min-height:500px}.price-section{grid-template-columns:1fr;gap:28px;padding:34px 25px}.pergola-model{left:8%;width:80%}}
@media(max-width:560px){.topbar{height:66px;padding:0 16px}.brand b{font-size:27px}.brand i{font-size:8px}.top-actions>a:first-child{display:none}.intro{padding:31px 5px 24px}.intro h1{font-size:38px}.planner{margin:0 -14px;border-left:0;border-right:0}.controls{padding:25px 20px}.scene{min-height:390px}.preview{min-height:510px}.spec-row{grid-template-columns:1fr 1fr}.spec-row div{padding:13px}.pergola-model{bottom:20%;height:42%}.house{width:72%}.price-section{margin-left:-14px;margin-right:-14px}.included-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}#pergolaQuoteForm{padding:31px 20px}}
.extras .built-in{opacity:.75}
.preview{grid-template-rows:55px minmax(460px,1fr) 94px 75px}
.media-label{color:var(--muted);font-size:8px}
.media-stage{position:relative;overflow:hidden;background:#18221e;min-height:460px}
.media-stage>img,.media-stage>video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center;display:block}
.media-stage>video{background:#000;object-fit:cover;object-position:left center}
.media-stage>img.photo-full{transform:none;object-position:left center}
.media-stage>img.photo-detail{transform:none;object-position:left center}
.media-caption{position:absolute;left:20px;bottom:20px;background:rgba(14,29,23,.86);color:white;padding:11px 15px;display:flex;flex-direction:column;gap:4px}
.media-caption span{font-size:7px;text-transform:uppercase;letter-spacing:.14em;color:#b9df86;font-weight:900}
.media-caption strong{font-size:10px}
.media-thumbs{background:white;padding:9px 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;border-top:1px solid var(--line)}
.media-thumbs button{height:74px;border:1px solid var(--line);background:#f8faf8;position:relative;overflow:hidden;cursor:pointer;padding:0}
.media-thumbs button.active{border:2px solid var(--green)}
.media-thumbs img{width:100%;height:100%;object-fit:contain;background:#eef2ef}
.media-thumbs span:not(.play-icon){position:absolute;left:0;right:0;bottom:0;background:rgba(13,28,21,.82);color:white;padding:6px;font-size:7px;font-weight:800}
.play-icon{display:grid;place-items:center;width:100%;height:100%;font-size:23px;color:var(--green)}
@media(max-width:560px){.preview{grid-template-rows:55px 310px 82px auto}.media-stage{min-height:310px}.media-caption{left:10px;bottom:10px;right:10px}.media-thumbs button{height:62px}.media-stage>img.photo-full,.media-stage>img.photo-detail{transform:none;object-position:left center}.media-stage>video{object-fit:cover;object-position:left center}}