*{box-sizing:border-box}html{background:#eae6dd;color:#323233;font-family:Arial,Helvetica,sans-serif}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #685139;outline-offset:6px}#journey{height:510svh}.pin{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;background:#eae5da}header{position:absolute;z-index:4;top:22px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between}header img{width:170px;height:auto}header>span{font-size:10px;letter-spacing:.22em}header button{border:0;border-bottom:1px solid #777066;background:none;padding:12px 0;font-size:12px}.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:none}.scene svg{width:100%;height:100%;display:block;flex-shrink:0}.intro{position:absolute;z-index:2;top:17%;left:20%;right:16%;text-align:center;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.22em;margin:0 0 16px}h1{font:400 clamp(32px,4vw,66px)/1.03 Georgia,serif;letter-spacing:-.045em;margin:0}em{font-weight:400}#instruction{font-size:12px;margin-top:20px}.controls{position:absolute;z-index:4;bottom:0;left:0;right:0;padding:24px 5% 21px;background:linear-gradient(0deg,#eee9df 75%,#eee9df00)}.caption{display:flex;align-items:center;gap:24px;min-height:48px}#number{font-size:10px;letter-spacing:.13em;white-space:nowrap}h2{font:400 23px/1.15 Georgia,serif;margin:0 0 6px}.caption p{font-size:12px;margin:0;line-height:1.5}.caption button{margin-left:auto;background:none;border:0;font-size:19px;padding:12px}.caption button span{font-size:11px;margin-left:8px}input[type=range]{display:block;width:100%;height:20px;margin:12px 0 6px;accent-color:#615642;cursor:ew-resize}nav{display:flex;justify-content:space-between;gap:10px}nav button{font-size:10px;border:0;background:none;padding:8px 0;color:#6f6a61}nav button[aria-current]{color:#272626;text-decoration:underline;text-underline-offset:6px}.loading{position:absolute;z-index:5;left:0;right:0;bottom:210px;text-align:center;font-size:12px}.ready .loading{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}footer{min-height:58svh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:60px 24px}footer p{font:400 clamp(32px,5vw,60px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:15px 0 30px}footer button{background:none;border:0;border-bottom:1px solid;padding:10px 0;font-size:12px}footer small{margin-top:50px;font-size:10px;color:#726c64}.no-js{position:fixed;bottom:0;background:#eee;padding:15px;z-index:10}
@media(max-width:700px){#journey{height:420svh}.pin{min-height:650px}header{top:14px;left:6%;right:6%}header img{width:135px}header>span{display:none}header button{font-size:11px}.intro{top:18%;left:5%;right:5%}h1{font-size:38px}.eyebrow{font-size:9px}#instruction{font-size:11px}.scene{inset:33% -5% 19%;background:none;align-items:center}.scene svg{width:100%;height:auto;min-height:0}.controls{padding:22px 6% 20px;background:linear-gradient(0deg,#eae5da 86%,#eae5da00)}.caption{gap:12px;align-items:start}.caption h2{font-size:21px}.caption p{font-size:11px;max-width:240px}.caption button{padding:2px 0 8px 8px}.caption button span{display:none}nav{gap:9px}nav button{font-size:9px;line-height:1.4;text-align:left;max-width:75px}.loading{bottom:225px}}
@media(prefers-reduced-motion:reduce){#journey{height:100svh}.pin{position:relative}.intro #instruction{font-size:0}.intro #instruction:after{content:'Explore the transformation using the stage controls.';font-size:12px}}
@media(max-width:700px){h1{font-size:clamp(29px,8.8vw,38px)}}
@media(max-width:700px) and (max-height:720px){.intro{top:16%}.eyebrow{margin-bottom:12px}#instruction{margin-top:14px}.scene{inset:36% -5% 20%}.controls{padding-top:17px}}
/* Full transparent primary mark over the original open scene. */
header{top:18px;left:4%;right:4%;height:auto;padding:0;background:none;color:#323233}
header img{display:block;width:156px;height:auto;padding:0;background:none;border:0}
header>span{color:#323233}
header button{border-bottom-color:#777066;color:#323233}
@media(max-width:700px){header{top:12px;left:6%;right:6%}header img{width:132px;padding:0}}

/* Small logo offset to clear the dark window frame. */
header img{position:relative;left:19px}

/* Fit the complete kitchen above its controls on wide desktop windows.
   Keep the original 3:2 artwork ratio instead of letting SVG slice crop it. */
@media(min-width:701px) and (min-aspect-ratio:3/2){
  .intro{top:14%}
  h1{font-size:clamp(32px,6svh,66px)}
  .scene{align-items:flex-start}
  .scene svg{width:min(100%,calc((100svh - 110px)*1.5));height:auto;aspect-ratio:3/2}
}