.color-calc{position:relative;z-index:5;padding:28px 24px 16px;background:#f4f7f9;color:#17232f;font-family:inherit;text-align:left;scroll-margin-top:90px}
.color-calc,.color-calc *{box-sizing:border-box}
.color-calc [hidden]{display:none!important}
.color-calc__card{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,.95fr) minmax(480px,1.75fr) minmax(230px,.85fr);align-items:stretch;gap:32px;padding:32px;background:#fff;border:1px solid #e9edf1;border-radius:14px;box-shadow:0 8px 28px #1927310b}
.color-calc p{margin:0}
.color-calc__intro{min-width:0;padding-top:2px}
.color-calc .color-calc__eyebrow{font-size:13px;font-weight:700;line-height:20px;letter-spacing:1.4px;color:#788391;margin-bottom:12px}
.color-calc h2{font-family:inherit;font-size:32px;line-height:1.13;margin:0 0 20px;font-weight:700;letter-spacing:-.6px;color:#111c28}
.color-calc .color-calc__description{font-size:16px;line-height:1.5;color:#75808d;max-width:300px}
.color-calc__work{min-width:0;--work-columns:128px minmax(0,1fr) 128px;--work-gap:20px;--control-height:48px}
/* Identical grid tracks align the switch with its swatch and the input with the colour name. */
.color-calc__form,.color-calc__selection{display:grid;grid-template-columns:var(--work-columns);column-gap:var(--work-gap)}
.color-calc__form{row-gap:16px;align-items:start;margin:0}
.color-calc__systems{border:0;padding:0;margin:0;min-width:0}
.color-calc__systems legend,.color-calc__field label{font-size:16px;line-height:22px;font-weight:600;color:#253140;display:block;margin:0 0 8px;padding:0;border:0;width:auto;white-space:nowrap}
.color-calc__switch{display:flex;overflow:hidden;border-radius:6px;background:#e9edf2;height:var(--control-height);width:100%}
.color-calc__switch button{flex:1;border:0;background:transparent;border-radius:0;color:#586474;font-size:16px;font-weight:700;padding:0;cursor:pointer;min-width:0}
.color-calc__switch button[aria-pressed=true]{background:#273440;color:#fff}
.color-calc__field{position:relative;min-width:0}
.color-calc__input-wrap{position:relative}
.color-calc input{display:block;width:100%;height:var(--control-height);border:1px solid #c6ced8;border-radius:6px;padding:0 32px 0 34px;font-size:16px;line-height:normal;color:#202c35;background:#fff;box-shadow:inset 0 0 0 1px #c6ced822;outline-offset:2px;min-width:0}
.color-calc input::placeholder{color:#8993a0;font-size:14px}
.color-calc input:focus{border-color:#b38630;outline:2px solid #dba74444}
.color-calc__search-icon{position:absolute;left:12px;top:calc(50% - 7px);width:12px;height:12px;border:1.7px solid #8b95a2;border-radius:50%;pointer-events:none}
.color-calc__search-icon:after{content:'';position:absolute;width:6px;height:1.7px;background:#8b95a2;transform:rotate(45deg);right:-4px;bottom:-3px}
.color-calc__clear{position:absolute;right:2px;top:2px;width:30px;height:calc(var(--control-height) - 4px);border:0;border-radius:4px;background:transparent;color:#8993a0;font-size:24px;cursor:pointer}
.color-calc__submit{margin-top:30px;height:var(--control-height);padding:0 12px;border:1px solid #eaa324;border-radius:6px;background:#f5aa22;color:#141f2b;font-size:17px;font-weight:700;cursor:pointer;transition:background .15s}
.color-calc__submit:hover{background:#ffba3e}
.color-calc__submit:disabled{cursor:wait;background:#e8ad42;color:#263440;font-size:15px}
.color-calc__progress{height:5px;margin-top:12px;width:100%;border-radius:3px;background:#e9edf2;overflow:hidden;visibility:hidden}
.color-calc__progress>span{display:block;width:100%;height:100%;background:#f5aa22;transform:scaleX(0);transform-origin:left}
.color-calc__progress.is-running{visibility:visible}
.color-calc__progress.is-running>span{animation:color-calc-wait 5s linear forwards}
@keyframes color-calc-wait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.color-calc__progress.is-running>span{animation-timing-function:steps(5,end)}}
.color-calc button:focus-visible{outline:2px solid #a77616;outline-offset:3px}
.color-calc .color-calc__help{font-size:12px;line-height:16px;color:#7b858d;margin:6px 0 0;min-height:16px}
.color-calc__options{position:absolute;top:calc(30px + var(--control-height) + 4px);left:0;right:0;margin:0!important;padding:5px!important;list-style:none!important;background:#fff;border:1px solid #ccd5da;border-radius:7px;box-shadow:0 8px 22px #20303d26;max-height:240px;overflow:auto;z-index:20}
.color-calc__options li{margin:0;padding:9px 8px;font-size:14px;line-height:20px;cursor:pointer;border-radius:4px;display:flex;gap:9px;align-items:center;color:#26343d}
.color-calc__options li:hover,.color-calc__options li[aria-selected=true]{background:#edf2f4}
.color-calc__mini-swatch{display:inline-block;width:22px;height:22px;border:1px solid #0002;border-radius:4px;flex:0 0 22px;background:#e7eaed}
.color-calc__selection{grid-column:1/-1;align-items:center;min-width:0}
.color-calc__swatch{display:block;width:100%;height:76px;border-radius:6px;border:1px solid #0002;box-shadow:inset 0 0 0 1px #ffffff12}
.color-calc__swatch.is-empty{background:linear-gradient(135deg,#f0f2f4 48%,#dce2e6 49%,#dce2e6 51%,#f0f2f4 52%)}
.color-calc__selection>div{grid-column:2/-1;min-width:0}
.color-calc__selected-code{font-size:25px;font-weight:700;line-height:1.3;display:block;overflow-wrap:anywhere}
.color-calc .color-calc__selected-note{font-size:15px;line-height:1.45;color:#7b858d;margin-top:4px}
.color-calc__result{border-left:1px solid #dce2e9;padding-left:28px;display:flex;flex-direction:column;min-width:0}
.color-calc .color-calc__result-label{font-size:18px;font-weight:600;color:#586473;line-height:24px;margin:0 0 19px}
.color-calc .color-calc__price{font-size:42px;font-weight:700;line-height:1.12;color:#111c28;letter-spacing:-1px;overflow-wrap:anywhere}
.color-calc__price span{font-size:.8em;letter-spacing:-.5px;white-space:nowrap}
.color-calc .color-calc__price.is-unavailable{font-size:24px;line-height:1.3;letter-spacing:0}
.color-calc .color-calc__price-caption{font-size:16px;line-height:1.4;color:#75808d;margin-top:16px}
.color-calc .color-calc__result-note{font-size:12px;line-height:1.5;color:#7b858d;margin-top:8px}
.color-calc .color-calc__disclaimer{max-width:1400px;margin:10px auto 0;text-align:right;font-size:12px;line-height:1.5;color:#78828a}
.color-calc__noscript{text-align:center;padding:12px}
@media(min-width:768px) and (max-width:991px){.site-header__nav-list{flex-wrap:wrap;row-gap:2px!important}}
@media(max-width:1199px){.color-calc__card{grid-template-columns:minmax(190px,.85fr) minmax(420px,1.6fr) minmax(200px,.8fr);gap:24px;padding:26px}.color-calc__work{--work-columns:112px minmax(0,1fr) 112px;--work-gap:16px}.color-calc h2{font-size:28px}.color-calc__systems legend,.color-calc__field label{font-size:14px}.color-calc__submit{font-size:16px}.color-calc__result{padding-left:22px}.color-calc .color-calc__price{font-size:36px}}
@media(max-width:1050px){.color-calc__card{grid-template-columns:minmax(0,1fr) 230px;gap:26px}.color-calc__intro{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;align-items:end}.color-calc .color-calc__eyebrow{grid-column:1;margin:0}.color-calc h2{grid-column:1;margin:0}.color-calc .color-calc__description{grid-column:2;grid-row:1/3;max-width:300px}.color-calc__work{--work-columns:112px minmax(0,1fr);--work-gap:16px}.color-calc__submit{grid-column:2;margin:0;grid-row:2}.color-calc__selection{grid-row:3}.color-calc__result{padding-left:24px}.color-calc__selected-code{font-size:23px}}
@media(max-width:760px){.color-calc{padding:22px 16px 14px}.color-calc__card{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px}.color-calc__intro{display:block}.color-calc .color-calc__eyebrow{margin-bottom:10px}.color-calc h2{font-size:30px;margin-bottom:14px}.color-calc .color-calc__description{max-width:none}.color-calc__work{--work-columns:128px minmax(0,1fr);--work-gap:20px}.color-calc__submit{grid-column:1/-1;grid-row:3}.color-calc__selection{grid-row:2}.color-calc__result{border-left:0;border-top:1px solid #dce2e9;padding:22px 0 0}.color-calc .color-calc__result-label{margin-bottom:12px}.color-calc .color-calc__price{font-size:42px}.color-calc .color-calc__price-caption{margin-top:12px}.color-calc .color-calc__disclaimer{text-align:left}}
@media(max-width:420px){.color-calc{padding:18px 12px 14px}.color-calc__card{padding:22px 16px;gap:22px}.color-calc__work{--work-columns:108px minmax(0,1fr);--work-gap:12px}.color-calc h2{font-size:28px}.color-calc__systems legend,.color-calc__field label{font-size:14px}.color-calc input{padding-left:28px;padding-right:25px}.color-calc input::placeholder{font-size:12px}.color-calc__clear{width:24px}.color-calc__search-icon{left:9px}.color-calc__selected-code{font-size:20px}.color-calc .color-calc__selected-note{font-size:14px}.color-calc__swatch{height:68px}}