/* MONO Space Preview (/space-preview/). Builds on mono.css (Lumière): same type, hairlines and square buttons. */
.sp{
  --ivory:#F7F4EE;
  --warm:#FBFAF7;
  --soft-stone:#E6DFD4;
  --charcoal:#2B2A27;
  background:var(--white);
}
.sp [hidden]{display:none !important;}
.sp .lbl{margin-bottom:1rem;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:#fff;}
.sp-link{background:none;border:0;padding:0;font:inherit;font-size:15px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--stone);cursor:pointer;}
.sp-link:hover{text-decoration-color:var(--ink);color:var(--ink);}
.sp-err{min-height:1.4em;margin-top:.8rem;font-size:15px;color:#8b2e2e;}
.sp-err:empty{min-height:0;margin:0;}

/* ---------------------------------------------------------------- hero (offer) */
.sp-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:center;padding:clamp(40px,6vw,96px) var(--m) clamp(56px,7vw,120px);}
.sp-hero h1{font-weight:300;font-size:clamp(40px,4.9vw,78px);line-height:1.04;letter-spacing:-.025em;max-width:13ch;}
.sp-hero-copy>p{margin-top:1.6rem;max-width:34rem;color:var(--ink-2);font-size:clamp(17px,1.3vw,19px);}
.sp-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.4rem;}
.sp-hero-copy .sp-hero-note{margin-top:1.2rem;font-size:14px;color:var(--gray);}
.sp-hero-media{margin:0;position:relative;}
.sp-hero-media img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand);}
.sp-hero-media figcaption{margin-top:.9rem;font-size:13px;color:var(--gray);}
.sp-center{justify-content:center;}
.cta-band .sp-hero-btns .btn{margin-top:0;}

/* ---------------------------------------------------------------- offer stack */
.sp-offer{background:var(--ivory);padding:var(--sec) var(--m);}
.sp-offer-head{max-width:880px;}
.sp-offer-list{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,5vw,80px);}
.sp-offer-list li{border-top:1px solid var(--ink);padding-top:1.4rem;}
.sp-n{display:block;font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--gray);}
.sp-offer-list h3{font-size:21px;line-height:1.25;margin:1.1rem 0 .7rem;font-weight:400;}
.sp-offer-list p{font-size:15px;line-height:1.65;color:var(--ink-2);}

/* ---------------------------------------------------------------- configurator */
.spw{padding:var(--sec) var(--m) calc(var(--sec) * .6);scroll-margin-top:var(--nav-h);}
.spw-head{max-width:760px;margin-bottom:clamp(32px,4vw,56px);}
.spw-head p{margin-top:1.2rem;color:var(--ink-2);}
.spw-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.4vw,64px);align-items:start;}
.spw-panel{min-width:0;}

.spw-steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:clamp(28px,3vw,44px);}
.spw-steps button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;border-top:2px solid var(--line);padding:10px 0 0;font:inherit;font-size:13px;color:var(--gray);cursor:pointer;text-align:left;transition:border-color .3s,color .3s;}
.spw-steps button span{font-size:11px;letter-spacing:.12em;font-weight:500;}
.spw-steps button.is-done{border-top-color:var(--stone);color:var(--ink-2);}
.spw-steps button.is-active{border-top-color:var(--ink);color:var(--ink);}
.spw-steps button:disabled{cursor:default;opacity:.7;}

.spw-step{border:0;min-width:0;animation:spIn .45s var(--ease-out) both;}
.spw-step > legend,.spw-legend,.spr-head h3{display:block;width:100%;padding:0;font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.015em;margin-bottom:1.4rem;outline:none;}
.spw-k{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:.8rem;}
.spw-k b{color:var(--ink);font-weight:500;margin-left:.4em;}
.spw-sub{color:var(--ink-2);margin:-.4rem 0 1.4rem;}
.spw-note{font-size:14px;color:var(--gray);margin-top:1rem;}
.spw-step h4{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:2rem 0 1rem;}
@keyframes spIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* choice cards */
.sp-cards{display:grid;gap:12px;}
.sp-cards-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sp-card{position:relative;display:flex;flex-direction:column;cursor:pointer;background:#fff;border:1px solid var(--line);transition:border-color .3s;}
.sp-card input{position:absolute;opacity:0;pointer-events:none;}
.sp-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--sand);transition:transform .8s var(--ease-out);}
.sp-card:hover img{transform:scale(1.03);}
.sp-card{overflow:hidden;}
.sp-card-t{display:block;padding:14px 14px 4px;font-size:17px;font-weight:500;line-height:1.3;}
.sp-card-d{display:block;padding:0 14px 16px;font-size:14px;line-height:1.5;color:var(--gray);}
.sp-card:hover{border-color:var(--stone);}
.sp-card:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.sp-card:has(input:checked)::after{content:"";position:absolute;top:10px;right:10px;width:26px;height:26px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/18px no-repeat;}
.sp-card:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px;}

