/* Paint is the motion language: surface, light, and spatial continuity. */
.paint-courtyard{width:100%;height:100%;display:block;isolation:isolate}
#wall-reveal{will-change:clip-path}
.finish-experience{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;align-items:center;padding:110px 6%;background:#eee8e1;color:#302a30}
.finish-experience-copy h2{font-family:"General Sans",Arial,sans-serif;font-size:clamp(34px,4vw,58px);line-height:1.12;margin:24px 0;letter-spacing:-.04em}
.finish-experience-copy h2 em{font-family:Gambetta,Georgia,serif;color:#806553}
.finish-experience-copy p{font-size:18px;max-width:440px;margin-bottom:22px}
.finish-experience-copy .finish-disclaimer{font-size:14px;line-height:1.6;color:#655a53;max-width:400px}
.finish-demo{position:relative;height:580px;overflow:hidden;background:#b68b73;--light-x:65%;isolation:isolate}
.finish-material,.finish-sheen{position:absolute;inset:0;overflow:hidden}
.finish-material{background:linear-gradient(115deg,#c29b83,#ac8068 55%,#b58e77)}
.material-arch{position:absolute;inset:15% 23% 0;border-radius:180px 180px 0 0;background:linear-gradient(90deg,#76503d,#ab8068 22%,#c59d83);box-shadow:inset 12px 10px 25px #563b3030,6px 0 0 #d7b297}
.material-plinth{position:absolute;left:14%;right:12%;height:18%;bottom:0;background:linear-gradient(165deg,#cfac91 15%,#a77960 17%);box-shadow:0 -15px 30px #4a302416}
.finish-sheen{clip-path:inset(0 calc(100% - var(--split)) 0 0);background:linear-gradient(105deg,#ffffff05,#e9ba8c21 46%,#41261112);mix-blend-mode:soft-light}
.sheen-light{position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 25%,#fff8e000 35%,#fff8e0dd 42%,#fff9e8 45%,#fff8e022 50%,transparent 65%);transform:translateX(calc((var(--light-x) - 50%) * .4));opacity:.9}
.finish-labels{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;color:#fff;font-size:15px;text-shadow:0 1px 8px #302a3070}
.finish-labels span:first-child{order:2}
.finish-divider{position:absolute;top:0;bottom:106px;left:var(--split);width:1px;background:#fff9;pointer-events:none}
.finish-divider span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#f8f4ee;display:grid;place-items:center;color:#604a3c;font-size:18px;box-shadow:0 3px 20px #302a3020}
.finish-control{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:#382b25db;color:#fff}
.finish-control label{display:block;font-size:16px;margin-bottom:12px}
.finish-control input{width:100%;accent-color:#eee3d7;cursor:ew-resize;height:24px;margin:0}
::view-transition-group(*){animation-duration:650ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:paint-page-out .2s ease both}
::view-transition-new(root){animation:paint-page-in .5s ease both}
@keyframes paint-page-out{to{opacity:0}}
@keyframes paint-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.editorial-swatch .swatch-surface{transition:transform .5s cubic-bezier(.16,1,.3,1),border-radius .5s}
.editorial-swatch:hover .swatch-surface,.editorial-swatch:focus-visible .swatch-surface{transform:translateY(-8px);border-radius:50% 50% 0 0}
.footer-invitation .button{display:inline-flex}
@media(max-width:700px){.finish-experience{grid-template-columns:1fr;gap:32px;padding:65px 6%}.finish-demo{height:440px}.finish-labels{left:16px;right:16px;font-size:14px}.finish-experience-copy h2{font-size:38px}.finish-control{padding:18px}.paint-courtyard{width:100%;height:100%}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.editorial-swatch:hover .swatch-surface,.editorial-swatch:focus-visible .swatch-surface{transform:none;border-radius:0}#wall-reveal{will-change:auto}}

.finish-demo{touch-action:pan-y;cursor:ew-resize}.finish-control{cursor:auto}
/* A colour-first journey, with the palette beside the surface it changes. */
.colour-playground{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:5%;padding:20px 5% 90px;max-width:1600px;margin:auto;align-items:start}
.playground-view{position:sticky;top:100px}.playground-scene{position:relative;overflow:hidden;background:#b9a4ac;border-radius:4px}.playground-scene svg{display:block;width:100%;height:auto;isolation:isolate}
#studio-paint{transition:fill .65s ease,opacity .35s ease}
.before-toggle{position:absolute;right:18px;top:18px;background:#fffdf5;color:#302a30;border-radius:30px;padding:12px 18px;font-size:16px;box-shadow:0 3px 20px #302a3020}
.studio-scene-caption{position:absolute;bottom:0;left:0;right:0;padding:30px 20px 16px;background:linear-gradient(transparent,#201b2466);font-size:14px;color:white}
.studio-current{display:flex;gap:20px;align-items:center;margin-top:26px}.studio-current>span{width:64px;height:64px;border-radius:50%;border:1px solid #302a3020;flex-shrink:0}.studio-current h2{font-size:30px;margin:4px 0;line-height:1.2}.studio-current p{font-size:16px}.playground-view .actions{gap:12px;margin-top:22px}.playground-view .inline-note{margin-top:22px;font-size:14px;max-width:600px}
.studio-palette-heading h2{font-size:32px;margin-bottom:10px}.studio-palette-heading p{font-size:18px;margin-bottom:24px}.playground-palette .field{margin-bottom:18px;font-size:16px}.playground-palette .field input,.playground-palette .field select{font-size:16px;background:#fffdfb}.studio-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px;max-height:550px;overflow:auto;padding:5px 5px 16px;overscroll-behavior:contain}.studio-swatches button{padding:0;text-align:left;font-size:14px;line-height:1.4;align-self:start}.studio-colour{display:block;aspect-ratio:1;border-radius:5px;margin-bottom:8px;border:1px solid #302a3015;transition:transform .2s}.studio-swatches button:hover .studio-colour{transform:translateY(-3px)}.studio-swatches button[aria-pressed=true] .studio-colour{outline:2px solid #302a30;outline-offset:3px}.studio-swatches button[aria-pressed=true]{font-weight:600}.studio-swatches button:focus-visible{outline:2px solid #806553;outline-offset:4px}.playground-palette .results-count{margin:15px 0}.playground-palette #studio-more{margin-top:18px}
.toolbar select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%23302a30' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px;padding-right:48px}.toolbar .search-input,.toolbar select{border-color:#b8b0b7;background-color:#fffdfb;border-radius:8px}.toolbar .text-link{border:0;text-decoration:underline;text-underline-offset:6px;font-weight:400}.edit-footer{flex-wrap:wrap;gap:20px}
@media(max-width:900px){.colour-playground{grid-template-columns:1fr;gap:36px}.playground-view{position:static}.studio-swatches{grid-template-columns:repeat(6,minmax(0,1fr));max-height:440px}}
@media(max-width:600px){.colour-playground{padding:10px 6% 60px}.studio-swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px}.studio-current h2{font-size:26px}.before-toggle{font-size:14px;padding:10px 14px;right:12px;top:12px}.playground-view .button{padding:12px 17px;font-size:15px}}
@media(prefers-reduced-motion:reduce){#studio-paint,.studio-colour{transition:none}.studio-swatches button:hover .studio-colour{transform:none}}
/* A visible colour transformation replaces the ambiguous finish simulation. */
.finish-demo{height:570px}.finish-material{bottom:106px;background:url('/assets/story-lilac.webp') center/cover no-repeat}.finish-sheen{bottom:106px;mix-blend-mode:normal;background:none}.finish-sheen svg{width:100%;height:100%;display:block;isolation:isolate}.finish-labels{top:20px}.finish-labels span{background:#302a30c9;padding:8px 12px;border-radius:4px;font-size:14px;text-shadow:none}.finish-control{height:106px}.finish-divider span{font-size:0}.finish-divider span:after{content:'';width:8px;height:16px;border-left:2px solid currentColor;border-right:2px solid currentColor}.repaint-options{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.repaint-options button{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:15px;border:1px solid #b6aaa0;border-radius:30px}.repaint-options button:before{content:'';width:22px;height:22px;border-radius:50%;background:var(--tone)}.repaint-options button[aria-pressed=true]{border-color:#302a30;background:#fffdf5;box-shadow:0 0 0 1px #302a30}#compare-colour{transition:fill .4s ease}
.footer .colour-invitation{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:6%;text-align:left;padding:30px 0 85px}.colour-invitation h2{font-size:clamp(36px,4.4vw,62px);margin:24px 0}.footer .colour-invitation p{font-size:18px;max-width:none;margin:0 0 24px;color:#eee6ec}.footer-colour-fan{display:flex;align-items:center;justify-content:center;min-height:350px;padding:30px 20px}.footer .footer-colour-fan a{background:var(--card);color:#221e22;flex:1;min-width:0;height:270px;max-width:180px;padding:22px 18px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(var(--tilt));transform-origin:center 85%;border:6px solid #f9f5ef;box-shadow:0 10px 30px #0003;margin:0 -10px;transition:transform .35s ease}.footer-colour-fan a:hover,.footer-colour-fan a:focus-visible{transform:translateY(-20px) rotate(0deg);z-index:2}.footer-colour-fan span{font-size:14px;line-height:1.5}.footer-colour-fan strong{font-size:22px;line-height:1.15;font-weight:400}.footer-top{padding-top:38px}
@media(max-width:900px){.footer .colour-invitation{grid-template-columns:1fr}.footer-colour-fan{max-width:550px;min-height:300px;margin-top:20px}.footer .footer-colour-fan a{height:230px}.finish-demo{height:480px}}
@media(max-width:600px){.finish-demo{height:420px}.finish-labels{left:10px;right:10px}.finish-labels span{font-size:12px;padding:7px 9px}.footer .colour-invitation{padding-bottom:40px}.footer-colour-fan{padding:20px 10px}.footer .footer-colour-fan a{height:210px;padding:14px 10px;border-width:4px}.footer-colour-fan strong{font-size:18px}.footer-colour-fan span{font-size:13px}}
@media(prefers-reduced-motion:reduce){#compare-colour,.footer .footer-colour-fan a{transition:none}.footer-colour-fan a:hover,.footer-colour-fan a:focus-visible{transform:rotate(var(--tilt))}}
@media(max-width:600px){.colour-playground{gap:20px}.playground-view{display:contents}.playground-scene{position:sticky;top:64px;z-index:8;height:225px;box-shadow:0 8px 20px #302a3020}.playground-scene svg{height:100%;width:100%;background:#b19bab}.studio-current{margin-top:0}.playground-view .actions{margin-top:0}.playground-view .inline-note{margin-top:0}.playground-palette{padding-top:10px}.studio-swatches{max-height:none;overflow:visible}}
[hidden]{display:none!important}
@media(max-width:600px){.footer-colour-fan{padding:28px 24px;min-width:0}.footer .footer-colour-fan a{margin:0 -6px}.colour-invitation>div{min-width:0}}