.demo{min-height:660px;font-family:Manrope,Arial,sans-serif;line-height:1.45;overflow:hidden}.demo *{box-sizing:border-box}.demo button{cursor:pointer}.demo-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 34px;border-bottom:1px solid #0002}.demo-nav a,.demo-nav button{background:none;border:0;text-decoration:none;font-size:12px;font-weight:700}.demo-nav-links{display:flex;align-items:center;gap:24px}.demo-nav-links a{text-decoration:none}.demo-cta{display:inline-flex;align-items:center;justify-content:center;background:#253b32!important;color:#fff!important;padding:11px 15px;min-height:40px}.demo-tag{font:600 11px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.demo-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:5%;align-items:center;padding:70px 6% 76px}.demo h3{font-size:clamp(40px,5.3cqi,82px);line-height:1.04;letter-spacing:-.07em;font-weight:600;margin:18px 0 24px}.demo p{font-size:clamp(13px,1.45cqi,17px);max-width:44ch}.demo-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px}.demo-tabs button{border:1px solid #5557;padding:11px 15px;background:transparent;font-size:12px;font-weight:650;min-height:42px}.demo-tabs button[aria-pressed=true]{background:#253b32;color:white;border-color:#253b32}.demo-selection{min-height:64px;margin-top:22px;padding-top:15px;border-top:1px solid #0003;font-size:13px}.demo-selection strong{display:block;margin-bottom:4px}.demo-selection span{opacity:.8}.demo-visual{position:relative;min-height:450px;overflow:hidden}.demo-visual img{width:100%;height:450px;object-fit:cover;display:block}.demo-visual .photo-note{position:absolute;bottom:0;right:0;background:#f3f0e6;color:#27342b;padding:11px 16px;font:600 10px ui-monospace,monospace}.demo-footer{display:flex;justify-content:space-between;padding:18px 34px;border-top:1px solid #0002;font-size:11px;gap:16px}.demo-footer span:last-child{opacity:.7}
.demo-concrete{background:#e9e7dc;color:#253b32}.demo-concrete .demo-name{font:700 24px/1 Georgia,serif;letter-spacing:-.04em}.demo-concrete h3{font-family:Georgia,serif;font-weight:500;letter-spacing:-.055em}.demo-concrete .demo-layout{background:#e9e7dc}.demo-concrete .demo-visual{border:10px solid #f7f6ee}.demo-concrete .demo-visual::before{content:'';position:absolute;width:90%;height:90%;border:1px solid #f7f6ee70;inset:5%;pointer-events:none}.demo-concrete .demo-selection{max-width:410px}
.demo-roofing{background:#162731;color:#f7f3e9}.demo-roofing .demo-nav{border-color:#ffffff30}.demo-roofing .demo-name{font:750 24px/1 Manrope,Arial,sans-serif;letter-spacing:-.06em;text-transform:uppercase}.demo-roofing .demo-name span{color:#ffbd75}.demo-roofing .demo-cta{background:#ffbd75!important;color:#162731!important}.demo-roofing .demo-tag{color:#ffbd75}.demo-roofing h3{font-weight:800;letter-spacing:-.075em}.demo-roofing h3 em{color:#ffbd75;font-style:normal}.demo-roofing .demo-tabs button{border-color:#ffffff6a;color:#fff}.demo-roofing .demo-tabs button[aria-pressed=true]{background:#ffbd75;color:#162731;border-color:#ffbd75}.demo-roofing .demo-selection{border-color:#ffffff45}.demo-roofing .demo-visual{background:#243d49;display:grid;place-items:center;min-height:445px}.roof-art{position:relative;width:80%;height:340px}.roof-art .sun{position:absolute;right:10%;top:8%;height:88px;width:88px;border:1px solid #ffbd7580;border-radius:50%}.roof-art .roof{position:absolute;top:29%;left:10%;width:80%;height:5px;background:#ffbd75;transform:rotate(-25deg);transform-origin:right}.roof-art .roof-right{transform:rotate(25deg);transform-origin:left}.roof-art .house{position:absolute;bottom:0;left:13%;right:13%;height:52%;border:1px solid #9fb0a9;border-top:0;background:repeating-linear-gradient(0deg,#ffffff16 0 1px,transparent 1px 23px)}.roof-art .door{position:absolute;bottom:0;left:44%;width:17%;height:45%;border:1px solid #9fb0a9;background:#1b303b}.roof-art .window{position:absolute;bottom:27%;left:22%;width:14%;height:18%;border:1px solid #9fb0a9}.roof-art .window:last-child{left:auto;right:22%}.roof-art .measure{position:absolute;left:0;bottom:9%;height:1px;width:10%;background:#ffbd75}.roof-art .measure::after{content:'01';position:absolute;top:-20px;font:11px ui-monospace,monospace;color:#ffbd75}.roof-art .ridge{position:absolute;right:0;top:9%;font:10px ui-monospace,monospace;color:#ffbd75;writing-mode:vertical-rl}.demo-roofing .demo-footer{border-color:#ffffff30}
.roof-art .roof{top:32%;left:9%;width:42%}.roof-art .roof-right{left:50%}
@container (max-width:670px){.demo{min-height:0}.demo-nav{padding:15px 18px}.demo-nav-links a{display:none}.demo-nav-links{gap:0}.demo-cta{font-size:10px!important;padding:8px 10px;min-height:35px}.demo-name,.demo-roofing .demo-name{font-size:19px!important}.demo-layout{grid-template-columns:1fr;gap:30px;padding:42px 22px 35px}.demo h3{font-size:clamp(38px,11cqi,65px);margin:15px 0 18px}.demo p{font-size:14px}.demo-visual,.demo-roofing .demo-visual{min-height:0}.demo-visual img{height:260px}.demo-tabs{margin-top:22px}.demo-tabs button{font-size:11px}.roof-art{height:270px}.demo-footer{padding:14px 18px;font-size:9px}.demo-footer span:last-child{display:none}}