/* units + dimensions */
.sp-units{display:inline-flex;border:1px solid var(--line);margin-bottom:1.6rem;}
.sp-units label{cursor:pointer;}
.sp-units input{position:absolute;opacity:0;}
.sp-units span{display:block;padding:9px 16px;font-size:14px;color:var(--gray);transition:background .3s,color .3s;}
.sp-units input:checked+span{background:var(--ink);color:#fff;}
.sp-units input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px;}
.sp-measure{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:24px;align-items:start;}
.sp-dim{margin-bottom:1.3rem;}
.sp-dim label{display:block;font-size:15px;font-weight:500;color:var(--ink);}
.sp-dim label small{display:block;font-size:13px;font-weight:400;color:var(--gray);}
.sp-dim-in{display:flex;align-items:baseline;gap:8px;}
.sp-dim-in .fi{width:4.2em;font-size:26px;text-align:left;}
.sp-dim-in .u{font-size:14px;color:var(--gray);margin-right:14px;}
.sp-dim.is-err .fi{border-bottom-color:#8b2e2e;}
.sp-howto{width:100%;height:auto;margin-top:8px;}
.sp-howto .room{fill:none;stroke:var(--stone);stroke-width:1.2;}
.sp-howto .ax path{stroke:var(--stone);stroke-width:1.2;fill:none;transition:stroke .3s;}
.sp-howto .ax text{font-family:var(--f);font-size:9px;letter-spacing:.12em;fill:var(--gray);text-anchor:middle;transition:fill .3s;}
.sp-howto[data-focus="width"] .ax-width path,.sp-howto[data-focus="depth"] .ax-depth path,.sp-howto[data-focus="height"] .ax-height path{stroke:var(--ink);stroke-width:2;}
.sp-howto[data-focus="width"] .ax-width text,.sp-howto[data-focus="depth"] .ax-depth text,.sp-howto[data-focus="height"] .ax-height text{fill:var(--ink);}
#skipDims{margin-top:.6rem;}

/* swatches */
.sp-swatches{display:flex;flex-wrap:wrap;gap:10px 18px;}
.sp-swatches label{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;width:72px;text-align:center;}
.sp-swatches input{position:absolute;opacity:0;}
.sp-swatches i{display:block;width:44px;height:44px;border-radius:50%;background:var(--sw,#eee);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .3s;}
.sp-swatches i.wood{background:repeating-linear-gradient(100deg,#c39c71 0 5px,#b88f63 5px 7px,#caa57c 7px 12px);}
.sp-swatches i.gloss{background:linear-gradient(135deg,#fff 0 35%,var(--sw) 60%,#e7e3dc);}
.sp-swatches i.metal{background:linear-gradient(135deg,#fff 0,var(--sw) 45%,rgba(0,0,0,.25) 100%),var(--sw);}
.sp-swatches span{font-size:13px;line-height:1.3;color:var(--ink-2);}
.sp-swatches input:checked+i{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink);}
.sp-swatches input:focus-visible+i{outline:2px solid var(--ink);outline-offset:4px;}

/* storage tiles */
.sp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.sp-tile{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:background .3s,color .3s,border-color .3s;min-height:128px;}
.sp-tile input{position:absolute;opacity:0;}
.sp-tile svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.4;}
.sp-tile span{font-size:15px;line-height:1.3;font-weight:500;}
.sp-tile:hover{border-color:var(--stone);}
.sp-tile:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink);}
.sp-tile:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px;}
.sp-acc{margin-top:.6rem;}

/* chips */
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;}
.sp-chips label{cursor:pointer;}
.sp-chips input{position:absolute;opacity:0;}
.sp-chips span{display:block;padding:10px 16px;border:1px solid var(--line);font-size:15px;line-height:1.3;background:#fff;transition:background .3s,color .3s,border-color .3s;}
.sp-chips label:hover span{border-color:var(--stone);}
.sp-chips input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink);}
.sp-chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px;}
.sp-chips-lg span{padding:13px 18px;}

/* step navigation */
.spw-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);}
.spw-nav .btn{margin-left:auto;}
.sp-back{background:none;border:0;font:inherit;font-size:15px;font-weight:500;color:var(--ink-2);cursor:pointer;padding:12px 0;}
.sp-back::before{content:"\2190";margin-right:.6em;}
.sp-back:hover{color:var(--ink);}
.spw-nav:has(#spNext[hidden]):has(#spBack[hidden]){display:none;}

/* ---------------------------------------------------------------- stage (3D / drawings) */
.spw-stage{position:sticky;top:calc(var(--nav-h) + 8px);display:flex;flex-direction:column;background:#efebe4;}
.sps-bar{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;pointer-events:none;}
.sps-bar>*{pointer-events:auto;}
.sps-tabs,.sps-views,.sps-walls{display:flex;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.sps-bar button{background:none;border:0;font:inherit;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--gray);padding:9px 13px;cursor:pointer;transition:color .3s,background .3s;}
.sps-bar button:hover{color:var(--ink);}
.sps-tabs [aria-selected="true"],.sps-walls [aria-pressed="true"]{background:var(--ink);color:#fff;}
.sps-tabs [aria-selected="true"]:hover,.sps-walls [aria-pressed="true"]:hover{color:#fff;}
.sps-canvas,.sps-svg{position:relative;height:min(68vh,700px);min-height:420px;}
.sps-canvas[hidden],.sps-svg[hidden]{display:none;}
.sp3d-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
.sp3d-canvas:active{cursor:grabbing;}
.sp3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.sp3d-dim{position:absolute;top:0;left:0;padding:3px 8px;background:rgba(255,255,255,.92);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink);white-space:nowrap;transition:opacity .2s;}
.sps-svg{display:flex;align-items:center;justify-content:center;padding:64px 20px 20px;background:#faf8f4;}
.sps-svg svg{width:100%;height:100%;}
.sps-flag{position:absolute;top:62px;left:12px;z-index:3;padding:6px 10px;background:var(--charcoal);color:#fff;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.sps-pick{min-height:3.2em;padding:14px 18px 0;font-size:14px;line-height:1.5;color:var(--ink-2);background:#fff;}
.sps-legal{padding:6px 18px 16px;font-size:12px;line-height:1.5;color:var(--gray);background:#fff;}

/* ---------------------------------------------------------------- result */
.spr-head p{color:var(--ink-2);}
.spr-specs{margin:1.6rem 0 0;border-top:1px solid var(--line);}
.spr-specs div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);}
.spr-specs dt{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);padding-top:3px;}
.spr-specs dd{font-size:15px;line-height:1.55;}
.spr-omitted{margin-top:1rem;font-size:14px;color:var(--ink-2);background:var(--ivory);padding:12px 14px;}
.spr-budget{margin-top:2rem;padding:clamp(22px,2.4vw,32px);background:var(--ink);color:#fff;}
.spr-budget .lbl{color:#b9b3a8;}
.spr-range{font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1.1;letter-spacing:-.01em;}
.spr-budget-note{margin-top:1rem;font-size:14px;line-height:1.6;color:#d4cfc6;}
.spr-budget.is-guidance{background:var(--ivory);color:var(--ink);}
.spr-budget.is-guidance .lbl{color:var(--gray);}
.spr-budget.is-guidance .spr-range{font-size:clamp(24px,2.2vw,32px);}
.spr-budget.is-guidance .spr-budget-note{color:var(--ink-2);}
.spr-adjust{margin-top:2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0 18px;}
.spr-adjust summary{cursor:pointer;list-style:none;padding:14px 0;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;}
.spr-adjust summary::-webkit-details-marker{display:none;}
.spr-adjust summary::after{content:"+";font-size:18px;font-weight:300;letter-spacing:0;}
.spr-adjust[open] summary::after{content:"\2212";}
.spr-adjust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.spr-adjust-grid label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);}
.spr-adjust-grid .fi{font-size:16px;text-transform:none;letter-spacing:0;padding:8px 1.6rem 10px 0;}
.spr-adjust .sp-chips span{padding:8px 13px;font-size:14px;}
.spr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:2rem;}

/* ---------------------------------------------------------------- lead capture */
.sp-lead-form .ff{margin-bottom:1.6rem;}
.sp-lead-form .ff.is-err .fi{border-bottom-color:#8b2e2e;}
.sp-lead-form .fi{background:transparent;}
.sp-method{border:0;}
.sp-method legend{margin-bottom:.8rem;}
.sp-lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.sp-unlock{width:100%;margin-top:1.4rem;}
.sp-lead-form .form-consent{margin-top:10px;}

.spw-grid{position:relative;}
.spr-thanks{margin-top:1.2rem;padding:14px 16px;background:var(--ivory);font-size:15px;line-height:1.55;color:var(--ink-2);outline:none;}
.spr-thanks:empty{display:none;}
.spr-save{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px;}
.spr-save .sp-err{margin:0;color:var(--ink-2);}
.spr-restart{margin-top:1.6rem;}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* style cards: the visitor's own closet rendered in each style */
.sp-thumb{position:relative;display:block;aspect-ratio:4/3;background:#e9e4dc;overflow:hidden;}
.sp-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);}
.sp-card:hover .sp-thumb img{transform:scale(1.03);}
.sp-thumb-sw{position:absolute;inset:0;background:linear-gradient(135deg,var(--a) 0 62%,var(--b) 62% 70%,var(--a) 70%);opacity:.9;}
.sp-thumb.has-img .sp-thumb-sw{display:none;}

/* step 5: build */
.spb-note{margin:-.4rem 0 1rem;padding:10px 14px;background:var(--ivory);font-size:14px;color:var(--ink-2);}
.spb-walls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.spb-walls button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 14px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;}
.spb-walls button small{font-size:12px;font-weight:400;color:var(--gray);}
.spb-walls [aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.spb-walls [aria-selected="true"] small{color:#c9c4bb;}
.spb-one{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);}
.spb-list{list-style:none;border-top:1px solid var(--line);}
.spb-row{display:grid;grid-template-columns:34px minmax(0,1.4fr) auto auto 30px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);transition:background .25s;}
.spb-row.is-sel{background:var(--ivory);box-shadow:-10px 0 0 var(--ivory),10px 0 0 var(--ivory);}
.spb-n{width:30px;height:30px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;}
.spb-row.is-sel .spb-n{background:var(--ink);border-color:var(--ink);color:#fff;}
.spb-row .fi{font-size:16px;padding:6px 1.6rem 8px 0;}
.spb-width{display:flex;align-items:center;gap:4px;}
.spb-width .fi{width:3.6em;text-align:center;padding:6px 0 8px;}
.spb-width span{font-size:13px;color:var(--gray);margin-right:2px;}
.spb-width button,.spb-x{width:30px;height:30px;border:1px solid var(--line);background:#fff;font:inherit;font-size:18px;line-height:1;cursor:pointer;color:var(--ink);}
.spb-width button:hover,.spb-x:hover{border-color:var(--ink);}
.spb-width button:disabled,.spb-x:disabled{opacity:.35;cursor:default;}
.spb-extra{grid-column:2 / span 3;}
.spb-extra .fi{max-width:11em;}
.spb-info{font-size:14px;color:var(--gray);}
.spb-row:has(.spb-extra) .spb-x{grid-row:1;grid-column:5;}
/* options under a section: drawers and heights, shelves, doors, column depth, move */
.spb-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;}
.spb-opts .fi{max-width:13em;}
.spb-heights{display:inline-flex;align-items:center;gap:6px;}
.spb-heights .fi{width:3.6em;padding-right:1.2rem;}
.spb-check,.spb-depth{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);cursor:pointer;}
.spb-check input{width:18px;height:18px;accent-color:var(--ink);}
.spb-depth .fi{width:3em;text-align:center;padding:6px 0 8px;}
.spb-move{display:inline-flex;gap:4px;margin-left:auto;}
.spb-move button{width:30px;height:30px;border:1px solid var(--line);background:#fff;font:inherit;font-size:18px;line-height:1;cursor:pointer;color:var(--ink);}
.spb-move button:hover{border-color:var(--ink);}
.spb-move button:disabled{opacity:.35;cursor:default;}
.spb-height{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:16px;font-size:14px;color:var(--ink-2);}
.spb-height label{font-weight:500;letter-spacing:.04em;}
.spb-height .fi{width:4.2em;text-align:center;font-size:16px;padding:6px 0 8px;}
.spb-height small{font-size:13px;color:var(--gray);}
.spb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px;}

/* materials and budget on the 3D view */
.sps-mat{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px 0;background:#fff;}
.sps-mat>span{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);}
.sps-dots{display:flex;gap:6px;margin-right:10px;}
.sps-dots button{width:26px;height:26px;border-radius:50%;border:0;background:var(--sw,#eee);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer;transition:box-shadow .25s;}
.sps-dots button.wood{background:repeating-linear-gradient(100deg,#c39c71 0 4px,#b88f63 4px 6px,#caa57c 6px 10px);}
.sps-dots button.gloss{background:linear-gradient(135deg,#fff 0 35%,var(--sw) 60%,#e7e3dc);}
.sps-dots button.metal{background:linear-gradient(135deg,#fff 0,var(--sw) 45%,rgba(0,0,0,.25) 100%),var(--sw);}
.sps-dots button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink);}
.sps-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--ink);color:#fff;}
.sps-price span{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#b9b3a8;}
.sps-price b{font-weight:400;font-size:20px;}

/* the render beside the price */
.spr-render{margin:1.4rem 0 0;}
.spr-render-img{position:relative;background:#e9e4dc;overflow:hidden;}
.spr-render-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.spr-render-tag{position:absolute;left:10px;top:10px;padding:5px 9px;background:rgba(255,255,255,.92);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;}
.spr-render-tag:empty{display:none;}
.spr-render-busy{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(28,27,25,.82);color:#fff;font-size:14px;}
.spr-render-busy span{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spSpin 1s linear infinite;}
@keyframes spSpin{to{transform:rotate(360deg);}}
.spr-render figcaption{margin-top:.6rem;font-size:13px;line-height:1.5;color:var(--gray);}
.spr-render .sp-link{margin-top:.4rem;font-size:14px;}

/* ---------------------------------------------------------------- why custom */
.sp-why{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:center;padding:var(--sec) var(--m);background:var(--ivory);}
.sp-why-media img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand);}
.sp-why dl{margin-top:2.4rem;border-top:1px solid var(--line);}
.sp-why dt{padding-top:1.3rem;font-size:19px;font-weight:500;}
.sp-why dd{padding:.4rem 0 1.3rem;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:16px;}
.sp-faq .stitle{max-width:920px;margin:0 auto 2.4rem;}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .sp-offer-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px;}
  .sp-cards-3{grid-template-columns:1fr;}
  .sp-card{display:grid;grid-template-columns:38% 1fr;grid-template-rows:auto 1fr;}
  .sp-card img{grid-row:1 / span 2;width:100%;height:100%;aspect-ratio:auto;min-height:110px;}
  .sp-card-t{padding:16px 16px 4px;}
  .spr-adjust-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:960px){
  .sp-hero{grid-template-columns:1fr;padding-top:24px;}
  .sp-hero-media{order:-1;}
  .sp-hero-media img{aspect-ratio:16/11;}
  .spw-grid{grid-template-columns:1fr;}
  .spw-stage{position:relative;top:0;order:-1;margin:0 calc(var(--m) * -1);}
  .sps-canvas,.sps-svg{height:min(72vw,460px);min-height:300px;}
  .sps-pick{padding-left:var(--m);padding-right:var(--m);}
  .sps-legal{padding-left:var(--m);padding-right:var(--m);}
  /* Build step on phones: a compact 3D view stays pinned while the list is edited. */
  .spw-grid.is-build .spw-stage{position:sticky;top:62px;z-index:6;}
  .spw-grid.is-build .sps-canvas{height:min(56vw,280px);min-height:220px;}
  .spw-grid.is-build .sps-pick,.spw-grid.is-build .sps-legal,.spw-grid.is-build .sps-views{display:none;}
  .spw-grid.is-build .spw-steps{position:static;}
  .spw-steps{position:sticky;top:62px;z-index:5;background:#fff;padding-top:8px;margin-top:0;}
  .sps-flag{top:calc(max(300px,min(72vw,460px)) - 36px);}
  .sp-why{grid-template-columns:1fr;}
  .sp-why-media img{aspect-ratio:16/11;}
}
@media (max-width:640px){
  .sp-offer-list{grid-template-columns:1fr;}
  .spw-steps button{font-size:0;}
  .spw-steps button span{font-size:11px;}
  .spw-steps button.is-active{font-size:12px;}
  .sp-measure{grid-template-columns:1fr;}
  .sp-howto{max-width:200px;order:-1;}
  .sp-dim-in .fi{font-size:22px;width:3.6em;}
  .sps-bar{top:8px;left:8px;right:8px;}
  .sps-bar button{padding:8px 10px;font-size:12px;}
  .sps-flag{top:calc(max(300px,min(72vw,460px)) - 36px);left:8px;}
  .spr-adjust-grid{grid-template-columns:1fr;}
  .spr-specs div{grid-template-columns:96px minmax(0,1fr);}
  .sp-hero-btns .btn{flex:1 1 100%;}
  .spb-row{grid-template-columns:30px minmax(0,1fr) 30px;row-gap:6px;}
  .spb-kind{grid-column:2;}
  .spb-width{grid-column:2;grid-row:2;}
  .spb-x{grid-column:3;grid-row:1;}
  .spb-extra{grid-column:2;}
  .spb-row:has(.spb-extra) .spb-x{grid-column:3;}
  .sps-mat{padding-left:var(--m);padding-right:var(--m);}
  .spr-cta .btn{flex:1 1 100%;}
  .spw-nav .btn{flex:1;}
}
@media (prefers-reduced-motion:reduce){
  .spw-step{animation:none;}
  .sp-card img{transition:none;}
}