@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
:root{--ink:#1d272a;--paper:#f0ede5;--blue:#1d5b9c;--coral:#dc704c;--line:#b8bcb7}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Zen Kaku Gothic New',sans-serif;line-height:1.7;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit}img{display:block;max-width:100%}.skip{position:absolute;left:-9999px;top:8px;background:#fff;padding:8px;z-index:100}.skip:focus{left:8px}.demo-banner{background:var(--ink);color:#fff;text-align:center;padding:6px 16px;font-size:10px;line-height:1.6}
.header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 4vw;border-bottom:2px solid var(--ink)}.brand{display:flex;align-items:center;gap:13px;font-size:21px;font-weight:900;text-decoration:none}.brand-mark{display:grid;place-items:center;width:43px;height:43px;background:var(--blue);color:#fff;font:400 19px/1 'Archivo Black',sans-serif}.brand small{display:block;font:700 9px/1.3 'Zen Kaku Gothic New',sans-serif;letter-spacing:.13em;color:var(--blue)}nav{display:flex;gap:30px;align-items:center}nav a{font-size:12px;font-weight:900;text-decoration:none}.back{border:2px solid var(--ink);padding:8px 13px}
.hero{position:relative;min-height:900px;padding:18px 4vw 50px;background:#d9dcd5;overflow:hidden}.hero-index{display:flex;justify-content:space-between;border-top:3px solid var(--ink);padding-top:8px;font:400 12px/1 'Archivo Black',sans-serif;letter-spacing:.08em}.hero-photo{position:absolute;top:85px;left:4vw;width:73%;height:560px;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.06)}.hero-photo>span{position:absolute;left:16px;bottom:16px;background:var(--paper);padding:6px 10px;font-size:10px;font-weight:900}.hero-swatches{position:absolute;top:120px;right:4vw;display:flex;flex-direction:column;gap:0;width:25%;height:480px;transform:skewY(-7deg);box-shadow:15px 15px 0 var(--ink)}.hero-swatches i{display:block;flex:1;border:3px solid var(--ink);border-bottom:0}.hero-swatches i:last-child{border-bottom:3px solid var(--ink)}.hero-swatches i:nth-child(1){background:#e9e1d0}.hero-swatches i:nth-child(2){background:#abb7a8}.hero-swatches i:nth-child(3){background:#5d6969}.hero-swatches i:nth-child(4){background:#bd7658}.hero-swatches i:nth-child(5){background:#315f89}.hero-copy{position:relative;z-index:1;max-width:1000px;margin:485px 0 0 0;padding:24px 0}.hero h1{margin:0;font-size:clamp(72px,10vw,155px);line-height:1.05;letter-spacing:-.12em;font-weight:900}.hero h1 strong{display:inline-block;padding:0 20px 12px 0;background:var(--paper);box-shadow:20px 0 0 var(--paper)}.hero-copy>p{max-width:630px;margin:24px 0 0;font-size:15px;font-weight:700}.hero-copy a{display:inline-flex;gap:70px;justify-content:space-between;margin-top:24px;padding:13px 19px;background:var(--blue);color:#fff;text-decoration:none;font-weight:900}.hero-copy small{display:block;margin-top:12px;font-size:11px}.hero-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:2px solid var(--ink);padding-top:10px;font:400 11px/1.2 'Archivo Black',sans-serif}
.idea{display:grid;grid-template-columns:11% 40% 49%;min-height:650px;background:#2b3436;color:#fff}.idea-side{display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #87908c;padding:45px 15px 45px 3vw;font:400 16px/1 'Archivo Black',sans-serif}.idea-side span:last-child{writing-mode:vertical-rl}.idea-content{padding:95px 5vw 80px}.kicker{margin:0;font:400 12px/1.3 'Archivo Black',sans-serif;letter-spacing:.08em}.idea h2{margin:28px 0;font-size:clamp(46px,5vw,78px);line-height:1.2;letter-spacing:-.09em}.idea-content>p:last-child{max-width:440px;font-size:13px;color:#d0d4d0}.idea-photo{position:relative;align-self:stretch;overflow:hidden}.idea-photo img{width:100%;height:100%;object-fit:cover}.idea-photo span{position:absolute;left:20px;bottom:20px;background:var(--coral);padding:6px 13px;font:400 11px/1 'Archivo Black',sans-serif}
.try{padding:110px 4vw 130px;background:var(--paper)}.try-head{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:25px;align-items:end;max-width:1400px;margin:auto auto 45px;border-top:3px solid var(--ink);padding-top:10px}.try-head>span{font:400 13px/1.3 'Archivo Black',sans-serif}.try h2{margin:0;font-size:clamp(70px,8vw,130px);line-height:.95;letter-spacing:-.1em}.try h2 em{font-style:normal;color:var(--blue)}.try-head p{margin:0;font-size:13px}.workspace{max-width:1400px;margin:auto;border:3px solid var(--ink)}.controls{display:grid;grid-template-columns:repeat(3,1fr);background:#dfe2dc;border-bottom:3px solid var(--ink)}.group{padding:25px 2vw;border-right:2px solid var(--ink)}.group:last-of-type{border:0}.group>span{font:400 11px/1 'Archivo Black',sans-serif;color:var(--blue)}.group h3{margin:8px 0 17px;font-size:23px;font-weight:900}.options{display:flex;flex-wrap:wrap;gap:7px}.option{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);background:var(--paper);padding:7px 10px;font-size:12px;font-weight:900}.option.active,.option:hover{background:var(--ink);color:#fff}.swatch{display:block;width:20px;height:20px;border:1px solid #777}.swatch.ivory{background:#f0e9d7}.swatch.sage{background:#a7b3a0}.swatch.charcoal{background:#5b6060}.guard{grid-column:1/-1;margin:0;border-top:2px solid var(--ink);padding:9px 2vw;font-size:11px}.result{display:grid;grid-template-columns:1.5fr .5fr}.result-stage{position:relative;min-width:0;padding:35px 4vw;background:#d3d8d2}.scene{--wall:#f0e9d7;--trim:#647b83;position:relative;display:grid;place-items:center;height:520px;overflow:hidden;background:linear-gradient(#cad7d3,#edf0e9 78%,#a6b4a4 78%)}.scene.wall-sage{--wall:#a7b3a0}.scene.wall-charcoal{--wall:#5b6060}.scene.trim-brown{--trim:#886a52}.scene.trim-white{--trim:#f7f5ea}.sun{position:absolute;right:10%;top:10%;width:80px;height:80px;background:#f7e2b9;border-radius:50%}.cloud{position:absolute;left:8%;top:17%;width:120px;height:25px;border-radius:30px;background:#fffd;box-shadow:30px -12px 0 5px #fffd}.ground{position:absolute;bottom:0;width:100%;height:22%;background:#90a091}.house{position:relative;z-index:1;width:min(58%,400px);height:58%;margin-top:70px}.roof{position:absolute;top:0;left:-7%;width:114%;height:35%;background:#484d4e;clip-path:polygon(0 100%,50% 0,100% 100%)}.house-body{position:absolute;left:4%;right:4%;bottom:0;height:70%;background:var(--wall);border:8px solid var(--trim);box-shadow:10px 15px 0 #0002;transition:background .35s,border-color .35s}.window{position:absolute;top:22%;width:23%;height:34%;background:#8da8ad;border:7px solid var(--trim);transition:border-color .35s}.window.left{left:11%}.window.right{right:11%}.window i{display:block;width:50%;height:100%;border-right:2px solid var(--trim)}.door{position:absolute;bottom:0;left:40%;width:20%;height:54%;background:#846f5c;border:7px solid var(--trim);border-bottom:0;transition:border-color .35s}.scene.focus-entry .door{outline:5px solid var(--coral);outline-offset:6px}.scene.focus-windows .window{outline:5px solid var(--coral);outline-offset:6px}.scene>span{position:absolute;bottom:15px;left:20px;z-index:2;font:400 10px/1 'Archivo Black',sans-serif}.stage-ruler{padding:9px 5px 0;font:400 12px/1 'Archivo Black',sans-serif;letter-spacing:.12em}.result-copy{padding:35px 2vw;background:var(--blue);color:#fff}.result-copy h3{margin:15px 0 30px;font-size:clamp(23px,2.5vw,35px);line-height:1.2}.result-copy dl{margin:0}.result-copy dl div{border-top:2px solid #ffffff8a;padding:13px 0}.result-copy dt{font-size:11px}.result-copy dd{margin:0;font-size:22px;font-weight:900}.reset{margin:30px 0 20px;border:2px solid #fff;background:transparent;color:#fff;padding:8px 12px;font-size:12px;font-weight:900}.result-copy small{display:block;font-size:10px}.option:focus-visible,.reset:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.closing{padding:95px 4vw;background:var(--coral);color:var(--ink)}.closing>span{font:400 13px/1 'Archivo Black',sans-serif}.closing h2{margin:25px 0;font-size:clamp(70px,10vw,160px);line-height:1.05;letter-spacing:-.1em}.closing>div{display:flex;justify-content:space-between;align-items:end;gap:30px}.closing p{max-width:440px;font-size:13px}.closing a{display:inline-block;padding:12px 20px;background:var(--ink);color:#fff;text-decoration:none;font-weight:900;white-space:nowrap}footer{display:flex;justify-content:space-between;gap:20px;padding:25px 4vw;background:var(--ink);color:#fff;font-size:11px}footer a{text-decoration:none}
@media(max-width:1000px){.hero{min-height:780px}.hero-photo{height:490px}.hero-swatches{height:400px}.hero-copy{margin-top:440px}.idea{grid-template-columns:8% 46% 46%}.idea-content{padding:75px 3vw}.try-head{grid-template-columns:1fr 1.6fr}.try-head p{grid-column:2}.result{grid-template-columns:1.3fr .7fr}.scene{height:420px}}
@media(max-width:760px){nav a:not(.back){display:none}.hero{min-height:0}.hero-photo{position:relative;left:auto;top:auto;width:80%;height:400px;margin:50px 0 0 0}.hero-swatches{top:130px;width:27%;height:320px}.hero-copy{margin:0;padding:20px 0 30px}.hero h1{font-size:clamp(70px,11vw,95px)}.idea{grid-template-columns:9% 91%}.idea-side{grid-row:1/3}.idea-content{padding:75px 6vw}.idea-photo{grid-column:2;height:420px}.try{padding:80px 4vw}.try-head{grid-template-columns:1fr}.try-head p{grid-column:1}.controls{grid-template-columns:1fr 1fr}.group:nth-child(2){border-right:0}.group:nth-child(3){grid-column:1/-1;border-top:2px solid var(--ink)}.result{grid-template-columns:1fr}.result-copy{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-copy dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reset{margin:10px 0}.result-copy small{align-self:center}.closing>div{display:block}.closing a{margin-top:10px}}
@media(max-width:480px){.demo-banner{font-size:9px}.header{padding:12px 5vw}.brand{font-size:17px}.brand small{font-size:7px}.brand-mark{width:34px;height:34px;font-size:15px}.back{font-size:10px!important}.hero{padding:15px 5vw 40px}.hero-index{font-size:9px}.hero-photo{width:84%;height:270px;margin-top:45px}.hero-swatches{top:105px;width:26%;height:235px;right:4vw;box-shadow:7px 7px 0 var(--ink)}.hero-copy{padding:15px 0}.hero h1{font-size:clamp(51px,14vw,70px)}.hero-copy>p{font-size:12px}.hero-foot{grid-template-columns:1fr;font-size:9px}.idea{grid-template-columns:8% 92%}.idea-side{padding:30px 5px;font-size:11px}.idea-content{padding:60px 5vw}.idea h2{font-size:clamp(42px,11vw,65px)}.idea-photo{height:280px}.try{padding:70px 5vw}.try h2{font-size:clamp(58px,15vw,80px)}.controls{grid-template-columns:1fr}.group{padding:20px;border:0;border-bottom:2px solid var(--ink)}.group:nth-child(3){grid-column:auto;border-top:0}.guard{padding:10px 20px}.result-stage{padding:20px}.scene{height:270px}.house{margin-top:35px;width:68%}.house-body{border-width:4px}.window,.door{border-width:4px}.result-copy{display:block;padding:25px 20px}.result-copy dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.result-copy dd{font-size:15px}.closing{padding:65px 5vw}.closing h2{font-size:clamp(55px,14vw,80px)}footer{flex-direction:column;padding:25px 5vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Work photography and a vertical trade title lead this edition. */
.hero{min-height:0;padding:18px 4vw 50px;background:var(--paper)}
.hero-photo{position:relative;top:auto;left:auto;width:100%;height:620px;margin-top:18px}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.hero-photo>span{left:auto;right:15px;bottom:15px;background:var(--ink);color:#fff}
.hero-copy{position:absolute;z-index:2;top:115px;left:7vw;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:9px;max-width:none;margin:0;padding:20px 18px;background:#f0ede5e8;box-shadow:10px 10px 0 var(--blue)}
.hero-overline{margin:0;writing-mode:vertical-rl;font-size:11px;font-weight:900;letter-spacing:.06em}
.hero h1{margin:0;writing-mode:vertical-rl;white-space:nowrap;font-size:clamp(65px,7vw,105px);line-height:1.05;letter-spacing:.03em;color:var(--blue)}
.hero-summary{position:relative;z-index:2;width:min(520px,48%);margin:-140px 1vw 0 auto;padding:25px 28px 27px;background:var(--ink);color:#fff}
.hero-summary p{margin:0 0 15px;font-size:17px;font-weight:700;line-height:1.7}
.hero-summary a{display:flex;justify-content:space-between;gap:20px;padding:11px 14px;background:var(--coral);color:#fff;text-decoration:none;font-size:13px;font-weight:900}
.hero-summary small{display:block;margin-top:10px;font-size:11px}
.hero-foot{margin-top:35px}
@media(max-width:760px){.hero-photo{width:100%;height:480px;margin-top:15px}.hero-copy{top:100px;left:6vw;padding:14px 12px}.hero h1{font-size:clamp(55px,9vw,73px)}.hero-summary{width:86%;margin:-70px 0 0 auto;padding:20px}}
@media(max-width:480px){.hero{padding:14px 5vw 38px}.hero-photo{height:390px;margin-top:12px}.hero-photo img{object-position:62% center}.hero-photo>span{font-size:9px;right:7px;bottom:7px}.hero-copy{top:95px;left:8vw;padding:12px 8px;box-shadow:6px 6px 0 var(--blue)}.hero-overline{font-size:8px}.hero h1{font-size:46px}.hero-summary{width:100%;margin:0;padding:18px}.hero-summary p{font-size:13px}.hero-summary a{font-size:11px}.hero-foot{margin-top:22px}}