*{box-sizing:border-box;margin:0}body{font-family:Inter,Helvetica,Arial,sans-serif;color:#2b2a28;background:#faf8f5}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:500}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.prog{padding:0 22px}.bar{height:3px;background:#e6e1da;border-radius:2px}.bar i{display:block;height:3px;background:#2b2a28;border-radius:2px}
.step{font-size:12px;color:#8a857d;margin:8px 0 0;letter-spacing:.08em}
main{padding:22px 22px 130px}h2{font-size:30px;line-height:1.15;margin-bottom:8px}p.sub{color:#77726a;font-size:15px;line-height:1.5;margin-bottom:22px}
.card{background:#fff;border:1px solid #e6e1da;border-radius:16px;overflow:hidden;margin-bottom:16px}.card img{width:100%;height:190px;object-fit:cover;display:block}
.card .b{padding:16px}.card h3{font-size:21px}.card p{font-size:14px;color:#77726a;margin-top:6px;line-height:1.45}
.sel{border:2px solid #2b2a28}.tag{display:inline-block;font-size:11px;background:#f1ede7;padding:4px 9px;border-radius:20px;margin-top:10px}
.sticky{position:fixed;bottom:0;left:0;right:0;padding:14px 22px 26px;background:linear-gradient(transparent,#faf8f5 30%)}
.btn{display:block;text-align:center;background:#2b2a28;color:#fff;padding:17px;border-radius:40px;font-size:16px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:14px}.cal b{font-size:11px;color:#a29c93;font-weight:500}
.cal span{padding:10px 0;border-radius:50%}.o{background:#fff;border:1px solid #d8d2c9}.x{color:#cfc9c0;text-decoration:line-through}.s{background:#2b2a28;color:#fff}
.seg{display:flex;background:#efebe5;border-radius:30px;padding:4px;margin:10px 0 16px}.seg div{flex:1;text-align:center;padding:10px;border-radius:26px;font-size:14px}.seg .on{background:#fff;box-shadow:0 1px 3px #0002}
label{display:block;font-size:12px;color:#8a857d;margin:14px 0 6px;letter-spacing:.04em}.f{background:#fff;border:1px solid #e0dad1;border-radius:12px;padding:14px;font-size:15px;color:#b3ada4}
.row{display:flex;gap:8px}.row>div{flex:1}.note{font-size:13px;color:#77726a;background:#f1ede7;border-radius:12px;padding:12px;margin-top:16px;line-height:1.45}
.chk{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #e6e1da;border-radius:14px;padding:12px;margin-bottom:12px}.chk .im{width:64px;height:64px;border-radius:10px;background:#e3ded6;flex:none;background-size:cover}
.chk .bx{width:22px;height:22px;border:1.5px solid #8a857d;border-radius:6px;margin-left:auto;flex:none}.chk .on{background:#2b2a28;border-color:#2b2a28}.chk h4{font-size:15px;font-weight:600}.chk p{font-size:13px;color:#8a857d}
.hero{height:100vh;height:100svh;min-height:560px;background:url(img/f10.jpg) center/cover;position:relative;color:#fff}.hero .ov{position:absolute;inset:0;background:linear-gradient(#0003,#0008)}
.hero .c{position:absolute;bottom:60px;left:24px;right:24px}.hero h1{font-size:40px;line-height:1.1;margin-bottom:12px}.hero .btn{background:#fff;color:#2b2a28;margin-top:24px}
.li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #e6e1da;font-size:15px;line-height:1.4}.li i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#2b2a28;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
.side{display:none}
@media(min-width:1000px){body{min-height:900px;position:relative}.side{display:block;position:absolute;left:0;top:0;bottom:0;width:46%;background-size:cover;background-position:center}
body.split{padding-left:46%}body.split .top,body.split .prog,body.split main{max-width:640px;margin-left:auto;margin-right:auto}body.split .top{padding:28px 0 18px}
main{padding:36px 0 20px}h2{font-size:44px;margin-bottom:12px}p.sub{font-size:16px;margin-bottom:30px}
.sticky{position:static;padding:8px 0 50px;background:none}body.split .sticky{max-width:640px;margin:0 auto}.sticky .btn{max-width:320px}
.wide .top,.wide .prog,.wide main,.wide .sticky{max-width:1180px;margin-left:auto;margin-right:auto}.wide .top{padding:28px 0 18px}.wide .sticky .btn{margin:0 auto}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:32px}.card img{height:400px}.card .b{padding:22px}.card h3{font-size:26px}
.chks{display:grid;grid-template-columns:1fr 1fr;gap:14px}.chk{margin:0;flex-direction:column;align-items:flex-start;position:relative;padding:14px}.chk .im{width:100%;height:150px}.chk .bx{position:absolute;top:24px;right:24px;background:#fff}.chk .bx.on{background:#2b2a28}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.grid .full{grid-column:1/3}
.cal span{padding:12px 0}.mtop{display:none}
.hero{height:100vh;height:100svh}.hero .c{left:120px;bottom:120px;max-width:560px}.hero h1{font-size:72px}.hero .btn{display:inline-block;padding:18px 40px}.hero .top{padding:32px 120px}}
.tot{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e6e1da;border-radius:14px;padding:10px 14px;margin-bottom:10px;font-size:13px;color:#77726a}.tot b{font-size:18px;color:#2b2a28;font-weight:600}
.price{font-size:15px;font-weight:600;color:#2b2a28;margin-top:8px}.chk .price{font-size:13px;margin-top:4px}.ph{color:#c0392b;font-weight:700;font-size:11px;letter-spacing:.06em}
.sample{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;background:#fdecc8;color:#8a5a00;padding:3px 7px;border-radius:6px;margin-left:8px;vertical-align:middle}
.sq{display:flex;align-items:center;gap:10px;margin-bottom:22px}.sq .f{flex:1;color:#2b2a28;font-weight:600}
@media(min-width:1000px){.tot{max-width:640px}.wide .tot{margin:0 auto 10px}}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.btn{width:100%;cursor:pointer}.btn[disabled]{opacity:.35;cursor:not-allowed}
.screen{display:none}.screen.on{display:block}
.card{cursor:pointer;text-align:left;width:100%;padding:0}
.cal button{padding:10px 0;border-radius:50%;font-size:14px}.cal button.x{cursor:not-allowed}.cal .e{visibility:hidden}
@media(min-width:1000px){.cal button{padding:12px 0}}
.mnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:600}.mnav button{font-size:22px;padding:0 10px}.mnav button[disabled]{opacity:.2}
.seg button{flex:1;text-align:center;padding:10px;border-radius:26px;font-size:14px}.seg .on{background:#fff;box-shadow:0 1px 3px #0002}
input.f,textarea.f,select.f{width:100%;color:#2b2a28;font:inherit;font-size:16px;outline:none}input.f:focus,textarea.f:focus{border-color:#2b2a28}
textarea.f{min-height:84px;resize:vertical}.sq input.f{font-weight:600}
.chk{cursor:pointer;width:100%;text-align:left}.chk.picked{border:2px solid #2b2a28}
.chk .bx.on::after{content:'';display:block;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(7px,3px) rotate(45deg)}
.hf{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;line-height:1.45;cursor:pointer}.hf input{width:20px;height:20px;flex:none;accent-color:#2b2a28;margin-top:1px}
.err{color:#b03a2e;font-size:13px;margin-top:8px;min-height:1px}
.demo{background:#fdecc8;color:#8a5a00;font-size:12px;font-weight:600;letter-spacing:.04em;text-align:center;padding:8px 14px;position:relative;z-index:5}
.hint{font-size:12px;color:#8a857d;margin-bottom:22px}
.notice{font-size:14px;color:#5f5a52;background:#f1ede7;border-radius:12px;padding:14px;margin-top:18px;line-height:1.5}
.ready h4{font-size:15px;margin:18px 0 6px}.ready ol{padding-left:22px;font-size:14px;line-height:1.55;color:#4a4741}.ready li{margin:4px 0}
.top button{font-size:18px;padding:4px 8px}

.cal button[data-full]{cursor:pointer}.pick{display:inline-block;margin-top:8px;background:#2b2a28;color:#fff;border-radius:30px;padding:8px 16px;font-size:13px}
@media(max-width:999px){main{padding-bottom:230px}}
/* Fix: the empty side panel covered the left half of wide screens and swallowed clicks */
.side{pointer-events:none}
@media(min-width:1000px){body:not(.split) .side{display:none}}
.ready ul{padding-left:20px;font-size:14px;line-height:1.55;color:#4a4741}.ready ul li{margin:6px 0}.ready .rp{font-size:14px;line-height:1.55;color:#4a4741}

/* Step 1: cards disabled until sq ft entered */
.cards.off .card{opacity:.45;cursor:not-allowed}.cards.off .card.sel{border:1px solid #e6e1da}
.sqp{font-size:13px;font-weight:600;color:#8a5a00;background:#fdecc8;border-radius:10px;padding:10px 12px;margin:-10px 0 18px}
/* Desktop: everything on one screen, no page scroll */
@media(min-width:1000px){
 body{min-height:0}
 .screen.on{height:100vh;display:flex;flex-direction:column;overflow:hidden}
 .screen.on>main{flex:1;min-height:0;padding:14px 0 6px}
 h2{font-size:34px;margin-bottom:6px}p.sub{margin-bottom:14px}
 .top,.wide .top,body.split .top{padding:18px 0 12px}
 .sticky,body.split .sticky{padding:6px 0 18px}
 .s1{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start}
 .s1 label{margin-top:0}.sqp{margin:0}
 .cards{gap:20px}.card img{height:clamp(140px,28vh,260px)}.card .b{padding:16px}.card h3{font-size:22px}
 .chk .im{height:clamp(70px,12vh,120px)}.chk{padding:10px}
 .cal{gap:4px}.cal button{padding:clamp(4px,1vh,10px) 0}
 .notice,.note{margin-top:10px;padding:10px 12px}
 label{margin:10px 0 4px}
}
@media(min-width:1000px){.demo:not([hidden]) ~ .screen.on{height:calc(100vh - 31px)}}
@media(min-width:1000px){
 .sticky,body.split .sticky{display:flex;gap:16px;align-items:center;justify-content:center}
 .sticky .tot{margin:0!important;flex:1;max-width:none}.sticky .btn{max-width:240px;flex:none}
 .wide .sticky{justify-content:center}.wide .sticky .tot{max-width:520px}.wide .sticky .btn{margin:0}
 .screen.on>main{overflow:auto}
 .chks{grid-template-columns:repeat(4,1fr);gap:10px}.chks .chk h4{font-size:14px}.chks .chk p{font-size:12px;line-height:1.35}
 .chks .chk .bx{top:16px;right:16px}
 .row .f,.grid .f{padding:10px 12px}textarea.f{min-height:56px}
 .grid label{margin:8px 0 3px}
 .seg{margin:6px 0 8px}.seg button{padding:7px}
 .cal button{padding:clamp(3px,.8vh,10px) 0}
 h2{font-size:32px}
}
@media(min-width:1000px) and (max-height:860px){
 h2{font-size:28px;margin-bottom:4px}p.sub{margin-bottom:8px;font-size:15px}
 .top,.wide .top,body.split .top{padding:12px 0 8px}
 .cal{gap:2px}.cal button{padding:3px 0}.mnav{margin-bottom:6px}
 .notice,.note{margin-top:8px;padding:8px 12px;font-size:13px}
 label{margin:8px 0 3px}.grid label{margin:6px 0 2px}
 .sticky,body.split .sticky{padding:4px 0 12px}
}
@media(min-width:1000px){.sticky .tot{min-width:360px}}

.mini{display:block;font-size:11px;color:#8a857d;margin:0 0 4px}
.cal.loading{opacity:.5}.calload{grid-column:1/8;padding:40px 0;color:#8a857d;font-size:14px}
@media(max-width:999px){.screen[data-s="4"] main{padding-bottom:300px}}