@font-face{font-family:Instrument;src:url('instrument-sans.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:ClaimCondensed;src:url('barlow-semi-condensed-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Editorial;src:url('instrument-serif.woff2') format('woff2');font-display:swap}
@font-face{font-family:Editorial;src:url('instrument-serif-italic.woff2') format('woff2');font-style:italic;font-display:swap}
:root{--cream:#f7f4ee;--ink:#1f2320;--green:#244132;--lime:#d2f909;--line:#d6d7cb;--sans:Instrument,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);overflow-x:clip}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #608319;outline-offset:5px}button:active{transform:translateY(1px)}img{max-width:100%;display:block}button.primary,.primary{background:var(--green);color:#fff;border:1px solid var(--green);border-radius:10px;padding:15px 22px;display:inline-flex;justify-content:center;align-items:center;gap:22px;transition:background 140ms,transform 140ms}.primary:hover{background:#3f6b4f}.text-button{padding:12px 0}.text-button span{margin-left:18px}.skip{position:fixed;top:-80px;left:20px;z-index:200;background:var(--lime);padding:16px}.skip:focus{top:12px}header{position:sticky;top:0;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;z-index:40;border-bottom:1px solid #c9cebf88;background:#f7f4eef0;backdrop-filter:blur(16px)}.brand{display:flex;gap:12px;align-items:center;font-size:27px;font-weight:700;letter-spacing:-1.5px}.brand-mark{display:block;width:37px;height:37px;color:var(--green)}.brand-mark svg{width:100%;height:100%}nav,.nav-actions{display:flex;align-items:center;gap:32px;font-size:14px}nav a:hover{text-decoration:underline;text-underline-offset:6px}.nav-actions{gap:24px}.intro{position:relative;padding:44px 5% 20px;max-width:1640px;margin:auto}.eyebrow{font-size:11px;font-weight:500;letter-spacing:2px;display:flex;align-items:center;gap:9px}.eyebrow>span{width:6px;height:6px;background:var(--green);border-radius:50%}h1{font-size:clamp(62px,7.5vw,112px);line-height:.94;letter-spacing:-.067em;font-weight:700;margin:25px 0 24px;position:relative;max-width:1280px}h1 .destination{display:block;width:max-content;margin:12px 0 0 35%;font-size:.52em;line-height:1.05;letter-spacing:-.035em;font-weight:400;color:var(--green);transform:rotate(-3deg);position:relative}h1 em{font:italic 1.22em Editorial,Georgia,serif;letter-spacing:-.025em}h1 .destination:after{content:"";position:absolute;height:8px;background:var(--lime);bottom:1px;left:25%;right:0;z-index:-1;transform:rotate(-1deg)}.destination svg{width:80px;position:absolute;left:calc(100% + 15px);top:8px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.intro-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;max-width:1200px}.intro-bottom p{font-size:19px;line-height:1.5;letter-spacing:-.35px;margin:5px 0}.intro-actions{display:flex;gap:24px;align-items:center;font-size:15px}.journey{position:relative;height:340vh;min-height:1800px}.stage{position:sticky;top:84px;height:calc(100svh - 84px);min-height:530px;overflow:hidden;isolation:isolate;--code:0;--structure:0;--editor:0;--spread:0;--angle:-5;--p:0}.environment{position:absolute;inset:-16% -8%;background-image:linear-gradient(var(--cream) 2%,#f7f4ee20 50%,#f7f4ee55 77%,var(--cream) 96%),url('pavilion.webp');background-position:center;background-size:cover;opacity:calc(.68 - var(--editor)*.46);filter:blur(4px);transform:translateY(calc(var(--p)*-30px)) scale(1.06);z-index:-1}.stage-heading{position:absolute;top:20px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;z-index:5}.step-kicker{font-size:10px;letter-spacing:1.5px}.stage-heading h2{font-size:23px;font-weight:500;letter-spacing:-.7px;margin:8px 0}.play{font-size:12px;padding:11px 17px;background:#f7f4eeda;border:1px solid #78857550;border-radius:30px}.play:hover{background:#fff}.scene{position:absolute;inset:108px 4% 104px;perspective:1800px;container-type:size}.sample-page{--e:var(--editor);position:absolute;width:min(73%,810px);left:50%;top:50%;container-type:inline-size;background:var(--cream);padding:2.8%;border:1px solid #d2d6c5;box-shadow:0 22px 35px -24px #101e1590,0 0 0 4px #ffffff60;transform:translate(calc(-50% + var(--code)*6% + var(--editor)*10%),-50%) rotateY(calc(var(--angle)*1deg)) rotateZ(calc(var(--angle)*.55deg)) scale(calc(1 - var(--editor)*.13));transform-origin:center;will-change:transform;z-index:3}.sample-nav{display:flex;justify-content:space-between;padding-bottom:3cqw;border-bottom:1px solid var(--line);font-size:1.25cqw}.sample-nav>span:first-child{font:2cqw Editorial,Georgia,serif;letter-spacing:.2em}.sample-hero{position:relative;background:var(--cream);margin-top:3cqw;transform:translateY(calc(var(--spread)*-22px));box-shadow:0 calc(var(--spread)*18px) calc(var(--spread)*25px) calc(var(--spread)*-15px) #0e241e50}.sample-row{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;position:relative;padding:1cqw}.sample-copy{position:relative;padding:1cqw}.sample-copy h3{font:8.1cqw/.91 Editorial,Georgia,serif;letter-spacing:-.045em;margin:1.5cqw 0 3cqw;outline-color:var(--lime)}.sample-copy p{font:2.2cqw/1.4 Editorial,Georgia,serif;margin:0 0 3cqw}.sample-cta{font:1.35cqw var(--sans);padding:1.5cqw 2cqw;border-radius:6px;background:var(--green);color:white}.sample-media{position:relative;padding:.8cqw}.photo-button{display:block;width:100%;height:100%;padding:0;text-align:initial;position:relative;outline:2px solid transparent;outline-color:rgb(210 249 9 / var(--editor))}.photo-button img{width:100%;height:100%;aspect-ratio:1.02;object-fit:cover;object-position:62% 50%;transition:object-position 350ms,filter 350ms}.photo-button.cropped img{object-position:10% 55%;transform:scale(1.01)}.photo-button.alternate img{filter:sepia(.3) saturate(.5)}.image-label{position:absolute;top:-20px;left:-2px;background:var(--green);color:var(--lime);font:11px var(--sans);padding:3px 8px;opacity:var(--editor)}.handles{opacity:var(--editor);position:absolute;inset:0;pointer-events:none}.handles i,.power-outline i{position:absolute;background:var(--cream);border:1px solid var(--green);width:9px;height:9px}.handles i{background:var(--lime)}.handles i:nth-child(1),.power-outline i:nth-child(1){left:-5px;top:-5px}.handles i:nth-child(2),.power-outline i:nth-child(2){right:-5px;top:-5px}.handles i:nth-child(3),.power-outline i:nth-child(3){right:-5px;bottom:-5px}.handles i:nth-child(4),.power-outline i:nth-child(4){left:-5px;bottom:-5px}.section-outline:after,.sample-row:after,.column-outline:after{content:"";position:absolute;inset:-4px;border:1.5px solid #416e50;pointer-events:none;opacity:calc(var(--structure)*(1 - var(--editor)*.88))}.sample-row:after{inset:0;border:1px dashed #b69237}.column-outline:after{inset:0;border:1px dashed #869b76}.structure-label{position:absolute;z-index:5;font:9px var(--sans);letter-spacing:0;opacity:calc(var(--structure)*(1 - var(--editor)));white-space:nowrap}.section-label{top:-19px;left:-4px;background:var(--green);color:white;padding:3px 6px}.row-label{top:1px;left:45%;background:#f0dc9f;color:#463614;padding:2px 4px}.column-label{top:0;right:0;background:#e3e9d7;color:#426037;padding:2px 4px}.sample-projects{background:var(--cream);position:relative;margin-top:3cqw;padding-top:2cqw;border-top:1px solid var(--line);transform:translateY(calc(var(--spread)*30px))}.sample-projects>div:first-of-type{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4cqw}.sample-projects h4{font:3.3cqw Editorial,Georgia,serif;margin:0}.sample-projects>div>span{font-size:1.2cqw}.project-images{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}.project-images figure{margin:0}.project-images img{height:10cqw;width:100%;object-fit:cover}.project-images figure:nth-child(1) img{object-position:left}.project-images figure:nth-child(2) img{object-position:center 90%;filter:brightness(1.2)}.project-images figure:nth-child(3) img{object-position:90% 10%}.project-images figcaption{font:1.7cqw Editorial,Georgia,serif;margin-top:1cqw}.code-panel{position:absolute;left:0;top:50%;width:32%;background:#193a2deb;color:#d4dfcd;box-shadow:0 20px 40px #152b1830;border:1px solid #a5b997;border-radius:7px;opacity:var(--code);transform:translateY(-50%) translateX(calc((1 - var(--code))*100px)) rotateY(14deg) rotateZ(-2deg);z-index:2;pointer-events:none}.code-top{padding:14px;display:flex;justify-content:space-between;font-size:11px;border-bottom:1px solid #9eaf9630}.code-panel pre{font-size:clamp(8px,.85vw,12px);line-height:1.75;padding:14px;margin:0;overflow:hidden}.syntax{color:#9acdab}mark{background:#bdd84426;color:#efffa3;padding:3px 0}.code-caption{padding:12px 14px;border-top:1px solid #9eaf9630;font-size:10px;color:#b8c7b3}.editor-shell{position:absolute;inset:-5% 0;background:#fff;border:1px solid #d5d8d9;border-radius:10px;box-shadow:0 15px 40px #24312b18;opacity:var(--editor);transform:translateY(calc((1 - var(--editor))*20px));overflow:hidden;z-index:1}.editor-top{height:45px;display:flex;gap:22px;align-items:center;padding:0 17px;border-bottom:1px solid #e0e3e4;font-size:11px;color:#252a2c}.editor-top strong{font:700 18px Arial,sans-serif;color:#009ff7;letter-spacing:-.6px}.editor-save{margin-left:auto;background:#eaf6ff;color:#009ff7;padding:9px 12px;border-radius:6px}.elements{width:20%;padding:18px 14px;height:calc(100% - 45px);border-right:1px solid #dfe2e3;background:#fff;overflow:hidden}.tabs{display:flex;font-size:11px;border:1px solid #d8dcdf;border-radius:5px;padding:3px;gap:4px}.tabs>*{width:50%;text-align:center;padding:7px 0;font-weight:400}.tabs b{background:#f0f1f2;border-radius:4px}.elements h4{font-size:11px;margin:18px 0 9px}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.tiles>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:61px;background:#f1f2f3;border-radius:5px;font-size:8px;text-align:center;padding:6px 2px}.tiles b{display:grid;place-items:center;background:#e6e7e8;width:26px;height:26px;font-size:17px;font-weight:400;color:#555}.cursor{position:absolute;width:90px;right:8%;top:50%;transform:translate(calc((1 - var(--editor))*80px),calc((1 - var(--editor))*60px)) rotate(calc((1 - var(--editor))*-12deg));opacity:var(--editor);z-index:7;pointer-events:none;filter:drop-shadow(5px 14px 10px #1f372c40)}.cursor svg{display:block;width:100%}.inspector{position:absolute;right:1%;top:15%;width:139px;border:1px solid #d9dfd1;border-radius:8px;background:#fff;box-shadow:0 10px 25px #0f241926;padding:12px;opacity:var(--editor);transform:translateY(calc((1 - var(--editor))*25px));z-index:8;font-size:11px}.inspector strong{display:flex;justify-content:space-between;border-bottom:1px solid #e1e3de;padding-bottom:10px}.inspector button{display:block;padding:10px 0;font-size:11px;text-align:left;width:100%}.inspector button:hover{color:#47733c}.inspector small{font-size:9px;color:#737c70}.stage-bottom{position:absolute;bottom:22px;left:5%;right:5%;z-index:9}.stage-bottom>p{text-align:center;font-size:13px;margin:8px 0 15px;color:#425342;min-height:19px}.steps{display:flex;justify-content:space-between;gap:10px}.steps button{font-size:13px;padding:8px 0;display:flex;gap:10px;align-items:center;color:#525d52}.steps span{font:11px var(--sans);border-radius:50%;background:#f7f4ee88;width:24px;height:24px;display:grid;place-items:center}.steps [aria-pressed=true]{color:#203d2c;font-weight:700}.steps [aria-pressed=true] span{background:var(--green);color:white}.progress{height:1px;background:#7b8a6f55;margin-top:7px}.progress span{display:block;height:2px;transform:scaleX(var(--p));transform-origin:left;background:var(--green)}.power{position:relative;background:var(--lime);padding:96px 6% 75px;display:grid;grid-template-columns:1.3fr 1fr;gap:55px;align-items:center;overflow:hidden;--reveal:0}.power-heading{position:relative;width:max-content;max-width:100%}.power h2{font-size:clamp(48px,6vw,92px);line-height:.96;letter-spacing:-.06em;margin:0;transform:translateY(calc((1 - var(--reveal))*28px));opacity:calc(.4 + var(--reveal)*.6)}.power-outline{position:absolute;inset:-12px -15px;border:1px solid var(--green);opacity:var(--reveal);transform:scale(calc(1.035 - var(--reveal)*.035));pointer-events:none}.power p{font-size:21px;line-height:1.4;letter-spacing:-.5px}.power .primary{margin-top:10px}.power .prototype-note{font-size:11px;grid-column:1/-1;margin-top:30px;opacity:.7;letter-spacing:0}.lab-bar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:50;padding:8px 14px;border:1px solid #dce0d3;background:#fffdf5f5;box-shadow:0 4px 20px #142d1612;border-radius:50px;font-size:11px;white-space:nowrap;backdrop-filter:blur(16px)}.lab-bar>span{display:flex;align-items:center;gap:6px;color:#6d7769}.lab-bar i{width:5px;height:5px;background:#668753;border-radius:50%}.lab-bar button{padding:5px 10px;font-size:11px;border-left:1px solid #d9decc}.lab-bar label{display:flex;align-items:center;gap:5px;color:#57614f;cursor:pointer}.lab-bar input{accent-color:var(--green)}dialog{width:min(950px,94vw);max-height:88svh;border:1px solid #dce0d3;border-radius:16px;padding:32px;background:var(--cream);color:var(--ink);box-shadow:0 40px 100px #10221a44}dialog::backdrop{background:#122a1a70;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.dialog-top h2{font-size:34px;letter-spacing:-1.5px;margin:10px 0}.dialog-top button{font-size:28px;min-width:44px;min-height:44px}.dialog-top+p{color:#606859;line-height:1.5}#logo-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}.logo-option{background:#fffdf8;border:1px solid #d7ddd0;border-radius:12px;padding:22px 16px;text-align:left}.logo-option[aria-pressed=true]{border:2px solid var(--green);padding:21px 15px;box-shadow:0 0 0 3px #d2f90970}.logo-option>svg{display:block;width:70px;height:70px;margin:12px auto 24px;color:var(--green)}.logo-option h3{font-size:16px;margin:0 0 8px}.logo-option p{font-size:12px;line-height:1.5;min-height:40px;margin:0;color:#5d6855}.logo-sizes{display:flex;align-items:center;gap:20px;height:85px;border-top:1px solid #dfe3d7;margin-top:18px}.logo-sizes>span{display:flex;align-items:center;gap:6px;flex-direction:column;font-size:9px}.app-tile{background:var(--green);color:var(--cream);padding:9px;width:50px;height:50px;border-radius:12px}.dialog-note{font-size:12px;color:#6c7565}#access-dialog{max-width:530px}.reduced .journey{height:auto;min-height:0}.reduced .stage{position:relative;top:0}.reduced .sample-page{transform:translate(-40%,-50%) scale(.87)}.reduced .environment{transform:none}.reduced .power h2{transform:none;opacity:1}.reduced .power-outline{opacity:1;transform:none}
@media(min-width:1400px){.intro{padding-top:55px}.intro-bottom{max-width:1350px}.sample-page{width:min(72%,950px)}}
@media(max-height:760px) and (min-width:761px){.scene{inset:85px 7% 100px}.sample-page{width:min(64%,680px)}.stage-heading{top:10px}.stage-heading h2{font-size:19px}.editor-shell{inset:0}.code-panel pre{line-height:1.5}.sample-projects img{height:8cqw}.inspector{top:7%;right:0}}
@media(max-width:1000px){header nav{display:none}.intro-bottom{align-items:flex-start;flex-direction:column;gap:12px}.intro{padding-bottom:16px}.sample-page{width:78%}.inspector{right:0}.code-panel{width:37%}.code-panel pre{font-size:9px}.power{gap:30px}.power p{font-size:17px}.elements{padding:10px 8px}.tiles>div{font-size:7px}}
@media(max-width:760px){header{height:68px;padding:0 5%}.brand{font-size:23px;gap:9px}.brand-mark{width:30px;height:30px}.nav-actions>.text-button{display:none}.nav-actions .primary{font-size:11px;padding:11px 13px;gap:6px}.intro{padding:34px 6% 8px}.eyebrow{font-size:8px;letter-spacing:1.4px}h1{font-size:clamp(48px,9.8vw,74px);margin:24px 0 25px;letter-spacing:-.065em;line-height:.98}h1 .destination{font-size:.62em;margin:17px 0 5px 8%;line-height:1.1}.destination svg{width:48px;left:calc(100% + 9px);top:6px}.intro-bottom p{font-size:14px;line-height:1.5}.intro-actions{gap:15px;font-size:11px;flex-wrap:wrap}.intro-actions .primary{padding:13px 15px}.intro-actions .text-button{padding:14px 0}.stage{top:68px;height:calc(100svh - 68px);min-height:510px}.journey{height:300vh;min-height:1700px}.stage-heading{left:6%;right:6%;top:20px;gap:10px}.stage-heading h2{font-size:18px;max-width:240px}.step-kicker{font-size:8px}.play{font-size:10px;padding:10px 12px;white-space:nowrap}.scene{inset:100px 3% 108px}.sample-page{width:92%;padding:3%;transform:translate(calc(-50% + var(--editor)*3%),calc(-50% + var(--code)*12%)) rotateZ(calc(var(--angle)*.45deg)) scale(calc(1 - var(--editor)*.04))}.sample-nav{font-size:1.7cqw}.sample-copy h3{font-size:8.5cqw}.sample-copy p{font-size:2.7cqw}.sample-cta{font-size:1.8cqw}.sample-projects h4{font-size:4cqw}.project-images img{height:14cqw}.project-images figcaption{font-size:2cqw}.sample-projects>div>span{font-size:1.6cqw}.code-panel{width:82%;left:6%;top:2%;transform:translateY(calc((1 - var(--code))*80px));max-height:190px;overflow:hidden}.code-panel pre{font-size:9px;line-height:1.5}.code-top{padding:9px 12px;font-size:10px}.code-caption{display:none}.editor-shell{inset:0 -1%;border-radius:7px}.editor-top{gap:10px;padding:0 10px;height:36px;font-size:8px}.editor-top strong{font-size:14px}.editor-top>span:nth-child(3),.editor-top>span:nth-child(4){display:none}.editor-save{padding:6px 8px}.elements{display:none}.inspector{width:128px;right:2%;top:auto;bottom:-2%;padding:9px;font-size:10px}.inspector button{font-size:10px;padding:8px 0}.inspector small{display:none}.cursor{width:55px;right:2%;top:44%}.structure-label{font-size:7px}.section-label{top:-15px}.column-label{font-size:6px}.row-label{left:42%}.stage-bottom{bottom:24px;left:6%;right:6%}.stage-bottom>p{font-size:11px;max-width:300px;margin:0 auto 10px;min-height:32px}.steps{gap:5px}.steps button{font-size:10px;gap:4px;flex-direction:column}.steps span{font-size:9px;width:20px;height:20px}.power{grid-template-columns:1fr;padding:70px 8% 100px;gap:30px}.power h2{font-size:13vw}.power p{font-size:17px;margin:0}.power .prototype-note{font-size:10px;margin-top:20px}.lab-bar{font-size:10px;gap:5px;padding:5px 9px;max-width:96vw}.lab-bar>span{display:none}.lab-bar button{border:0;font-size:10px;padding:7px}.lab-bar label{font-size:9px}.reduced .sample-page{transform:translate(-47%,-50%) scale(.96)}dialog{padding:22px}.dialog-top h2{font-size:27px}.dialog-top+p{font-size:13px}#logo-options{grid-template-columns:1fr;gap:12px;margin:18px 0}.logo-option{position:relative;padding:18px 18px 18px 110px;min-height:180px}.logo-option[aria-pressed=true]{padding:17px 17px 17px 109px}.logo-option>svg{position:absolute;left:24px;top:20px;width:60px;height:60px}.logo-option p{min-height:0}.logo-sizes{height:60px;gap:15px;margin-top:10px}.app-tile{width:36px;height:36px;padding:6px;border-radius:8px}.dialog-note{font-size:11px}}
/* Clip without creating an independently scrollable sticky panel. */
.stage{overflow:clip}
.sample-page{width:min(73%,calc((100svh - 350px)*1.24),810px)}
.scene{bottom:140px}.stage-bottom{bottom:58px}.code-panel{max-height:100%;overflow:hidden}
.app-tile svg{width:100%;height:100%}
.column-label{top:auto;bottom:0}.row-label{left:45%;top:-9px}
@media(max-width:760px){.sample-page{width:min(92%,calc((100svh - 340px)*1.15))}.scene{bottom:140px}.stage-bottom{bottom:56px}.inspector{top:9%;bottom:auto;width:145px}}
/* Revision: a compact centered claim and one full-size editor canvas. */
.brand{font-family:ClaimCondensed,Arial,sans-serif;letter-spacing:-.025em;gap:6px}
.intro{padding-top:26px;padding-bottom:8px;text-align:center}
.intro>.eyebrow{justify-content:center;font-size:10px;letter-spacing:1px;color:#626a65}
.intro h1{font-family:ClaimCondensed,Arial,sans-serif;font-weight:700;font-size:clamp(46px,6.2vw,94px);line-height:1.02;letter-spacing:-.025em;margin:15px auto 15px}
.claim-line{display:block}
.intro h1 em{font:italic 400 1.04em Editorial,Georgia,serif;letter-spacing:-.025em;color:#0b6548}
.intro-bottom{flex-direction:column;gap:13px;align-items:center;margin:auto}
.intro-bottom p{font-size:clamp(13px,1.45vw,17px);line-height:1.4;margin:2px 0;white-space:nowrap;letter-spacing:-.2px}
.intro-actions{justify-content:center}.intro-actions .primary{padding:13px 22px}
.scene{inset:12px 4% 150px}
.sample-page{width:calc(78% - 6%*var(--code));left:calc(50% + 10%*var(--editor) + 14%*var(--code));padding:clamp(12px,1.7vw,24px);transform:translate(-50%,-50%) rotateY(calc(var(--angle)*1deg)) rotateZ(calc(var(--angle)*.55deg));box-shadow:0 calc(22px*(1 - var(--editor))) calc(35px*(1 - var(--editor))) calc(-24px*(1 - var(--editor))) #101e1590;border-color:rgb(210 214 197 / calc(1 - var(--editor)));top:calc(50% + 22px*var(--editor));height:calc(100% - 42px - 23px*var(--editor));display:flex;flex-direction:column}
.code-panel{width:32%;transform:translateY(-50%) translateX(calc((1 - var(--code))*80px))}
.sample-hero{flex:1;display:flex;flex-direction:column;min-height:0}
.sample-row{flex:1;align-items:stretch;min-height:0}
.sample-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.sample-media{min-height:0}
.environment{display:none}
#top{position:relative;isolation:isolate}
.hero-backdrop{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:-1;pointer-events:none;background-image:linear-gradient(to bottom,var(--cream) 0%,#f7f4eef5 18%,#f7f4eede 36%,#f7f4ee80 58%,#f7f4ee35 80%,#f7f4ee70 100%),url('photo-studio.webp');background-size:cover;background-position:center,center 58%}
.sample-nav{padding-bottom:min(calc(3cqw - 1.7cqw*var(--editor)),18px);flex-shrink:0}
.sample-hero{margin-top:min(calc(3cqw - 1.5cqw*var(--editor)),18px)}
.sample-copy h3{font-size:min(calc(8.1cqw - 2.8cqw*var(--editor)),8cqh);margin-bottom:min(calc(3cqw - 1.7cqw*var(--editor)),18px)}
.sample-copy p{font-size:calc(2.2cqw - .5cqw*var(--editor));margin-bottom:calc(3cqw - 1.5cqw*var(--editor))}
.sample-cta{display:inline-block;padding:calc(1.5cqw - .4cqw*var(--editor)) 2cqw}
.photo-button{cursor:default}
.photo-button img{aspect-ratio:calc(1.02 + .73*var(--editor))}
.sample-projects{margin-top:min(calc(3cqw - 1.5cqw*var(--editor)),18px);padding-top:min(calc(2cqw - 1cqw*var(--editor)),14px);flex-shrink:0}
.project-images img{height:min(calc(10cqw - 3cqw*var(--editor)),12cqh)}
.editor-shell{inset:0}.elements{overflow:auto;scrollbar-width:thin}
.reduced .sample-page{transform:translate(-50%,-50%)}
@media(min-width:761px){
 .sample-nav{font-size:min(1.25cqw,1.7cqh)}
 .sample-nav>span:first-child{font-size:min(2cqw,2.6cqh)}
 .sample-row{gap:min(4cqw,4cqh);padding:min(1cqw,1cqh)}
 .sample-copy{padding:min(1cqw,1cqh)}
 .sample-copy h3{margin-top:min(1.5cqw,1.5cqh)}
 .sample-copy p{font-size:min(calc(2.2cqw - .5cqw*var(--editor)),2.5cqh);margin-bottom:min(calc(3cqw - 1.5cqw*var(--editor)),12px)}
 .sample-cta{font-size:min(1.35cqw,1.8cqh);padding:min(1.5cqw,1.4cqh) min(2cqw,2cqh)}
 .sample-media{padding:min(.8cqw,.8cqh)}
 .sample-projects h4{font-size:min(3.3cqw,4cqh)}
 .sample-projects>div>span{font-size:min(1.2cqw,1.6cqh)}
 .sample-projects>div:first-of-type{margin-bottom:min(1.4cqw,1.4cqh)}
 .project-images figcaption{font-size:min(1.7cqw,2.2cqh);margin-top:min(1cqw,1cqh)}
}
@media(max-width:760px){
 .intro{padding-top:25px;padding-bottom:4px}
 .intro>.eyebrow{font-size:8px;letter-spacing:1px}
 .intro h1{font-size:clamp(32px,8.4vw,60px);margin-top:16px;margin-bottom:12px;line-height:1.08;letter-spacing:-.02em}
 .intro-bottom p{font-size:13px;white-space:normal;max-width:38em}.intro-bottom{gap:12px}
 .scene{inset:12px 3% 150px}
 .sample-page{width:calc(94% - 2%*var(--editor));left:50%;padding:3%;top:calc(50% + 18px*var(--editor) - 60px*(1 - min(1,var(--p)*4))*(1 - var(--editor)));transform:translate(-50%,calc(-50% + var(--code)*12%)) rotateZ(calc(var(--angle)*.45deg));height:auto;min-height:calc(var(--editor)*(100% - 56px))}
 .code-panel{top:2%;width:82%;max-height:190px;transform:translateY(calc((1 - var(--code))*80px))}
 .sample-copy h3{font-size:8.5cqw}.sample-copy p{font-size:2.7cqw}
 .sample-cta{font-size:1.8cqw}.photo-button img{aspect-ratio:1.02}
 .project-images img{height:14cqw}
 .reduced .sample-page{transform:translate(-50%,-50%)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}