/* Distinct materials and surfaces for the illustration and configurator. */
.company-animation{background:linear-gradient(135deg,#f5f6f6,#e4e9ed);border:1px solid #dce2e5}
.flow-topline{color:#697680;font-size:11px}
.flow-topline>span:first-child{color:#3f5362}
.flow-topline>span>i{background:#638ba9;box-shadow:0 0 0 5px #638ba912}
.flow-cycle-label{font-size:8px;color:#77848e}
.flow-controls{border-top-color:#cfd7dd}
.flow-stages>button{color:#85939c}
.flow-stages>button>b{font-size:12px}
.flow-stages>button>span{color:#8b9aa4}
.flow-stages>button[aria-pressed=true]{color:#273e4e}
.flow-stages>button[aria-pressed=true]>b{font-weight:500}
.flow-stage-progress{background:#d3dce2}
.flow-stage-progress:after{background:#4d7898}
.flow-pause{background:#f9fbfc;border-color:#c4cfd7;color:#425f74}
.flow-pause:hover{background:#e3edf4;border-color:#a9c0d1}
.flow-facade{filter:url(#flow-object-shadow)}
.service-detail{background:#fff;border:1px solid #e0e2e4}
.service-detail-image{background:#eceeef}
.service-detail-image img{object-fit:contain;object-position:center}
.service-large-number{color:#83909a;text-shadow:none;font-size:60px}
.service-detail-copy{border-top:1px solid #e4e6e8}
.service-detail-copy>p{color:#687076}
/* The dark drawing board gives the white construction a clear silhouette. */
.calc-visual{background:radial-gradient(ellipse at 45% 38%,#3d5262 0%,#2c3c48 48%,#23313b 100%);border:1px solid #304452;box-shadow:inset 0 1px 0 #ffffff0d}
.calc-visual:before{background-image:linear-gradient(#c4d6e20b 1px,transparent 1px),linear-gradient(90deg,#c4d6e20b 1px,transparent 1px);background-size:32px 32px}
.calc-visual-top{color:#b2c6d5;font-size:9px}
.calc-visual-bottom>span{color:#f1f6f9;font-size:13px}
.calc-visual-bottom small{color:#94adbf;font-size:9px}
.window-model{background:#dfe5e8;border-color:#f3f7f9;box-shadow:0 18px 35px #07121b66,inset 0 0 0 1px #8b9ca8,0 0 0 1px #607886}
.glass{background:linear-gradient(127deg,#ffffff33 0%,#ffffff06 28%,#ffffff33 29%,transparent 30%),linear-gradient(160deg,#76a6bd,#c8e2ec 65%,#86aebd);border-color:#fbfdfe;box-shadow:inset 0 0 0 1px #5c7d8c,0 0 0 1px #a9bcc7}
.glass:before{background:linear-gradient(160deg,#eaf8ff22,transparent 40%,#ffffff16);opacity:1;filter:none}
.open-lines:before,.open-lines:after{background:#466f85}
.open-lines{opacity:.6}
.window-handle{background:linear-gradient(90deg,#8a9caa,#fff);box-shadow:1px 2px 4px #263e5266}
.window-transom{background:linear-gradient(125deg,#a8c9d9,#d2e8f1);border-color:#f4f8fa;box-shadow:0 1px 0 #6f899c}
.door-divider{background:#f3f7fa;box-shadow:0 1px 0 #7f9aaa}
.window-model.laminated{background:#3b454f;border-color:#46535f;box-shadow:0 15px 30px #07121b88,inset 0 0 0 1px #7b91a2,0 0 0 1px #7b91a2}
.dim{color:#c5d7e5}
.dim-width{border-color:#6e9abc}
.dim-width:before,.dim-width:after{border-color:#6e9abc}
.dim-height{border-color:#6e9abc}
/* A white control surface; selected options use graphite and blue. */
.calc-panel{background:#fff;border:1px solid #dfe4e7;border-radius:22px;padding:22px 26px 17px;box-shadow:0 5px 18px #24384705}
.calc-step-tabs{border-color:#e1e6ea;gap:14px;justify-content:space-between;padding-bottom:13px}
.calc-step-tabs button{font-size:11px;gap:8px;padding:6px 10px;border-radius:7px;color:#88959d;transition:background .25s,color .25s}
.calc-step-tabs button>span{font-size:9px;opacity:.8}
.calc-step-tabs button[aria-selected=true]{background:#2c4354;color:#fff;box-shadow:0 3px 8px #233f5212}
.calc-step-tabs button[aria-selected=true]:after{display:none}
.calc-step-tabs button:hover:not([aria-selected=true]){background:#f0f4f7;color:#48677d}
.step-title>span{color:#8a9ba7;font-size:8px}
.step-title h2{color:#293a45}
.config-group h3{color:#7b8b96;font-size:10px}
.config-group button{background:#f7f9fa;border-color:#dce4e9;color:#7d95a6;box-shadow:0 2px 3px #1e344304}
.config-group button:hover{background:#eaf1f6;border-color:#8da9be;box-shadow:0 4px 9px #27455e0c}
.config-group button.selected{background:#e7f0f7;border-color:#557f9f;color:#2b526f;box-shadow:0 0 0 1px #557f9f,0 4px 9px #27455e0c}
.calc-bottom{border-color:#e0e6ea}
.calc-bottom>div>span{color:#7b8b98;font-size:9px}
.calc-bottom output{color:#243c4d;font-weight:500}
.calc-bottom .pill-button{background:#2c4354}
.calc-bottom .pill-button>i{background:#e3edf4;color:#355871}
.calc-bottom .pill-button:hover{background:#385b73}
.calc-note{color:#92a0aa;font-size:8px}
.size-fields label{color:#405867;font-size:11px}
.size-fields label small{color:#8ca0ad;font-size:8px}
.unit-input input{color:#2c485b;border-color:#b7c8d4;background:#f9fbfc;padding:10px 30px 10px 12px;border-radius:6px 6px 0 0}
.unit-input>span{color:#829aaa;right:11px;top:22px}
.size-fields input[type=range]{accent-color:#527f9f}
.profile-fields>label,.option-details>label{color:#8095a3}
.profile-fields select,.option-details select,.option-details input{background:#f7f9fb;border-color:#d8e2e9;color:#466174}
.profile-fields select:focus,.option-details select:focus,.option-details input:focus{border-color:#7299b6;box-shadow:0 0 0 2px #9bbad01a}
.locked-field{background:#f4f7f9;border-color:#d8e2e9;color:#5b7486}
.locked-field svg{color:#93a8b7}
.option-toggle{border-color:#e7edf1;color:#405767}
.option-toggle>small{color:#6386a0}
.switch{background:#d7e1e7}
.option-toggle>input:checked+.switch{background:#527e9d}
.option-toggle>input:focus-visible+.switch{outline-color:#527e9d}
.lamination{border-color:#e4ebf0;color:#405767}
.lamination button{color:#7d93a2;background:#f7f9fb;border-color:#dde6ed}
.lamination button.selected{background:#e6eff6;border-color:#7d9cb4;color:#345976;box-shadow:0 0 0 1px #b3c8d833}
.quote-spec>span{border-color:#e5ebef;color:#8a9ba7}
.quote-spec b{color:#39576b}
.quote-actions .link-button{color:#527791}
@media(max-width:1200px){.calc-panel{padding:19px 20px 15px}.calc-step-tabs{gap:8px}.calc-step-tabs button{font-size:10px;padding:6px 9px;gap:6px}.calc-step-tabs button>span{font-size:8px}.config-group h3{font-size:9px}.calc-note{font-size:7px}.flow-topline{font-size:10px}.flow-stages>button>b{font-size:11px}}
@media(max-width:1000px) and (min-width:851px){.calc-panel{padding:16px}.calc-step-tabs button{font-size:9px;padding:6px 7px;gap:4px}.calc-step-tabs button>span{font-size:7px}.config-grid{gap:18px 13px}.config-group h3{font-size:8px}.config-group button{height:48px}.calc-bottom output{font-size:29px}}
@media(max-height:800px) and (min-width:851px){.calc-panel{padding-top:16px;padding-bottom:13px}.calc-step-tabs{padding-bottom:10px}.calc-step-content{padding-top:16px}.config-grid{gap:17px 21px}.config-group button{height:49px}.step-title{margin-bottom:17px}.config-group h3{margin-bottom:9px}.calc-bottom{padding-top:14px}.calc-note{padding-top:8px;font-size:7px}.service-large-number{font-size:52px}}
@media(max-width:850px){.calc-panel{padding:17px 16px 13px}.calc-step-tabs{gap:5px}.calc-step-tabs button{font-size:8px;padding:6px;gap:4px}.calc-step-tabs button>span{font-size:6px}.calc-visual-top{font-size:7px}.calc-visual-bottom>span{font-size:10px}.calc-visual-bottom small{font-size:8px}.calc-note{font-size:7px}.flow-topline{font-size:10px}.flow-stages>button>b{font-size:10px}}
@media(max-width:580px){.calc-panel{border-radius:17px;padding:18px 15px 14px;min-height:365px}.calc-step-tabs{gap:7px;padding-bottom:12px}.calc-step-tabs button{font-size:9px;gap:5px;padding:6px 7px}.calc-step-tabs button>span{font-size:7px}.calc-step-content{padding-top:18px}.calc-note{font-size:7px}.calc-bottom>div>span{font-size:7px}.calc-bottom output{font-size:31px}.config-group h3{font-size:8px}.config-grid{gap:17px 14px}.config-group button{height:42px}.config-group button svg{width:24px;height:26px}.unit-input input{font-size:28px}.unit-input>span{top:20px}.size-fields label{font-size:9px;flex-direction:column;align-items:flex-start;gap:5px}.size-fields label small{font-size:7px}.step-title>span{font-size:7px}.calc-visual-top{font-size:7px}.calc-visual-bottom>span{font-size:10px}.calc-visual-bottom small{font-size:7px}.flow-topline{font-size:9px}.flow-stages>button>b{font-size:10px}.flow-stages>button>span{font-size:7px}.service-large-number{font-size:44px}.service-detail-image img{object-fit:contain}}
@media(max-width:365px){.calc-step-tabs{gap:4px}.calc-step-tabs button{font-size:8px;padding:6px;gap:3px}.calc-step-tabs button>span{font-size:6px}.calc-panel{padding-inline:12px}.flow-stages{gap:11px}.flow-stages>button>b{font-size:9px}}