:root{font-family:Arial,Helvetica,sans-serif;color:#214e40;background:#f4f4e9;font-synthesis:none;--green:#214e40;--muted:#7e8a78;--paper:#f4f4e9}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #3998d5;outline-offset:5px}button{cursor:pointer}a{color:inherit;text-decoration:none}.page{height:100svh;min-height:680px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 33% 56%,#e8edce 0%,#f4f4e9 67%)}.masthead{position:absolute;z-index:4;top:34px;left:4.4%;right:4.4%;display:flex;justify-content:space-between;align-items:center}.wordmark{display:flex;align-items:center;gap:10px;font-size:39px;font-weight:700;letter-spacing:-2px}.wordmark svg{width:25px;height:32px}.wordmark-dot{color:#80a861}.portfolio-label{font-size:10px;letter-spacing:2px;color:#788372}.portfolio-label span{padding:0 12px;color:#b4bda9}.intro{position:absolute;z-index:3;top:132px;left:4.5%;pointer-events:none}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;display:flex;align-items:center;gap:9px}.eyebrow>span{width:5px;height:5px;background:#83a565;border-radius:50%}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.4vw,72px);line-height:1.02;letter-spacing:-2.5px;font-weight:400;margin:18px 0 15px}h1 em{font-weight:400;color:#76935b}.intro p{font-size:12px;color:#7c8575;margin:0;letter-spacing:.2px}.world{position:absolute;left:-5%;top:31%;width:83%;height:68%;}#canvas-host{position:absolute;inset:0}#canvas-host canvas{width:100%;height:100%;display:block;transition:opacity .8s}.world.ready>.scene-label{position:absolute;left:48%;bottom:9%;display:flex;gap:8px;align-items:center;border:1px solid #fff9;border-radius:24px;background:#ffffffe8;box-shadow:0 5px 30px #4c6b4712;padding:10px 15px;color:#66745f;font-size:10px;pointer-events:none;white-space:nowrap}.live-dot{width:6px;height:6px;border-radius:50%;background:#82a957;display:inline-block}.app-preview{position:absolute;z-index:3;right:7.3%;top:17%;width:245px;display:flex;align-items:center;flex-direction:column}.preview-heading{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1.5px;white-space:nowrap;margin-bottom:23px;color:#7e8a78}.small-rule{height:1px;width:17px;background:#9ba791}.phone-wrap{position:relative;width:222px;margin:0 0 31px;perspective:1000px}.phone{height:435px;width:222px;padding:7px;border-radius:37px;position:relative;transform:rotate(-4deg) rotateY(-8deg);background:linear-gradient(110deg,#fff,#ccd1ca 30%,#f7f8f3 66%,#b2bdb3);box-shadow:2px 3px 0 #aeb8ad,5px 5px 0 #c8cfc3,13px 16px 32px #43584318,inset 0 0 0 1px #ffffffe0}.phone-screen{background:white;border:2px solid #344239;border-radius:31px;position:relative;height:100%;overflow:hidden}.dynamic-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:65px;height:19px;background:#172019;border-radius:30px}.dynamic-island:after{content:'';position:absolute;width:5px;height:5px;right:9px;top:7px;border-radius:50%;background:#24322f}.home-indicator{position:absolute;bottom:8px;width:74px;height:3px;border-radius:5px;background:#263129;left:50%;transform:translateX(-50%)}.side-button{position:absolute;right:-3px;top:98px;width:3px;height:44px;background:#a0ada0;border-radius:0 2px 2px 0}.phone-shadow{position:absolute;bottom:-21px;left:10%;width:80%;height:17px;background:#637a5023;filter:blur(12px);border-radius:50%;z-index:-1}.cta{border:0;background:var(--green);color:#fff;border-radius:40px;padding:17px 24px;width:222px;font-size:13px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 12px #214e4010;transition:background .2s,transform .2s}.cta:hover{background:#32694d;transform:translateY(-2px)}.cta:active{transform:translateY(1px)}.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.preview-caption{font-size:10px;letter-spacing:.4px;color:#919887;margin-top:15px}.footer{position:absolute;z-index:4;bottom:28px;left:4.4%;right:4.4%;display:flex;align-items:center;justify-content:space-between}.scene-controls{display:flex;align-items:center;gap:17px}.motion-button{display:flex;align-items:center;gap:9px;background:#ffffff78;border:1px solid #d9dfce;border-radius:25px;color:var(--green);font-size:10px;padding:9px 13px}.motion-button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none}.watch-note,.footer-note{font-size:9px;letter-spacing:.25px;color:#929b89}.footer-note span{padding-left:12px;color:#345742;font-size:17px}dialog{border:1px solid #e1e6d8;border-radius:24px;padding:38px;max-width:400px;width:calc(100% - 32px);color:var(--green);background:var(--paper);box-shadow:0 20px 100px #183c3430}dialog::backdrop{background:#153c3240;backdrop-filter:blur(6px)}dialog h2{font:32px/1.1 Georgia,serif;font-weight:400}dialog p{font-size:14px;color:#7e8a78;line-height:1.6}dialog .cta{width:100%;margin-top:24px}.dialog-close{position:absolute;right:16px;top:12px;font-size:27px;border:0;background:none;color:var(--green)}
@media(min-width:1600px){.app-preview{right:8.5%;width:290px;top:20%}.phone-wrap,.phone{width:260px}.phone{height:510px}.app-preview>.cta{width:260px}.intro{top:150px}.world{top:28%;height:71%}}
@media(max-height:780px) and (min-width:901px){.app-preview{top:16%}.phone-wrap,.phone{width:193px}.phone{height:376px}.preview-heading{margin-bottom:16px}.phone-wrap{margin-bottom:25px}.app-preview>.cta{width:193px}.intro{top:117px}h1{font-size:54px}.world{top:34%;height:65%}}
@media(max-width:1100px) and (min-width:901px){.app-preview{right:4%;width:205px}.world{left:-11%;width:88%}.intro h1{font-size:52px}.watch-note{display:none}}
@media(max-width:900px){.page{height:auto;min-height:1240px;background:radial-gradient(ellipse at 40% 32%,#e8edce,#f4f4e9 63%)}.masthead{top:23px;left:7%;right:7%}.wordmark{font-size:33px}.wordmark svg{width:21px}.portfolio-label{font-size:8px;letter-spacing:1px}.portfolio-label span{padding:0 4px}.intro{top:105px;left:7%}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:48px;letter-spacing:-2px;margin-top:16px}.intro p{font-size:11px}.world{left:-17%;width:130%;top:260px;height:430px}.scene-label{left:42%;bottom:7%;font-size:9px}.app-preview{top:702px;right:0;left:0;width:100%}.preview-heading{margin-bottom:20px}.phone-wrap,.phone{width:182px}.phone{height:350px;border-radius:31px}.phone-screen{border-radius:25px}.phone-wrap{margin-bottom:25px}.app-preview>.cta{width:230px}.preview-caption{margin-top:13px}.footer{bottom:auto;top:645px;left:7%;right:7%}.watch-note{font-size:8px}.footer-note{display:none}.motion-button{font-size:9px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

[hidden]{display:none!important}

/* Immersive composition: the interface floats above a continuous city. */
.page{height:100svh;min-height:540px;background:#a6c57b;isolation:isolate}
.world{inset:0;width:100%;height:100%;z-index:0}

.page:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(245,248,228,.88),rgba(245,248,228,.15) 22%,transparent 40%,transparent 85%,rgba(245,248,228,.7)),radial-gradient(ellipse at 5% 9%,rgba(246,250,232,.88),transparent 37%)}
.masthead{top:28px;left:3.5%;right:3.5%}.wordmark{font-size:44px}.portfolio-label{font-size:12px;color:#355d47;text-shadow:0 1px 8px #fff}
.intro{top:99px;left:3.5%;max-width:420px}.intro .eyebrow{display:none}.intro h1{font-size:43px;line-height:1.06;letter-spacing:-1.6px;margin:0 0 10px;text-shadow:0 2px 22px #fbffeec4}.intro h1 br{display:none}.intro h1 em{display:block;color:#386340}.intro p{font-size:13px;color:#355d47;text-shadow:0 1px 7px #fff}
.app-preview{right:8%;top:50%;transform:translateY(-46%);width:270px;isolation:isolate}
.app-preview:before{content:'';position:absolute;inset:-45px -50px -35px;z-index:-1;background:radial-gradient(ellipse,#f7f7e8ad,transparent 69%);filter:blur(12px);pointer-events:none}
.preview-heading{font-size:11px;letter-spacing:1.2px;color:#214b36;text-shadow:0 1px 9px #f7ffe1;margin-bottom:27px}
.phone-wrap,.phone{width:242px}.phone{height:474px;border-radius:39px;box-shadow:2px 3px 0 #899c8b,6px 7px 0 #b6c2b1,28px 44px 38px #21452c40,50px 75px 90px #28422842,inset 0 0 0 1px #ffffffe0}
.phone-wrap{animation:phone-hover 7s ease-in-out infinite;will-change:transform;margin-bottom:31px}
.phone-shadow{width:120%;left:-4%;bottom:-28px;height:40px;filter:blur(14px);background:#1d462b55;transform:rotate(-15deg);z-index:-1}
.cta{font-size:15px;min-height:52px;box-shadow:0 8px 22px #1b452938;border:1px solid #ffffff66}.app-preview>.cta{width:244px}
.preview-caption{font-size:12px;color:#234a34;text-shadow:0 1px 7px #f5ffe3;background:#f5f9e0b5;padding:6px 12px;border-radius:30px}
.scene-label{left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;background:#fcfff0e8;box-shadow:0 3px 20px #314c3824;padding:12px 18px;z-index:3}
.footer{bottom:26px;left:3.5%;right:3.5%;pointer-events:none}.scene-controls{pointer-events:auto}.motion-button{font-size:12px;padding:11px 16px;min-height:42px;background:#fbfff0eb;border:1px solid #ffffff9c;box-shadow:0 3px 20px #314c3818}.watch-note,.footer-note{display:none}
@keyframes phone-hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}
.is-paused .phone-wrap{animation-play-state:paused}
@media(min-width:1600px){.world{inset:0;width:100%;height:100%}.intro{top:111px}.app-preview{top:50%;right:9%}.phone-wrap,.phone{width:275px}.phone{height:530px}.app-preview>.cta{width:275px}}
@media(max-height:780px) and (min-width:701px){.intro{top:93px}.intro h1{font-size:35px}.world{inset:0;width:100%;height:100%}.app-preview{top:50%;width:220px;right:8%;transform:translateY(-45%)}.phone-wrap,.phone{width:196px}.phone{height:380px}.app-preview>.cta{width:207px}.preview-heading{font-size:10px;margin-bottom:18px}.phone-wrap{margin-bottom:23px}}
@media(max-width:1100px) and (min-width:701px){.world{inset:0;width:100%;height:100%}.intro h1{font-size:37px}.app-preview{right:7%}}
@media(max-width:900px){.page{height:100svh;min-height:540px}.masthead{left:5%;right:5%;top:22px}.intro{left:5%;top:95px}.footer{top:auto;bottom:22px;left:5%}.world{inset:0;width:100%;height:100%}.app-preview{left:auto;top:50%;right:7%;width:245px}.scene-label{left:auto;right:5%;bottom:22px;transform:none}.portfolio-label{font-size:10px;letter-spacing:.5px}}
@media(max-width:700px){.page:before{background:linear-gradient(180deg,#f5f8e6d9,transparent 28%,transparent 85%,#eff8dcc9)}.wordmark{font-size:35px}.portfolio-label{font-size:9px;max-width:130px;text-align:right;line-height:1.7}.intro{top:82px;max-width:280px}.intro h1{font-size:31px;line-height:1.05;letter-spacing:-.8px}.intro p{font-size:12px;max-width:245px}.app-preview{right:8%;top:51%;transform:translateY(-30%);width:178px}.phone-wrap,.phone{width:166px}.phone{height:320px;padding:6px;border-radius:30px}.phone-screen{border-radius:25px}.dynamic-island{width:53px;height:16px;top:8px}.dynamic-island:after{top:5px}.phone-wrap{margin-bottom:20px}.preview-heading{display:none}.app-preview>.cta{width:177px;padding:12px 18px;font-size:14px;min-height:46px}.preview-caption{font-size:10px;white-space:nowrap;margin-top:9px;padding:5px 9px}.scene-label{font-size:10px;padding:12px 10px;right:4%;bottom:20px;max-width:52%;white-space:normal}.footer{left:4%;bottom:20px}.motion-button{font-size:11px;padding:10px;gap:5px}.phone-shadow{bottom:-22px}.phone{box-shadow:2px 3px 0 #8fa18e,5px 6px 0 #bac5b4,20px 35px 25px #1d452b4a,35px 50px 65px #2d45284d}}
@media(max-height:650px) and (max-width:700px){.intro h1{font-size:27px}.app-preview{top:44%;right:7%;transform:translateY(-22%)}.phone-wrap,.phone{width:137px}.phone{height:257px;border-radius:25px}.phone-screen{border-radius:20px}.app-preview>.cta{width:153px;min-height:42px}.preview-caption{display:none}.intro p{max-width:180px}.scene-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.phone-wrap{animation:none!important}}

/* Present the city only after its first rendered frame. */
.city-loader{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#f4f4e9;transition:opacity .45s ease,visibility .45s;opacity:1;visibility:visible}
.city-loader.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.loader-content{display:flex;align-items:center;flex-direction:column;text-align:center;padding:24px;color:#1d5a49}
.loader-mark{position:relative;display:grid;place-items:center;width:88px;height:88px}
.loader-mark svg{width:28px;height:35px;animation:loader-breathe 1.8s ease-in-out infinite}
.loader-ring{position:absolute;inset:0;border:1.5px solid #1d5a4918;border-top-color:#1d5a49;border-radius:50%;animation:loader-orbit 1.3s linear infinite}
.loader-content p{font-size:13px;letter-spacing:.3px;margin:23px 0 0}
.loader-retry{margin-top:22px;border:1px solid #1d5a4930;border-radius:30px;padding:12px 22px;color:#1d5a49;background:transparent}
.city-loader.has-error .loader-mark>*{animation:none}
.city-loader.has-error .loader-ring{border-color:#1d5a4925}
.no-script-message{position:fixed;inset:0;z-index:21;display:grid;place-items:center;padding:30px;text-align:center;color:#1d5a49}
@keyframes loader-orbit{to{transform:rotate(360deg)}}
@keyframes loader-breathe{50%{transform:translateY(-4px);opacity:.65}}

/* Keep the delivery status centered without changing its vertical position. */
.world.ready>.scene-label{left:50%;right:auto;transform:translateX(-50%);width:max-content}

/* Aqua scope: concrete product surfaces replace the generic portfolio caption. */