/* NOGALES / Color Studio: hands-on concept experience for the sales demo.
   All rooms are stylized CSS renderings, never represented as official Dunn-Edwards previews. */
.color-section{background:#f8f8f6}
.studio-visual{display:flex;flex-direction:column;height:auto!important;min-height:0!important;overflow:hidden;background:#f0efeb;border:1px solid #dadbd6;position:relative;box-shadow:0 18px 50px #1b24200b;isolation:isolate}
.studio-toolbar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 18px;background:#fff;border-bottom:1px solid #e1e2de}
.studio-microheading{font:800 10px "Manrope",sans-serif;letter-spacing:.12em;color:#7a7f77}
.studio-scene-tabs{display:flex;gap:3px;background:#f5f5f3;padding:3px;border:1px solid #e6e6e2}
.studio-tab{background:none;border:0;padding:8px 11px;color:#81857d;font:800 10px "DM Sans",sans-serif;border-radius:1px}
.studio-tab:hover{color:#2e3630;background:#ecefe9}
.studio-tab.active{background:#242824;color:#fff}
.studio-compare{position:relative;height:clamp(285px,33vw,490px);width:100%;--neutral:#d7d3c9;--reveal:58%;touch-action:pan-y;overflow:hidden;background:#c8beb0}
.studio-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.studio-layer-before{--wall-paint:var(--neutral);z-index:1}
.studio-layer-after{--wall-paint:var(--chosen-color,#b87959);z-index:2;clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.studio-split-line{position:absolute;z-index:3;left:var(--reveal);top:0;bottom:0;border-left:2px solid #fff;filter:drop-shadow(0 2px 4px #0006);pointer-events:none}
.studio-handle{position:absolute;left:-23px;top:50%;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#242824;box-shadow:0 5px 18px #0003;font:800 23px "Manrope",sans-serif}
.studio-before-label,.studio-after-label{position:absolute;z-index:4;top:18px;letter-spacing:.14em;padding:8px 12px;background:#fffdf4e5;box-shadow:0 2px 9px #14120f13;color:#222a23;font:800 9px "Manrope",sans-serif;pointer-events:none}
.studio-before-label{right:18px}.studio-after-label{left:18px}
.studio-scrubber{cursor:col-resize;position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;margin:0;touch-action:pan-y}
.studio-scrubber:focus-visible{outline:3px solid #ed2135;outline-offset:-6px;opacity:.04}
.studio-bottom{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:12px 19px;background:#fff;border-top:1px solid #dedfd9}
.studio-instruction{display:flex;align-items:center;gap:10px;font:600 11px "DM Sans",sans-serif;color:#777d75}
.studio-instruction-icon{font:800 22px "Manrope",sans-serif;color:#b5b9af}
.studio-quote-action{display:flex;align-items:center;gap:13px;padding:9px 12px;background:#252b26;color:#fff;border:0;font:800 11px "Manrope",sans-serif;min-height:42px;white-space:nowrap}
.studio-quote-action:hover{background:#ed2135}
.studio-disclaimer{margin:0!important;background:#f4f3ef;padding:9px 19px 13px;max-width:none!important;color:#80847d!important;font:500 10px/1.5 "DM Sans",sans-serif!important}
.studio-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.studio-scene span{display:block;position:absolute;box-sizing:border-box}
.studio-wall{inset:0 0 25%;background:linear-gradient(120deg,#ffffff2d 0%,transparent 45%,#00000014 100%),var(--wall-paint);transition:background .28s}
.studio-floor{inset:70% 0 0;background:linear-gradient(5deg,#938575,#bcb1a4 70%,#e5dbcd);border-top:11px solid #b3a597}
.studio-window{width:27%;height:49%;left:65%;top:11%;background:linear-gradient(140deg,#c1d5d9,#dce5e2 50%,#849da0);border:13px solid #f1e9da;box-shadow:7px 7px 25px #2a29202c}
.studio-window:after{content:"";position:absolute;top:-13px;bottom:-13px;left:49%;border-left:9px solid #eee4d2;pointer-events:none}
.studio-arch{top:13%;left:14%;width:23%;height:54%;background:linear-gradient(140deg,#dad5c7 0%,#abac9d 100%);border-radius:52% 52% 1px 1px;box-shadow:inset 10px 12px 27px #ffffff5c,13px 8px 12px #2822180e}
.studio-art{top:16%;left:20%;width:18%;height:26%;background:linear-gradient(155deg,#bca087 0 45%,#e1d2bd 46% 70%,#837261 72%);border:11px solid #e7e2d7;box-shadow:6px 5px 14px #0002}
.studio-sofa{left:20%;bottom:15%;width:45%;height:23%;background:linear-gradient(0deg,#a39c90,#d1c9b8);border-radius:46px 48px 9px 9px;box-shadow:0 13px 18px #0003;border-bottom:14px solid #9f9487}
.studio-sofa:before{content:"";position:absolute;left:3%;top:-18%;width:48%;height:99%;background:linear-gradient(#d4cdbc,#c6bba9);border-radius:36px 38px 9px 9px}
.studio-sofa:after{content:"";position:absolute;right:3%;top:-18%;width:48%;height:99%;background:linear-gradient(#d4cbbc,#c4b7a6);border-radius:36px 38px 9px 9px}
.studio-table{bottom:8%;left:56%;width:29%;height:13%;border-radius:50% 50% 3px 3px;background:#927a64;border-bottom:12px solid #71543c;box-shadow:0 7px 17px #38251b42}
.studio-plant{right:5%;bottom:18%;height:31%;width:5px;background:#637760;transform:rotate(-6deg)}
.studio-plant:before{content:"";position:absolute;bottom:47%;left:-24px;width:45px;height:65px;border-radius:50% 30% 50% 20%;background:#5f7657;transform:rotate(-25deg)}
.studio-plant:after{content:"";position:absolute;bottom:62%;left:-3px;width:47px;height:69px;border-radius:30% 70% 22% 66%;background:#748767;transform:rotate(32deg)}
.studio-sign{display:none}
.studio-roof{display:none}
.studio-counter{display:none}
.studio-awning{display:none}
.studio-scene.scene-exterior{background:#a8c0bf}
.scene-exterior .studio-wall{inset:18% 10% 20% 10%;box-shadow:20px 17px 26px #252f291e;border-left:11px solid #ebe5d9}
.scene-exterior .studio-floor{inset:78% 0 0;background:linear-gradient(#b5a894 0 21%,#718067 22% 100%);border-top:0}
.scene-exterior .studio-roof{display:block;left:4%;right:5%;top:10%;height:11%;background:linear-gradient(135deg,#514f49,#77736b);transform:skewX(-15deg);box-shadow:7px 7px 18px #1a231729}
.scene-exterior .studio-window{width:18%;height:29%;left:18%;top:35%;border:9px solid #f0ebe5;background:linear-gradient(155deg,#6e8d91,#b5cbd0)}
.scene-exterior .studio-arch{left:64%;top:34%;width:18%;height:46%;border-radius:46% 46% 0 0;background:linear-gradient(135deg,#413e38,#6e6e61);border:9px solid #e7e2d7;z-index:1}
.scene-exterior .studio-sofa,.scene-exterior .studio-art,.scene-exterior .studio-table{display:none}
.scene-exterior .studio-plant{bottom:7%;right:15%;width:10px;height:35%}
.scene-exterior .studio-plant:before{width:60px;height:82px;left:-37px;background:#526f4c}
.scene-exterior .studio-plant:after{width:66px;height:78px;left:7px;background:#708462}
.scene-exterior .studio-sign{display:block;left:38%;top:35%;width:17%;height:9%;background:#373b33;border-bottom:3px solid #ed2135;box-shadow:1px 3px 9px #2224}
.scene-exterior .studio-sign:after{content:"NPS";display:grid;place-items:center;color:#fff;inset:0;position:absolute;font:800 clamp(13px,3vw,25px) "Manrope",sans-serif;letter-spacing:.07em}
.studio-scene.scene-commercial{background:#b7b7ae}
.scene-commercial .studio-wall{background:linear-gradient(120deg,#ffffff1e,transparent 72%),var(--wall-paint);inset:0 0 31%}
.scene-commercial .studio-floor{inset:71% 0 0;background:repeating-linear-gradient(5deg,#c6bba9 0 39px,#bdb19e 40px 41px);border-top:5px solid #6a6259}
.scene-commercial .studio-window{left:8%;top:5%;width:25%;height:55%;border:9px solid #eee6db;background:linear-gradient(125deg,#c8dbd8,#8eaba5)}
.scene-commercial .studio-arch{display:none}
.scene-commercial .studio-roof{display:none}
.scene-commercial .studio-sofa{display:none}
.scene-commercial .studio-table{display:none}
.scene-commercial .studio-plant{right:9%;bottom:19%;width:9px;height:24%}
.scene-commercial .studio-art{left:55%;top:18%;width:22%;height:17%;border:7px solid #272a25;background:#f4f0e7}
.scene-commercial .studio-art:after{position:absolute;content:"NPS";inset:0;display:grid;place-items:center;font:800 clamp(14px,3vw,27px) "Manrope",sans-serif;color:#242925}
.scene-commercial .studio-counter{display:block;left:23%;right:15%;bottom:15%;height:28%;background:linear-gradient(135deg,#c9aa88,#947357);border-top:17px solid #494e48;box-shadow:13px 15px 15px #201b1438}
.scene-commercial .studio-awning{display:block;left:40%;right:15%;top:39%;height:8%;background:linear-gradient(#474740,#393b35);box-shadow:0 14px 7px #1a1a1622}
.scene-commercial .studio-sign{display:block;left:42%;right:18%;top:51%;height:12%;background:repeating-linear-gradient(90deg,#e6dbcb 0 10%,#8f9c8f 10% 20%,#d6bca3 20% 30%);border-bottom:3px solid #333}
.demo-guide{position:fixed;z-index:139;bottom:18px;left:18px;width:min(350px,calc(100vw - 36px));background:#181b19;color:#fff;box-shadow:0 14px 44px #0004;border-top:4px solid #ed2135;animation:guide-enter .4s ease-out}
@keyframes guide-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.demo-guide-head{display:flex;justify-content:space-between;align-items:center;padding:13px 18px 0;gap:10px}
.demo-guide-head>span{font:800 9px "Manrope",sans-serif;letter-spacing:.14em;color:#df7a81}
.demo-guide-head>button{width:27px;height:27px;background:#333936;color:#fff;border:0;font-size:23px;line-height:1}
.demo-guide-body{padding:8px 18px 15px}
.demo-guide-step{font:800 11px "Manrope",sans-serif;color:#c4c6c2}
.demo-guide h3{font:800 19px/1.3 "Manrope",sans-serif;letter-spacing:-.05em;margin:9px 0}
.demo-guide p{font:500 12px/1.65 "DM Sans",sans-serif;color:#c9d0ca;margin:0}
.demo-guide-foot{display:flex;justify-content:space-between;gap:10px;padding:13px 18px;border-top:1px solid #454945}
.demo-guide-foot>button{border:1px solid #6d756f;color:#fff;background:none;padding:9px 13px;font:800 11px "DM Sans",sans-serif}
.demo-guide-foot>button:last-child{background:#ed2135;border-color:#ed2135}
.demo-guide-foot>button:disabled{opacity:.35;cursor:default}
@media(max-width:960px){.studio-scene-tabs{gap:2px}.studio-tab{padding:8px}.studio-microheading{font-size:9px}}
@media(max-width:680px){
 .studio-visual{width:100%;overflow:hidden}
 .studio-toolbar{padding:11px;flex-direction:column;align-items:stretch;gap:9px}
 .studio-scene-tabs{align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .studio-tab{font-size:10px;padding:7px 5px}
 .studio-compare{height:clamp(275px,83vw,400px)}
 .studio-before-label,.studio-after-label{top:12px;font-size:8px;padding:6px 9px}
 .studio-before-label{right:9px}.studio-after-label{left:9px}
 .studio-bottom{padding:11px;align-items:stretch;gap:8px}
 .studio-instruction{font-size:10px}
 .studio-quote-action{font-size:10px;gap:8px;padding:9px}
 .studio-disclaimer{padding:9px 11px 12px;font-size:9px!important}
 .studio-window{border-width:7px}
 .studio-art{border-width:6px}
 .studio-handle{width:38px;height:38px;left:-19px;font-size:20px}
 .demo-guide{left:10px;bottom:10px;width:calc(100vw - 20px)}
}
@media(max-width:370px){.studio-bottom{flex-direction:column;align-items:stretch}.studio-quote-action{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.studio-wall,.demo-guide{animation:none!important;transition:none!important}}