*{box-sizing:border-box}html,body{margin:0;background:#e4e0da;color:#242321;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:400}button{font:inherit;color:inherit}button:focus-visible,canvas:focus-visible{outline:2px solid #665640;outline-offset:5px}button{cursor:pointer}button:disabled{cursor:wait}h1,h2,p{margin:0}.configurator{width:100%;aspect-ratio:3/2;min-height:740px;display:grid;grid-template-columns:70% 30%;max-width:1920px;margin:0 auto;container-type:inline-size}.stage{position:relative;min-width:0;background:radial-gradient(ellipse at 52% 43%,#ebe8e3 0%,#dcd8d1 90%)}.brand{position:absolute;left:6%;top:3%;font-size:clamp(18px,1.7cqw,27px);letter-spacing:.5em}.nav{position:absolute;right:13%;top:3.8%;display:flex;gap:3.2cqw;font-size:14px;color:#575550}.intro{position:absolute;top:14.5%;left:6%;right:4%;z-index:1;pointer-events:none}.eyebrow{letter-spacing:.24em;font-size:13px;margin-bottom:8px}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(70px,7.1cqw,126px);line-height:1.08;letter-spacing:-.06em}.subtitle{font-size:clamp(16px,1.42cqw,23px);letter-spacing:.035em;font-weight:300;color:#74716c;margin-top:12px}.viewer{position:absolute;inset:32% 0 14%;min-width:0}.viewer canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}.viewer canvas:active{cursor:grabbing}.loading{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px;font-size:14px;color:#706b64}.loading[hidden]{display:none}.view-controls{position:absolute;bottom:8.2%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;text-align:center;color:#6a6660}.view-controls button{background:none;border:0;padding:6px;font-size:24px;font-weight:300}.degrees{font-size:17px}.drag-hint{display:block;font-size:13px;letter-spacing:.065em;white-space:nowrap}.view-controls .reset{font-size:12px;padding-left:14px;border-left:1px solid #b9b4ab;margin-left:4px}.selection{position:absolute;bottom:5.5%;width:100%;text-align:center;color:#77726b;font-size:12px;letter-spacing:.035em}.tagline{position:absolute;bottom:2.5%;left:6%;font-size:14px;line-height:1.55;letter-spacing:.1em;color:#67635e}.panel{background:#f0ede8;position:relative;min-width:0}.cart{display:flex;justify-content:flex-end;gap:3.5cqw;align-items:center;position:absolute;top:3.7%;right:10.5%;font-size:14px;color:#5c5954}.menu{width:32px;height:10px;border-block:1px solid #4b4844}.panel-body{padding:24% 10% 7%;height:100%;display:flex;flex-direction:column}h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(23px,1.9cqw,33px);line-height:1.22;letter-spacing:-.035em}.lead{font-size:14px;line-height:1.6;color:#716d67;letter-spacing:.02em;margin:9px 0 7.5%}fieldset{padding:7.5% 0 8%;border:0;border-top:1px solid #d8d3cc;margin:0;min-width:0}legend{float:left;width:100%;font-size:18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}legend>span{font-size:14px;color:#6c6761}.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;clear:both}.swatches button{border:0;background:none;padding:0;text-align:left;font-size:14px;line-height:1.4;min-width:0}.swatch{display:block;aspect-ratio:1.4;margin:0 0 10px;border-radius:3px;border:1px solid #d3cec6;position:relative;background-size:cover;background-position:center}.swatches button[aria-pressed=true] .swatch{outline:1px solid #49443e;outline-offset:3px}.swatches button[aria-pressed=true] .swatch:after{content:'✓';position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#faf8f4;color:#36322e;font-size:15px}.swatches button[aria-pressed=true]{color:#171614}.oak{background-image:url('./oak-color.jpg')}.walnut{background-image:url('./walnut-color.jpg');background-color:#947457;background-blend-mode:multiply}.carbon{background-image:linear-gradient(#0009,#0009),url('./carbon-color.jpg');background-size:cover,120px}.black{background:linear-gradient(135deg,#333,#131313)}.white{background:linear-gradient(120deg,#fcfbf9,#e8e5e0)}.chrome{background:linear-gradient(90deg,#8d8c8a,#efeeeb 42%,#aaa9a7 78%,#646462)}.enquiry{margin-top:3.5%;display:flex;justify-content:space-between;align-items:center;background:#252524;color:#eeece8;padding:16px 24px;min-height:58px;font-size:17px;letter-spacing:.03em;cursor:default}.enquiry>span{font-size:27px;line-height:1}.information{border-top:1px solid #d8d3cc;margin-top:6%;padding-top:3%}.information>div{display:flex;align-items:center;gap:17px;padding:12px 0;color:#58544f;font-size:14px}.information p{flex:1}.information small{display:block;margin-top:5px;color:#948e86;font-size:13px}.icon{font-size:26px;width:28px;text-align:center;font-weight:300}.demo-label{font-size:10px;letter-spacing:.15em;color:#8b847b;text-align:center;margin-top:auto;padding-top:20px}
@media(max-width:1150px) and (min-width:801px){.configurator{grid-template-columns:66% 34%;min-height:750px}.panel-body{padding:23% 8% 6%}.nav{right:8%;gap:24px}.swatches{gap:14px}.subtitle{max-width:480px}.view-controls{bottom:9%}.tagline{font-size:12px}.selection{bottom:5.5%}.information>div{padding:10px 0}}
@media(max-width:800px){.configurator{display:block;aspect-ratio:auto;min-height:0}.stage{height:640px}.brand{top:23px;font-size:21px}.nav{display:none}.intro{top:95px}.eyebrow{font-size:12px}h1{font-size:76px}.subtitle{font-size:17px;max-width:400px;line-height:1.6}.viewer{inset:225px 0 110px}.view-controls{bottom:53px}.selection{bottom:24px;font-size:12px}.tagline{display:none}.panel-body{padding:36px 7% 28px}.cart{display:none}h2{font-size:29px}.lead{margin:9px 0 25px}.swatches{gap:24px}.swatch{height:85px;aspect-ratio:auto}fieldset{padding:25px 0 29px}.enquiry{margin-top:0}.information{margin-top:25px}.demo-label{padding-top:28px}}
@media(max-width:420px){.stage{height:590px}.intro{top:83px}h1{font-size:63px}.subtitle{font-size:15px;max-width:310px}.viewer{inset:205px 0 100px}.view-controls{gap:7px}.view-controls .reset{padding-left:9px}.panel-body{padding-inline:7%}.swatches{gap:17px}.swatch{height:72px}.swatches button{font-size:13px}h2{font-size:26px}}
/* Compact embed: keep the 3D view and both finish groups together in a narrow column. */
@media(max-width:800px){
 .configurator{display:block;min-height:0;aspect-ratio:auto}
 .stage{height:300px}
 .brand,.nav,.cart,.tagline,.enquiry,.information,.demo-label{display:none}
 .intro{top:18px;left:5%;right:5%}
 .eyebrow{font-size:10px;margin-bottom:3px;letter-spacing:.18em}
 h1{font-size:34px;letter-spacing:-.04em}
 .subtitle{font-size:12px;line-height:1.4;margin-top:5px;max-width:none}
 .viewer{inset:88px 0 49px}
 .view-controls{bottom:12px;gap:10px}
 .view-controls button{font-size:21px;padding:7px;min-width:34px;min-height:34px}
 .view-controls .reset{font-size:11px;padding-left:10px}
 .degrees{font-size:13px}.drag-hint{font-size:10px}
 .selection{display:none}
 .panel-body{padding:17px 5% 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;height:auto}
 h2{grid-column:1/-1;font-size:21px;letter-spacing:-.025em}
 .lead{display:none}
 fieldset{padding:13px 0 0;margin:0;min-width:0}
 legend{font-size:13px;margin-bottom:10px}
 legend>span{font-size:11px}
 .swatches{gap:10px}
 .swatch{height:42px;aspect-ratio:auto;margin-bottom:7px}
 .swatches button{font-size:11px;line-height:1.35}
 .swatches button[aria-pressed=true] .swatch:after{width:16px;height:16px;font-size:11px;right:4px;top:4px}
}
@media(max-width:420px){
 .stage{height:290px}.panel-body{gap:14px 17px}h2{font-size:20px}
 .swatches{gap:8px}.swatches button{font-size:10px}
 legend>span{display:none}.subtitle{font-size:11px}
}