*, ::before, ::after { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; width: 100%; overflow-x: hidden; background: #080808; color: #080808; font-family: "Geist", "Inter", Arial, sans-serif; }
img, svg, video, canvas, iframe { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.site-page { width: 100% !important; max-width: none; min-height: 100vh; overflow: hidden; }
.site-section, .site-header, .site-footer { width: 100% !important; max-width: 100%; }
.cupix-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.seo-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Exported Pencil reusable styles */
.pencil-167 { box-sizing: border-box; color: #F4F3EF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-168 { box-sizing: border-box; color: #F4F3EF; flex-shrink: 0; font-family: "Geist Mono", system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 400; height: 20px; letter-spacing: 0px; line-height: normal; text-align: left; width: 10px; }
.pencil-169 { box-sizing: border-box; color: #F4F3EF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 15px; font-style: normal; font-weight: 500; height: 44px; left: 51px; letter-spacing: 0px; line-height: 20px; position: absolute; text-align: left; top: 814px; width: 126px; z-index: 5; }
.pencil-170 { box-sizing: border-box; color: #F4F3EF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; left: 1387px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 430px; transform-origin: top left; transform: rotate(90deg); white-space: nowrap; z-index: 6; }
.pencil-171 { box-sizing: border-box; color: #F4F3EF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-172 { box-sizing: border-box; color: #EAF5FA; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-173 { box-sizing: border-box; color: #ffffffff; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-174 { box-sizing: border-box; color: #EAF5FA; font-family: "Geist Mono", system-ui, sans-serif; font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-175 { box-sizing: border-box; color: #111111; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-176 { box-sizing: border-box; color: #FFFFFFD9; font-family: "Geist Mono", system-ui, sans-serif; font-size: 12px; font-style: normal; font-weight: 700; left: 28px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 374px; white-space: nowrap; z-index: 2; }
.pencil-177 { box-sizing: border-box; color: #FFFFFF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 26px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-178 { box-sizing: border-box; color: #FFFFFFB8; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-179 { box-sizing: border-box; color: #FFFFFF80; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-180 { box-sizing: border-box; color: #FFFFFF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-181 { box-sizing: border-box; color: #111111; font-family: "Geist Mono", system-ui, sans-serif; font-size: 11px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-182 { box-sizing: border-box; color: #111111; font-family: "Geist Mono", system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 400; left: 1188px; letter-spacing: 0px; line-height: 26px; position: absolute; text-align: right; top: 307px; white-space: nowrap; z-index: 2; }
.pencil-183 { box-sizing: border-box; color: #F3EBE2; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-184 { box-sizing: border-box; color: #111111; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-185 { box-sizing: border-box; color: #111111; font-family: "Geist Mono", system-ui, sans-serif; font-size: 7px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-186 { box-sizing: border-box; color: #111111; font-family: "Geist Mono", system-ui, sans-serif; font-size: 8px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-187 { box-sizing: border-box; color: #EAF5FA; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; left: 0px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 0px; white-space: nowrap; z-index: 0; }
.pencil-188 { box-sizing: border-box; color: #ffffffff; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; left: 592px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 0px; white-space: nowrap; z-index: 1; }
.pencil-189 { box-sizing: border-box; color: #EAF5FA; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; left: 1210px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 0px; white-space: nowrap; z-index: 2; }
.pencil-190 { box-sizing: border-box; color: #ffffffff; font-family: "Geist Mono", system-ui, sans-serif; font-size: 12px; font-style: normal; font-weight: 500; left: 0px; letter-spacing: 0px; line-height: 16px; position: absolute; text-align: left; top: 20px; width: 235px; z-index: 0; }
.pencil-191 { box-sizing: border-box; color: #ffffffff; font-family: "Geist Mono", system-ui, sans-serif; font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-192 { box-sizing: border-box; color: #ffffffff; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; left: 0px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 0px; white-space: nowrap; z-index: 0; }
.pencil-193 { box-sizing: border-box; color: #ffffffff; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; left: 545px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 0px; white-space: nowrap; z-index: 1; }
.pencil-194 { box-sizing: border-box; color: #EAF5FA; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; left: 1182px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 0px; white-space: nowrap; z-index: 2; }
.pencil-195 { box-sizing: border-box; color: #F4F3EF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 28px; font-style: normal; font-weight: 400; left: 46px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 85px; white-space: nowrap; z-index: 0; }
.pencil-196 { box-sizing: border-box; color: #F4F3EF; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-1 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 0px; height: 7526px; justify-content: flex-start; overflow: hidden; width: 100%; }
.pencil-2 { background-color: #080808; box-sizing: border-box; flex-shrink: 0; height: 900px; overflow: hidden; position: relative; width: 100%; }
.pencil-3 { background-position: center; background-repeat: no-repeat; background-size: cover; box-sizing: border-box; height: 900px; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 100%; z-index: 0; }
.pencil-4 { background-image: linear-gradient(90deg, #00000000 0%, #000000CC 100%); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; height: 900px; left: 1010px; position: absolute; top: 0px; width: 430px; z-index: 0; }
.pencil-5 { background-image: linear-gradient(90deg, #00000000 0%, #000000CC 100%); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; height: 900px; left: 430px; position: absolute; top: 900px; transform-origin: top left; transform: rotate(-180deg); width: 430px; z-index: 1; }
.pencil-6 { background-color: #00000000; border-radius: 50%; border: 1px solid #FFFFFF1F; box-sizing: border-box; height: 922px; left: 490px; position: absolute; top: 162px; width: 922px; z-index: 1; }
.pencil-7 { background-color: #00000000; border-radius: 50%; border: 1px solid #FFFFFF1F; box-sizing: border-box; height: 605px; left: 648px; position: absolute; top: 270px; width: 605px; z-index: 2; }
.pencil-8 { align-items: flex-start; background-color: #08080800; box-sizing: border-box; display: flex; flex-direction: column; gap: 0px; height: 78px; justify-content: flex-start; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 3; }
.pencil-9 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 77px; justify-content: space-between; padding: 0px 46px; width: 100%; }
.pencil-10 { box-sizing: border-box; flex-shrink: 0; height: 32px; position: relative; width: 91.999px; }
.pencil-11 { box-sizing: border-box; height: 14.398px; left: 33.016px; position: absolute; top: 7.286px; width: 58.841px; z-index: 0; }
.pencil-12 { box-sizing: border-box; height: 14.11px; left: 0px; overflow: visible; position: absolute; top: 0px; width: 11.844px; z-index: 0; }
.pencil-13 { box-sizing: border-box; height: 14.398px; left: 14.704px; overflow: visible; position: absolute; top: 0px; width: 14.385px; z-index: 1; }
.pencil-14 { box-sizing: border-box; height: 14.11px; left: 32.025px; overflow: visible; position: absolute; top: 0.001px; width: 6.819px; z-index: 2; }
.pencil-15 { box-sizing: border-box; height: 14.111px; left: 40.816px; overflow: visible; position: absolute; top: 0px; width: 18.025px; z-index: 3; }
.pencil-16 { box-sizing: border-box; height: 32px; left: 0px; position: absolute; top: 0px; width: 28.242px; z-index: 1; }
.pencil-17 { box-sizing: border-box; height: 15.236px; left: 0px; overflow: visible; position: absolute; top: 8.382px; width: 13.236px; z-index: 0; }
.pencil-18 { box-sizing: border-box; height: 15.236px; left: 0.443px; overflow: visible; position: absolute; top: 0px; width: 13.236px; z-index: 1; }
.pencil-19 { box-sizing: border-box; height: 15.236px; left: 14.565px; overflow: visible; position: absolute; top: 16.764px; width: 13.236px; z-index: 2; }
.pencil-20 { box-sizing: border-box; height: 15.236px; left: 14.565px; overflow: visible; position: absolute; top: 0px; width: 13.236px; z-index: 3; }
.pencil-21 { box-sizing: border-box; height: 15.236px; left: 15.008px; overflow: visible; position: absolute; top: 8.382px; width: 13.234px; z-index: 4; }
.pencil-22 { box-sizing: border-box; height: 8.523px; left: 48.049px; position: absolute; top: 22.765px; width: 43.949px; z-index: 2; }
.pencil-23 { box-sizing: border-box; height: 6.538px; left: 0px; overflow: visible; position: absolute; top: 0.111px; width: 4.403px; z-index: 0; }
.pencil-24 { box-sizing: border-box; height: 4.683px; left: 5.095px; overflow: visible; position: absolute; top: 1.966px; width: 4.679px; z-index: 1; }
.pencil-25 { box-sizing: border-box; height: 4.463px; left: 10.253px; overflow: visible; position: absolute; top: 2.076px; width: 3.16px; z-index: 2; }
.pencil-26 { box-sizing: border-box; height: 6.539px; left: 13.994px; overflow: visible; position: absolute; top: 0px; width: 1.399px; z-index: 3; }
.pencil-27 { box-sizing: border-box; height: 6.557px; left: 16.056px; overflow: visible; position: absolute; top: 1.966px; width: 4.368px; z-index: 4; }
.pencil-28 { box-sizing: border-box; height: 4.574px; left: 21.381px; overflow: visible; position: absolute; top: 1.964px; width: 3.703px; z-index: 5; }
.pencil-29 { box-sizing: border-box; height: 6.427px; left: 25.997px; overflow: visible; position: absolute; top: 0.111px; width: 3.777px; z-index: 6; }
.pencil-30 { box-sizing: border-box; height: 4.591px; left: 30.474px; overflow: visible; position: absolute; top: 2.037px; width: 4.514px; z-index: 7; }
.pencil-31 { box-sizing: border-box; height: 4.499px; left: 35.816px; overflow: visible; position: absolute; top: 2.13px; width: 3.777px; z-index: 8; }
.pencil-32 { box-sizing: border-box; height: 4.408px; left: 40.31px; overflow: visible; position: absolute; top: 2.132px; width: 3.639px; z-index: 9; }
.pencil-33 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 58px; height: fit-content; justify-content: flex-start; width: fit-content; }
.pencil-34 { box-sizing: border-box; color: #F4F3EFB8; font-family: Geist, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-35 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 12px; height: fit-content; justify-content: flex-start; width: fit-content; }
.pencil-36 { box-sizing: border-box; flex-shrink: 0; height: 9px; position: relative; width: 24px; }
.pencil-37 { background-color: #F4F3EF; box-sizing: border-box; height: 1px; left: 0px; position: absolute; top: 0px; width: 24px; z-index: 0; }
.pencil-38 { background-color: #F4F3EF; box-sizing: border-box; height: 1px; left: 9px; position: absolute; top: 7px; width: 15px; z-index: 1; }
.pencil-39 { background-color: #FFFFFF26; box-sizing: border-box; flex-shrink: 0; height: 1px; width: 100%; }
.pencil-40 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; height: fit-content; justify-content: flex-start; left: 177px; position: absolute; top: 402px; width: 145px; z-index: 4; }
.pencil-41 { box-sizing: border-box; color: #F4F3EF; flex-shrink: 0; font-family: Geist, system-ui, sans-serif; font-size: 66px; font-style: normal; font-weight: 700; height: 116px; letter-spacing: 0px; line-height: 73px; text-align: left; width: 406px; }
.pencil-42 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 7px; height: fit-content; justify-content: flex-start; width: 100%; }
.pencil-43 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: fit-content; justify-content: space-between; width: 100%; }
.pencil-44 { background-color: #F4F3EF; box-sizing: border-box; flex-shrink: 0; height: 1px; width: 100%; }
.pencil-45 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; gap: 18px; height: fit-content; justify-content: flex-start; left: 1216px; position: absolute; top: 835px; width: fit-content; z-index: 7; }
.pencil-46 { background-color: #000000ff; box-sizing: border-box; flex-shrink: 0; height: 900px; overflow: hidden; position: relative; width: 100%; }
.pencil-47 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; height: 40px; justify-content: flex-start; left: 46px; position: absolute; top: 24px; width: 1348px; z-index: 0; }
.pencil-48 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 16px; justify-content: space-between; width: 100%; }
.pencil-49 { background-color: #EAF5FA33; box-sizing: border-box; flex-shrink: 0; height: 1px; width: 100%; }
.pencil-50 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 0px; height: 210px; justify-content: flex-start; left: 46px; position: absolute; top: 148px; width: 1290px; z-index: 1; }
.pencil-51 { box-sizing: border-box; color: #ffffffff; font-family: Geist, system-ui, sans-serif; font-size: 76px; font-style: normal; font-weight: 600; letter-spacing: -1.8px; line-height: 70px; text-align: left; width: 100%; }
.pencil-52 { box-sizing: border-box; color: #333333ff; font-family: Geist, system-ui, sans-serif; font-size: 76px; font-style: normal; font-weight: 600; letter-spacing: -1.8px; line-height: 70px; text-align: left; width: 100%; }
.pencil-53 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 0px; height: 210px; justify-content: flex-start; left: 831px; position: absolute; top: 450px; width: 505px; z-index: 2; }
.pencil-54 { box-sizing: border-box; color: #ffffffff; font-family: Geist, system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: 27px; text-align: left; width: 100%; }
.pencil-55 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 7px; height: 28px; justify-content: flex-start; left: 46px; position: absolute; top: 802px; width: 230px; z-index: 3; }
.pencil-56 { background-color: #EAF5FA; box-sizing: border-box; flex-shrink: 0; height: 1px; width: 154px; }
.pencil-57 { background-color: #EAF5FA33; box-sizing: border-box; height: 1px; left: 46px; position: absolute; top: 708px; width: 438px; z-index: 4; }
.pencil-58 { background-color: #ffffffff; box-sizing: border-box; flex-shrink: 0; height: 900px; overflow: hidden; position: relative; width: 100%; }
.pencil-59 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 13px; height: 32px; justify-content: flex-start; left: 46px; position: absolute; top: 24px; width: 1348px; z-index: 0; }
.pencil-60 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: fit-content; justify-content: space-between; width: 100%; }
.pencil-61 { background-color: #00000029; box-sizing: border-box; flex-shrink: 0; height: 1px; width: 100%; }
.pencil-62 { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 2px; box-shadow: 0px 18px 40px 0px #0000002E; box-sizing: border-box; height: 154px; left: 210px; opacity: 0.28; position: absolute; top: 184px; transform-origin: top left; transform: rotate(4deg); width: 170px; z-index: 1; }
.pencil-63 { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 2px; box-shadow: 0px 18px 40px 0px #0000002E; box-sizing: border-box; height: 172px; left: 1010px; opacity: 0.24; position: absolute; top: 180px; transform-origin: top left; transform: rotate(-5deg); width: 190px; z-index: 2; }
.pencil-64 { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 2px; box-shadow: 0px 18px 40px 0px #0000002E; box-sizing: border-box; height: 190px; left: 782px; opacity: 0.58; position: absolute; top: 430px; transform-origin: top left; transform: rotate(2deg); width: 210px; z-index: 3; }
.pencil-65 { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 2px; box-shadow: 0px 18px 40px 0px #0000002E; box-sizing: border-box; height: 164px; left: 455px; opacity: 0.42; position: absolute; top: 410px; transform-origin: top left; transform: rotate(-3deg); width: 180px; z-index: 4; }
.pencil-66 { box-sizing: border-box; color: #111111; font-family: Geist, system-ui, sans-serif; font-size: 108px; font-style: normal; font-weight: 400; left: 371px; letter-spacing: 0px; line-height: 92px; position: absolute; text-align: center; top: 265px; width: 700px; z-index: 5; }
.pencil-67 { box-sizing: border-box; height: 400px; left: 690px; position: absolute; top: 230px; width: 380px; z-index: 6; }
.pencil-68 { background-color: #A45A31; box-shadow: 0px 22px 50px 0px #00000033; box-sizing: border-box; height: 275px; left: 50px; position: absolute; top: 34px; transform-origin: top left; transform: rotate(-8deg); width: 220px; z-index: 0; }
.pencil-69 { background-color: #171717; box-sizing: border-box; height: 275px; left: 22px; position: absolute; top: 26px; transform-origin: top left; transform: rotate(4deg); width: 220px; z-index: 1; }
.pencil-70 { background-position: center; background-repeat: no-repeat; background-size: cover; box-sizing: border-box; height: 275px; left: 36px; position: absolute; top: 31px; transform-origin: top left; transform: rotate(-2deg); width: 220px; z-index: 2; }
.pencil-71 { background-color: #000000; box-sizing: border-box; flex-shrink: 0; height: 1079px; overflow: hidden; position: relative; width: 100%; }
.pencil-72 { background-color: #050505; box-sizing: border-box; height: 290px; left: 0px; position: absolute; top: 610px; width: 100%; z-index: 0; }
.pencil-73 { background-color: #050505; box-sizing: border-box; height: 900px; left: 0px; position: absolute; top: 0px; width: 24px; z-index: 1; }
.pencil-74 { background-image: url('../assets/images/Verge32xHijayu_-cover3.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; border: 1px solid #FFFFFF14; box-sizing: border-box; filter: blur(0.5px); height: 169px; left: 116px; opacity: 0.22; overflow: hidden; position: absolute; top: 543px; width: 300px; z-index: 2; }
.pencil-75 { background-color: #0000008A; box-sizing: border-box; height: 169px; left: 0px; position: absolute; top: 0px; width: 300px; z-index: 0; }
.pencil-76 { background-image: url('../assets/images/USJ5xBonEstate_cover3.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; border: 1px solid #FFFFFF14; box-sizing: border-box; filter: blur(0.5px); height: 169px; left: 1032px; opacity: 0.18; overflow: hidden; position: absolute; top: 543px; width: 300px; z-index: 3; }
.pencil-77 { background-color: #000000A6; box-sizing: border-box; height: 169px; left: 0px; position: absolute; top: 0px; width: 300px; z-index: 0; }
.pencil-78 { background-color: #00000000; border-radius: 12px; border: 1px solid #FFFFFF1F; box-sizing: border-box; height: 504px; left: 308px; position: absolute; top: 374px; width: 832px; z-index: 4; }
.pencil-79 { background-image: url('../assets/images/USJ5xBonEstate_cover3.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 8px; border: 1px solid #FFFFFF2E; box-shadow: 0px 24px 48px 0px #00000080; box-sizing: border-box; height: 439px; left: 334px; overflow: hidden; position: absolute; top: 408px; width: 780px; z-index: 5; }
.pencil-80 { background-image: linear-gradient(180deg, #00000000 55%, #00000099 100%); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; height: 439px; left: 0px; position: absolute; top: 0px; width: 780px; z-index: 0; }
.pencil-81 { align-items: center; background-color: #F4F3EFE6; border-radius: 43px; border: 1px solid #FFFFFF33; box-sizing: border-box; display: flex; flex-direction: column; gap: 0px; height: 86px; justify-content: center; left: 348px; position: absolute; top: 188px; width: 86px; z-index: 1; }
.pencil-82 { box-sizing: border-box; color: #111111; font-family: Geist, system-ui, sans-serif; font-size: 30px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: normal; text-align: left; white-space: nowrap; }
.pencil-83 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; gap: 28px; height: fit-content; justify-content: flex-start; left: 598px; position: absolute; top: 913px; width: fit-content; z-index: 6; }
.pencil-84 { align-items: center; background-color: #00000000; border-radius: 36px; border: 1px solid #FFFFFF66; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 0px; height: 72px; justify-content: center; width: 72px; }
.pencil-85 { align-items: center; background-color: #050505; border-radius: 4px; border: 1px solid #FFFFFF24; box-sizing: border-box; display: flex; flex-direction: row; gap: 7px; height: fit-content; justify-content: flex-start; left: 108px; padding: 8px 10px; position: absolute; top: 724px; width: fit-content; z-index: 7; }
.pencil-86 { align-items: center; background-color: #050505; border-radius: 4px; border: 1px solid #FFFFFF24; box-sizing: border-box; display: flex; flex-direction: row; gap: 7px; height: fit-content; justify-content: flex-start; left: 1125px; padding: 8px 10px; position: absolute; top: 724px; width: fit-content; z-index: 8; }
.pencil-87 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; gap: 10px; height: fit-content; justify-content: flex-start; left: 502px; position: absolute; top: 876px; width: fit-content; z-index: 9; }
.pencil-88 { background-color: #FFFFFF33; border-radius: 2px; box-sizing: border-box; flex-shrink: 0; height: 4px; width: 42px; }
.pencil-89 { background-color: #FFFFFFD9; border-radius: 2px; box-sizing: border-box; flex-shrink: 0; height: 4px; width: 92px; }
.pencil-90 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 0px; height: 210px; justify-content: flex-start; left: 79px; position: absolute; top: 89px; width: 1290px; z-index: 10; }
.pencil-91 { box-sizing: border-box; color: #ffffffff; font-family: Geist, system-ui, sans-serif; font-size: 55px; font-style: normal; font-weight: 600; letter-spacing: -1.8px; line-height: 51px; text-align: center; width: 100%; }
.pencil-92 { box-sizing: border-box; color: #333333ff; font-family: Geist, system-ui, sans-serif; font-size: 55px; font-style: normal; font-weight: 600; letter-spacing: -1.8px; line-height: 51px; text-align: center; width: 100%; }
.pencil-93 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 0px; height: 124px; justify-content: flex-start; left: 421px; position: absolute; top: 225px; width: 613px; z-index: 11; }
.pencil-94 { box-sizing: border-box; color: #ffffffff; flex-shrink: 0; font-family: Geist, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; height: 116px; letter-spacing: 0px; line-height: 24px; text-align: justify; width: 603px; }
.pencil-95 { background-color: #ffffffff; box-sizing: border-box; flex-shrink: 0; height: 1700px; overflow: hidden; position: relative; width: 100%; }
.pencil-96 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 13px; height: 34px; justify-content: flex-start; left: 46px; position: absolute; top: 24px; width: 1348px; z-index: 0; }
.pencil-97 { background-color: #11111133; box-sizing: border-box; flex-shrink: 0; height: 1px; width: 100%; }
.pencil-98 { box-sizing: border-box; color: #111111; font-family: Geist, system-ui, sans-serif; font-size: 190px; font-style: normal; font-weight: 600; left: 46px; letter-spacing: 0px; line-height: 137px; position: absolute; text-align: left; top: 170px; white-space: nowrap; z-index: 1; }
.pencil-99 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; gap: 12px; height: fit-content; justify-content: flex-start; left: 1040px; position: absolute; top: 406px; width: fit-content; z-index: 3; }
.pencil-100 { align-items: center; background-color: #111111; border-radius: 19px; border: 1px solid #111111; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 0px; height: 38px; justify-content: center; padding: 0px 18px; width: 170px; }
.pencil-101 { align-items: center; background-color: #00000000; border-radius: 19px; border: 1px solid #111111; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 0px; height: 38px; justify-content: center; padding: 0px 18px; width: 170px; }
.selected-works-office-link { align-items: center; background-color: #00000000; border-radius: 19px; border: 1px solid #111111; box-sizing: border-box; color: #111111; display: flex; flex: 0 0 170px; flex-direction: column; font-family: "Geist Mono", system-ui, sans-serif; font-size: 14px; font-weight: 600; height: 38px; justify-content: center; line-height: normal; padding: 0 18px; text-align: center; white-space: nowrap; }
.selected-works-office-link:hover, .selected-works-office-link:focus-visible { background-color: #111111; color: #F4F3EF; outline: none; }
.pencil-102 { background-color: #11111133; box-sizing: border-box; height: 1px; left: 50px; position: absolute; top: 461px; width: 1348px; z-index: 4; }

@media (max-width: 900px) {
  .selected-works .pencil-99 {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .selected-works .pencil-100,
  .selected-works .pencil-101 {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
  }

  .selected-works .selected-works-office-link {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
.pencil-103 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 446px; justify-content: flex-start; left: 46px; position: absolute; top: 500px; width: 318px; z-index: 5; }
.pencil-104 { background-image: url('../assets/images/hero-bg-2.jpg'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 390px; overflow: hidden; width: 100%; }
.pencil-105 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 46px; justify-content: space-between; width: 100%; }
.pencil-106 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 8px; height: fit-content; justify-content: flex-start; width: fit-content; }
.pencil-107 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 306px; justify-content: flex-start; left: 46px; position: absolute; top: 952px; width: 318px; z-index: 6; }
.pencil-108 { background-image: url('../assets/images/hero-bg-2.jpg'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 250px; overflow: hidden; width: 100%; }
.pencil-109 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 356px; justify-content: flex-start; left: 46px; position: absolute; top: 1264px; width: 318px; z-index: 7; }
.pencil-110 { background-image: url('../assets/images/USJ5xBonEstate_cover3.webp'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 300px; overflow: hidden; width: 100%; }
.pencil-111 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 316px; justify-content: flex-start; left: 384px; position: absolute; top: 500px; width: 318px; z-index: 8; }
.pencil-112 { background-image: url('../assets/images/USJ5xBonEstate_cover3.webp'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 260px; overflow: hidden; width: 100%; }
.pencil-113 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 456px; justify-content: flex-start; left: 384px; position: absolute; top: 822px; width: 318px; z-index: 9; }
.pencil-114 { background-image: url('../assets/images/hero-bg-2.jpg'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 400px; overflow: hidden; width: 100%; }
.pencil-115 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 316px; justify-content: flex-start; left: 384px; position: absolute; top: 1284px; width: 318px; z-index: 10; }
.pencil-116 { background-image: url('../assets/images/hero-bg-2.jpg'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 260px; overflow: hidden; width: 100%; }
.pencil-117 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 386px; justify-content: flex-start; left: 722px; position: absolute; top: 500px; width: 318px; z-index: 11; }
.pencil-118 { background-image: url('../assets/images/hero-bg-2.jpg'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 330px; overflow: hidden; width: 100%; }
.pencil-119 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 346px; justify-content: flex-start; left: 722px; position: absolute; top: 892px; width: 318px; z-index: 12; }
.pencil-120 { background-image: url('../assets/images/Verge32xHijayu_-cover3.webp'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 290px; overflow: hidden; width: 100%; }
.pencil-121 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 376px; justify-content: flex-start; left: 722px; position: absolute; top: 1244px; width: 318px; z-index: 13; }
.pencil-122 { background-image: url('../assets/images/Verge32xHijayu_-cover3.webp'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 320px; overflow: hidden; width: 100%; }
.pencil-123 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 336px; justify-content: flex-start; left: 1060px; position: absolute; top: 500px; width: 334px; z-index: 14; }
.pencil-124 { background-image: url('../assets/images/USJ5xBonEstate_cover3.webp'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 280px; overflow: hidden; width: 100%; }
.pencil-125 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 416px; justify-content: flex-start; left: 1060px; position: absolute; top: 842px; width: 334px; z-index: 15; }
.pencil-126 { background-image: url('../assets/images/Verge32xHijayu_-cover3.webp'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 360px; overflow: hidden; width: 100%; }
.pencil-127 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; height: 336px; justify-content: flex-start; left: 1060px; position: absolute; top: 1264px; width: 334px; z-index: 16; }
.pencil-128 { background-image: url('../assets/images/hero-bg-2.jpg'); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; flex-shrink: 0; height: 280px; overflow: hidden; width: 100%; }
.pencil-129 { background-color: #000000ff; box-sizing: border-box; flex-shrink: 0; height: 1180px; overflow: hidden; position: relative; width: 100%; }
.pencil-130 { box-sizing: border-box; height: 34px; left: 46px; position: absolute; top: 24px; width: 1348px; z-index: 0; }
.pencil-131 { background-color: #EAF5FA33; box-sizing: border-box; height: 1px; left: 0px; position: absolute; top: 27px; width: 1348px; z-index: 3; }
.pencil-132 { box-sizing: border-box; height: 315px; left: 46px; position: absolute; top: 130px; width: 1348px; z-index: 1; }
.pencil-133 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: -10px; height: 300px; justify-content: flex-start; left: 335px; position: absolute; top: 0px; width: 530px; z-index: 1; }
.pencil-134 { box-sizing: border-box; color: #2e2e2eff; font-family: Geist, system-ui, sans-serif; font-size: 120px; font-style: normal; font-weight: 500; letter-spacing: -4px; line-height: 106px; text-align: left; white-space: nowrap; }
.pencil-135 { box-sizing: border-box; color: #EAF5FA; font-family: Geist, system-ui, sans-serif; font-size: 120px; font-style: normal; font-weight: 500; letter-spacing: -4px; line-height: 106px; text-align: left; white-space: nowrap; }
.pencil-136 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; height: 180px; justify-content: flex-start; left: 920px; position: absolute; top: 48px; width: 380px; z-index: 2; }
.pencil-137 { box-sizing: border-box; color: #EAF5FA; font-family: Geist, system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 400; letter-spacing: 0px; line-height: 24px; text-align: left; width: 100%; }
.pencil-138 { background-position: center; background-repeat: no-repeat; background-size: cover; border: 1px solid #071D2F; box-sizing: border-box; height: 520px; left: 46px; overflow: hidden; position: absolute; top: 515px; width: 1348px; z-index: 2; }
.pencil-139 { background-color: #061624; box-sizing: border-box; height: 520px; left: 0px; position: absolute; top: 0px; width: 1348px; z-index: 0; }
.pencil-140 { box-sizing: border-box; color: #EAF5FA; font-family: Geist, system-ui, sans-serif; font-size: 32px; font-style: normal; font-weight: 500; left: 654px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 170px; white-space: nowrap; z-index: 1; }
.pencil-141 { box-sizing: border-box; color: #EAF5FA; font-family: Geist, system-ui, sans-serif; font-size: 24px; font-style: normal; font-weight: 400; left: 424px; letter-spacing: 0px; line-height: 29px; position: absolute; text-align: left; top: 235px; width: 500px; z-index: 2; }
.pencil-142 { box-sizing: border-box; color: #EAF5FA99; font-family: Geist, system-ui, sans-serif; font-size: 12px; font-style: normal; font-weight: 400; left: 560px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 342px; white-space: nowrap; z-index: 3; }
.pencil-143 { box-sizing: border-box; color: #EAF5FA99; font-family: Geist, system-ui, sans-serif; font-size: 12px; font-style: normal; font-weight: 400; left: 594px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 376px; white-space: nowrap; z-index: 4; }
.pencil-144 { box-sizing: border-box; height: 42px; left: 46px; position: absolute; top: 1070px; width: 1348px; z-index: 3; }
.pencil-145 { background-color: #EAF5FA80; box-sizing: border-box; height: 1px; left: 1182px; position: absolute; top: 18px; width: 128px; z-index: 3; }
.pencil-146 { background-color: #ffffffff; box-sizing: border-box; flex-shrink: 0; height: 382px; overflow: hidden; position: relative; width: 100%; }
.pencil-147 { box-sizing: border-box; color: #111111; font-family: Geist, system-ui, sans-serif; font-size: 65px; font-style: normal; font-weight: 400; height: 153px; left: 46px; letter-spacing: 0px; line-height: 51px; position: absolute; text-align: center; top: 65px; width: 1348px; z-index: 0; }
.pencil-148 { background-color: #faf0f000; box-sizing: border-box; height: 235px; left: 46px; overflow: hidden; position: absolute; top: 121px; width: 1348px; z-index: 1; }
.pencil-149 { align-items: center; box-sizing: border-box; display: flex; flex-direction: row; gap: 20px; height: 140px; justify-content: flex-start; left: 19px; position: absolute; top: 50px; width: 1310px; z-index: 0; }
.pencil-150 { align-items: center; border-radius: 8px; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 0px; height: 140px; justify-content: center; padding: 14px; width: 170px; }
.pencil-151 { background-image: url('../assets/images/TMY.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; flex-shrink: 0; height: 104px; width: 112px; }
.pencil-152 { background-image: url('../assets/images/Houzz-logo.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; flex-shrink: 0; height: 92px; width: 135px; }
.pencil-153 { background-image: url('../assets/images/handyman.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; flex-shrink: 0; height: 104px; width: 126px; }
.pencil-154 { background-image: url('../assets/images/best-fun-empire.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; flex-shrink: 0; height: 104px; width: 138px; }
.pencil-155 { background-image: url('../assets/images/brabbu.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; flex-shrink: 0; height: 110px; width: 124px; }
.pencil-156 { background-image: url('../assets/images/rekatone.png'); background-position: center; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; flex-shrink: 0; height: 92px; width: 142px; }
.pencil-157 { align-items: center; background-color: #ffffffff; border-radius: 8px; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 0px; height: 140px; justify-content: center; padding: 14px; width: 170px; }
.pencil-158 { background-image: url('../assets/images/Best-Rated-Interior-Designer-Malaysia.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; flex-shrink: 0; height: 116px; width: 118px; }
.pencil-159 { box-sizing: border-box; color: #000000; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; left: 276px; letter-spacing: 0px; line-height: normal; position: absolute; text-align: left; top: 8px; white-space: nowrap; z-index: 1; }
.pencil-160 { background-color: #00000029; box-sizing: border-box; height: 1px; left: 46px; position: absolute; top: 715px; width: 1348px; z-index: 2; }
.pencil-161 { background-color: #090909; box-sizing: border-box; flex-shrink: 0; height: 520px; overflow: hidden; position: relative; width: 100%; }
.pencil-162 { box-sizing: border-box; color: #F4F3EF; font-family: Geist, system-ui, sans-serif; font-size: 190px; font-style: normal; font-weight: 400; left: 46px; letter-spacing: 0px; line-height: 152px; position: absolute; text-align: left; top: 175px; white-space: nowrap; z-index: 1; }
.pencil-163 { background-color: #FFFFFF4D; box-sizing: border-box; height: 1px; left: 46px; position: absolute; top: 355px; width: 1348px; z-index: 2; }
.pencil-164 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; gap: 0px; height: fit-content; justify-content: space-between; left: 46px; position: absolute; top: 385px; width: 1348px; z-index: 3; }
.pencil-165 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 9px; height: fit-content; justify-content: flex-start; width: fit-content; }
.pencil-166 { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 6px; height: fit-content; justify-content: flex-start; width: fit-content; }

@media (max-width: 900px) {
  .site-page { height: auto !important; }
  .site-section, .site-footer { position: relative !important; height: auto !important; min-height: 0; padding: 18px !important; overflow: hidden; }
  .hero-section { min-height: 720px; padding: 0 !important; }
  .site-header { position: absolute !important; left: 0 !important; top: 0 !important; height: 72px !important; z-index: 20 !important; }
  [class*="pencil-"] { max-width: 100%; }
  [data-pencil-name*="Heading"], [data-pencil-name*="Hero Copy"], [data-pencil-name*="Body Copy"], [data-pencil-name*="CTA"], [data-pencil-name*="Metadata"], [data-pencil-name*="Selected Works Archive"], [data-pencil-name*="Style Filter"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; }
  [data-pencil-name*="Heading Line"], [data-pencil-name="Selected Works Heading"], [data-pencil-name="Evolve Heading"] { font-size: clamp(42px, 15vw, 86px) !important; line-height: .9 !important; width: 100% !important; height: auto !important; }
  [data-pencil-name*="Paragraph"], [data-pencil-name*="Body Copy"] { font-size: clamp(16px, 4vw, 20px) !important; line-height: 1.45 !important; }
  [data-pencil-name*="Project Card"], [data-pencil-name*="Project Image"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 240px; margin: 0 0 24px; }
  [data-pencil-name*="Project Metadata"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; }
  [data-pencil-name*="Tour Viewer"] { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: min(72vw, 520px) !important; margin-top: 24px; }
  [data-pencil-name*="Desktop Nav Links"] { display: none !important; }
}

@media (min-width: 901px) {
  .site-section { padding-left: 46px; padding-right: 46px; }
}

/* Production media and motion overrides */
.pencil-3 {
  background-image: url("../assets/images/hero-bg-1.jpg");
  position: absolute;
}

.hero-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.pencil-3 > [data-pencil-name="Hero Overlay / Right Shade"] {
  z-index: 1;
}

.hero-section [data-pencil-name*="Hero Copy"],
.hero-section [data-pencil-name="Hero Person Label"],
.hero-section [data-pencil-name="Hero Index"],
.hero-section [data-pencil-name="Hero Scroll Cue"] {
  animation: fadeLift 900ms ease both;
}

.pencil-1 {
  height: auto !important;
}

.pencil-104,
.pencil-108,
.pencil-110,
.pencil-112,
.pencil-114,
.pencil-116,
.pencil-118,
.pencil-120,
.pencil-122,
.pencil-124,
.pencil-126,
.pencil-128 {
  background-position: center;
  background-size: cover !important;
}

[data-pencil-name^="Project Card"] {
  cursor: pointer;
  outline: none;
}

[data-pencil-name^="Project Card"]:focus-visible {
  outline: 1px solid #111111;
  outline-offset: 8px;
}

[data-pencil-name^="Project Card"] [data-pencil-name="Project Image"] {
  overflow: hidden;
  transform: scale(1);
  transform-origin: center;
  transition: transform 420ms ease;
}

[data-pencil-name^="Project Card"]:hover [data-pencil-name="Project Image"],
[data-pencil-name^="Project Card"]:focus-within [data-pencil-name="Project Image"],
[data-pencil-name^="Project Card"]:focus [data-pencil-name="Project Image"] {
  transform: scale(1.025);
}

.pencil-151,
.pencil-152,
.pencil-153,
.pencil-154,
.pencil-155,
.pencil-156,
.pencil-158 {
  animation: logoFloat 5s ease-in-out infinite alternate;
}

.js-enabled .site-section {
  transition: opacity 700ms ease, transform 700ms ease;
}

.js-enabled .site-section:not(.is-visible) {
  opacity: 0.01;
  transform: translateY(24px);
}

.js-enabled .site-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeLift {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoFloat {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 900px) {
  .hero-background-video {
    object-position: 72% center;
  }
}

@media (max-width: 900px) {
  .hero-section,
  .hero-section.pencil-2 {
    height: 100svh !important;
    min-height: 620px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .hero-section .pencil-3,
  .hero-section .hero-background-video {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: cover !important;
    object-position: 66% center !important;
  }

  .hero-section .pencil-4,
  .hero-section .pencil-5 {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }

  .hero-section .pencil-8,
  .hero-section .site-header {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 64px !important;
    z-index: 20 !important;
  }

  .hero-section .pencil-9 {
    height: 64px !important;
    padding: 0 16px !important;
  }

  .hero-section [data-pencil-name="Desktop Nav Links"] {
    display: none !important;
  }

  .hero-section .pencil-40,
  .hero-section [data-pencil-name="Hero Copy Cluster"] {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: 104px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    gap: 12px !important;
    z-index: 10 !important;
  }

  .hero-section .pencil-41,
  .hero-section [data-pencil-name="Hero Heading"] {
    width: 100% !important;
    height: auto !important;
    font-size: clamp(48px, 14vw, 72px) !important;
    line-height: .88 !important;
    letter-spacing: -1.6px !important;
    white-space: normal !important;
  }

  .hero-section .pencil-42 {
    width: 100% !important;
    gap: 6px !important;
  }

  .hero-section .pencil-43 {
    width: 100% !important;
  }

  .hero-section .pencil-44 {
    width: 100% !important;
  }

  .hero-section .pencil-45,
  .hero-section [data-pencil-name="Hero Scroll Cue"] {
    left: 16px !important;
    right: auto !important;
    top: auto !important;
    bottom: 28px !important;
    transform: none !important;
    z-index: 10 !important;
  }

  .hero-section [data-pencil-name="Hero Index"] {
    left: auto !important;
    right: 16px !important;
    top: auto !important;
    bottom: 28px !important;
    z-index: 10 !important;
  }

  .hero-section [data-pencil-name="Hero Person Label"] {
    left: 16px !important;
    right: auto !important;
    top: auto !important;
    bottom: 28px !important;
    width: auto !important;
    height: auto !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    z-index: 10 !important;
  }
}

/* Restored production motion */
.restored-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  transform: translateY(-102%);
  transition: transform 650ms cubic-bezier(.77, 0, .18, 1);
}

.restored-menu-panel.is-open {
  transform: translateY(0);
}

.restored-menu-panel__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  padding: 16vh 5vw 5vw;
  background: #f4f3ef;
  color: #111111;
}

.restored-menu-panel__overlay {
  display: none;
  flex: 1;
  cursor: pointer;
}

.restored-menu-panel__close {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: none;
  cursor: pointer;
  color: inherit;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.restored-menu-panel__links {
  display: grid;
}

.restored-menu-panel__links a {
  color: inherit;
  font-size: clamp(52px, 10vw, 150px);
  font-weight: 560;
  letter-spacing: -.07em;
  line-height: .88;
  text-transform: uppercase;
}

.restored-menu-panel__links small {
  margin-right: 18px;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
}

.restored-menu-panel p {
  margin: 0;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

.evolve-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f5efe4 0%, #f4f3ef 55%, #ece7de 100%);
  color: #111111;
}

.evolve-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .82), transparent 38%),
    radial-gradient(circle at 80% 20%, rgba(17, 17, 17, .07), transparent 24%);
  pointer-events: none;
}

.evolve-section__backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.evolve-section .content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}

.evolve-section .content__img {
  width: 190px;
  aspect-ratio: 1.1;
  border-radius: 15px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  will-change: transform, filter;
}

.evolve-section .content__img-inner {
  background-position: 50% 50%;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-size: cover;
  position: absolute;
  top: calc(-1 * 20px / 2);
  left: calc(-1 * 20px / 2);
}

.evolve-section .pencil-59,
.evolve-section .pencil-66 {
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.evolve-section .pencil-66 {
  margin: 176px auto 0;
  left: auto;
  top: auto;
  width: min(700px, calc(100% - 80px));
  text-align: center;
  color: #111111;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.evolve-subheading {
  position: relative;
  z-index: 3;
  margin: 18px auto 0;
  width: min(700px, calc(100% - 80px));
  color: #111111;
  font-family: "Geist", system-ui, sans-serif;
  font-size: clamp(36px, 3vw, 44px);
  font-weight: 540;
  line-height: .85;
  text-align: center;
  pointer-events: none;
}

/* Centered alignment correction for section 02 on non-1440 viewports */
.pencil-46 {
  width: 100%;
}

.pencil-46 .pencil-47 {
  left: 50%;
  transform: translateX(-50%);
  width: min(1348px, calc(100% - 92px));
}

.pencil-46 .pencil-50 {
  left: 50%;
  transform: translateX(-50%);
  width: min(1290px, calc(100% - 92px));
}

.pencil-46 .pencil-51,
.pencil-46 .pencil-52 {
  text-align: center;
}

.pencil-46 .pencil-53 {
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 92px));
}

.pencil-46 .pencil-54 {
  text-align: center;
}

.pixel-carousel-card {
  background-color: #050505;
  background-size: contain !important;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition:
    transform 620ms cubic-bezier(.2, .8, .2, 1),
    opacity 350ms ease,
    filter 350ms ease,
    box-shadow 350ms ease;
  will-change: transform, opacity, filter;
}

.pixel-carousel-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.pixel-carousel-card.is-previewing .pixel-carousel-preview {
  opacity: 1;
}

.pixel-carousel-card[data-carousel-state="active"] {
  filter: saturate(1) contrast(1.05);
  opacity: 1 !important;
  transform: translateZ(90px) rotateY(0deg) scale(1.015) !important;
  z-index: 12 !important;
}

.pixel-carousel-card[data-carousel-state="previous"] {
  opacity: .58 !important;
  filter: grayscale(.3) blur(.1px) saturate(.86);
  transform: translateX(-8px) rotateY(10deg) scale(.965) !important;
  z-index: 8 !important;
}

.pixel-carousel-card[data-carousel-state="next"] {
  opacity: .58 !important;
  filter: grayscale(.3) blur(.1px) saturate(.86);
  transform: translateX(8px) rotateY(-10deg) scale(.965) !important;
  z-index: 8 !important;
}

.video-section {
  height: 1240px !important;
  cursor: ew-resize;
}

.video-portfolio-label {
  position: absolute;
  left: 50%;
  top: 300px;
  transform: translateX(-50%);
  z-index: 14;
  color: #f4f3ef;
  font-family: Geist, system-ui, sans-serif;
  font-size: clamp(42px, 4.6vw, 52px);
  font-weight: 600;
  line-height: .92;
  text-align: center;
  pointer-events: none;
}

.video-section .pencil-74,
.video-section .pencil-76 {
  opacity: .38;
}

.video-section .pencil-75,
.video-section .pencil-77 {
  background-color: #00000073;
}

.video-section .pencil-83 {
  left: 50%;
  top: auto;
  bottom: 14px;
  transform: translateX(-50%);
  width: fit-content;
  z-index: 13;
}

.video-section .pencil-84,
.video-section .pencil-177 {
  display: none !important;
}

/* Center major carousel geometry to avoid side bias on non-1440 viewports */
.video-section .pencil-72 {
  left: 50%;
  transform: translateX(-50%);
  width: min(1440px, 100%);
}

.video-section .pencil-74 {
  left: calc(50% - 604px);
}

.video-section .pencil-76 {
  left: calc(50% + 312px);
}

.video-section .pencil-78 {
  top: 390px;
  height: 637px;
  left: calc(50% - 412px);
}

.video-section .pencil-79 {
  top: 416px;
  height: 585px;
  left: calc(50% - 386px);
}

.video-section .pencil-80 {
  height: 585px;
}

.video-section .pencil-81 {
  top: 249px;
}

.video-section .pencil-85 {
  left: calc(50% - 612px);
}

.video-section .pencil-86 {
  left: calc(50% + 405px);
}

.video-section .pencil-87 {
  left: calc(50% - 218px);
}

.video-section .pencil-90 {
  left: calc(50% - 641px);
}

.video-section .pencil-93 {
  left: calc(50% - 299px);
}

.video-thumb-rail {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  gap: 10px;
  width: min(1040px, calc(100% - 92px));
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: thin;
}

.video-thumb {
  position: relative;
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.72);
  color: #f4f3ef;
  cursor: pointer;
  transition: transform 260ms ease, border-color 260ms ease, background 260ms ease;
}

.video-thumb:hover,
.video-thumb:focus-visible {
  border-color: rgba(255, 255, 255, 0.52);
  transform: translateY(-2px);
}

.video-thumb.is-active {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(17, 17, 17, 0.9);
}

.video-thumb__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.video-thumb__preview {
  position: absolute;
  top: 6px;
  right: 6px;
  left: 6px;
  width: calc(100% - 12px);
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.video-thumb.is-previewing .video-thumb__preview {
  opacity: 1;
}

.video-thumb__label {
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-pencil-name="Carousel Previous Arrow Control"],
[data-pencil-name="Carousel Next Arrow Control"],
[data-pencil-name="Filter / Modern Active"],
[data-pencil-name="Filter / Classical Inactive"],
[data-pencil-name="Open Full Screen Link"],
[data-pencil-name="Menu Button"] {
  cursor: pointer;
}

.latest-portfolio-interactive [data-pencil-name^="LogoLoop Item"] {
  transition: transform 420ms ease, filter 420ms ease, opacity 420ms ease;
}

.latest-portfolio-interactive [data-pencil-name^="LogoLoop Item"]:hover,
.latest-portfolio-interactive [data-pencil-name^="LogoLoop Item"]:focus-within {
  filter: contrast(1.08);
  opacity: 1;
  transform: translateY(-6px);
}

/* Restored interactive states */
.is-scroll-locked {
  overflow: hidden;
}

.is-keyboard-user [role="button"]:focus,
.is-keyboard-user [role="link"]:focus,
.is-keyboard-user button:focus,
.is-keyboard-user a:focus,
[data-pencil-name^="Project Card"]:focus-visible,
.pixel-carousel-card:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 8px;
}

.selected-works {
  height: auto !important;
  min-height: 2080px;
}

.selected-works.is-masonry-enhanced {
  position: relative;
}

.selected-works[data-filter] [data-pencil-name^="Project Card"] {
  transition:
    opacity 360ms ease,
    transform 420ms cubic-bezier(.2, .8, .2, 1),
    filter 420ms ease;
}

.selected-works [data-pencil-name^="Project Card"][hidden] {
  display: none !important;
}

.selected-works [data-pencil-name="Project Image"] {
  overflow: hidden;
  transform: scale(1);
  transform-origin: center;
  transition: transform 420ms ease;
}

.selected-works [data-pencil-name^="Project Card"]:hover [data-pencil-name="Project Image"],
.selected-works [data-pencil-name^="Project Card"]:focus [data-pencil-name="Project Image"],
.selected-works [data-pencil-name^="Project Card"]:focus-within [data-pencil-name="Project Image"] {
  transform: scale(1.025);
}

.selected-works [data-pencil-name="Filter / Modern Active"].is-active-filter,
.selected-works [data-pencil-name="Filter / Classical Inactive"].is-active-filter {
  background: #111111 !important;
  color: #f3ebe2 !important;
}

.selected-works [data-pencil-name="Filter / Modern Active"].is-active-filter [data-pencil-name="Filter Label"],
.selected-works [data-pencil-name="Filter / Classical Inactive"].is-active-filter [data-pencil-name="Filter Label"] {
  color: #f3ebe2 !important;
}

.selected-works [data-pencil-name="Filter / Modern Active"]:not(.is-active-filter),
.selected-works [data-pencil-name="Filter / Classical Inactive"]:not(.is-active-filter) {
  background: transparent !important;
  color: #111111 !important;
}

.selected-works [data-pencil-name="Filter / Modern Active"]:not(.is-active-filter) [data-pencil-name="Filter Label"],
.selected-works [data-pencil-name="Filter / Classical Inactive"]:not(.is-active-filter) [data-pencil-name="Filter Label"] {
  color: #111111 !important;
}

.selected-works [data-pencil-name="Selected Works Archive Info"] {
  right: 46px;
  left: auto;
}

.selected-works [data-pencil-name="Style Filter Buttons"] {
  right: 46px;
  left: auto;
}

.restored-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 4vw;
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(18px);
  animation: modalIn 320ms ease both;
}

.restored-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  width: min(1180px, 92vw);
  min-height: min(680px, 84vh);
  background: #f4f3ef;
  color: #111111;
}

.restored-modal__panel--video-only {
  display: block;
  width: min(1440px, 94vw);
  min-height: 0;
  height: min(88vh, 900px);
  background: #111111;
}

.restored-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}

.restored-modal__media {
  min-height: 70vh;
  background-color: #111111;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.restored-modal__media iframe,
.restored-modal__media video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

.restored-modal__media video {
  display: block;
  background: #111111;
  object-fit: cover;
}

.pixel-project-modal .restored-modal__media {
  background-size: cover;
}

.restored-modal__panel--video-only .restored-modal__media {
  height: 100%;
  min-height: 0;
}

.restored-modal__panel--video-only .restored-modal__media video {
  object-fit: contain;
}

.restored-modal__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 76px);
}

.restored-modal__copy small,
.restored-modal__next {
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}

.restored-modal__copy h2 {
  margin: 24px 0;
  font-size: clamp(46px, 6vw, 92px);
  font-weight: 560;
  letter-spacing: -.07em;
  line-height: .84;
}

.restored-modal__copy p {
  margin: 0;
  max-width: 390px;
  font-size: 15px;
  line-height: 1.5;
}

.masonry-project-modal .restored-modal__panel--image-only {
  display: block;
  width: min(1440px, 94vw);
  height: min(88vh, 900px);
  min-height: 0;
  background: #111111;
}

.masonry-project-modal .restored-modal__panel--image-only .restored-modal__media {
  width: 100%;
  height: 100%;
  min-height: 0;
  background-size: contain;
}

.masonry-project-modal .restored-modal__panel--gallery {
  display: block;
  width: min(1440px, 94vw);
  height: min(92vh, 980px);
  min-height: 0;
  overflow: hidden;
}

.masonry-project-modal .restored-modal__panel--gallery .restored-modal__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #111111;
}

.masonry-project-modal .restored-modal__panel--gallery .restored-modal__media img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #1b1b1b;
}

.masonry-project-modal .restored-modal__panel--gallery .restored-modal__media img.is-active {
  display: block;
}

.masonry-project-modal .restored-modal__gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 72px;
  padding: 0;
  border: 0;
  background: rgba(17, 17, 17, .62);
  color: #f4f3ef;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 58px;
  font-weight: 300;
  line-height: .8;
  transform: translateY(-50%);
}

.masonry-project-modal .restored-modal__gallery-arrow:hover,
.masonry-project-modal .restored-modal__gallery-arrow:focus-visible {
  background: #f4f3ef;
  color: #111111;
}

.masonry-project-modal .restored-modal__gallery-arrow--previous {
  left: 0;
}

.masonry-project-modal .restored-modal__gallery-arrow--next {
  right: 0;
}

.masonry-project-modal .restored-modal__gallery-counter {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 3;
  padding: 6px 9px;
  background: rgba(17, 17, 17, .72);
  color: #f4f3ef;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
}

.masonry-project-modal .restored-modal__panel--image-only .restored-modal__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(244, 243, 239, .72);
  border-radius: 50%;
  background: rgba(17, 17, 17, .78);
  color: #f4f3ef;
  font-family: Arial, sans-serif;
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
  text-transform: none;
}

.masonry-project-modal .restored-modal__panel--image-only .restored-modal__close:hover,
.masonry-project-modal .restored-modal__panel--image-only .restored-modal__close:focus-visible {
  background: #f4f3ef;
  color: #111111;
}

.restored-modal__next {
  width: max-content;
  margin-top: 38px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.985); }
}

.cupix-frame {
  z-index: 5;
}

[data-pencil-name="Tour Viewer / Cupix Penthouse"].is-loaded > :not(.cupix-frame) {
  display: none !important;
}

[data-pencil-name="Tour Viewer / Cupix Penthouse"] {
  background-image: none !important;
}

.vr-section {
  height: 900px;
}

.vr-section .cupix-tour-card {
  top: 460px;
  width: 640px;
  height: 330px;
}

.vr-section .cupix-tour-card .cupix-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.vr-section .pencil-139 {
  width: 640px;
  height: 330px;
}

.vr-section .pencil-140 {
  left: 305px;
  top: 108px;
}

.vr-section .pencil-141 {
  top: 164px;
  left: 90px;
  width: 460px;
  text-align: center;
}

.vr-section .pencil-142,
.vr-section .pencil-143 {
  display: none;
}

.vr-section .cupix-tour-card--secondary {
  position: absolute;
  right: 46px;
  left: auto;
  overflow: hidden;
  border: 1px solid #071d2f;
  background: #061624;
}

.cupix-tour-card__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 18px;
  background: #061624;
  color: #eaf5fa;
  text-align: center;
}

.cupix-tour-card__fallback span {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 500;
}

.cupix-tour-card__fallback p {
  margin: 0;
  font-size: 18px;
}

.cupix-tour-card.is-loaded .cupix-tour-card__fallback {
  display: none;
}

.vr-section .pencil-144 {
  top: 806px;
  width: 640px;
  height: 42px;
}

.vr-section .pencil-193 {
  left: 238px;
}

.vr-section .pencil-194 {
  left: 520px;
}

.vr-section .pencil-145 {
  left: 520px;
  width: 92px;
}

.cupix-tour-info {
  position: absolute;
  top: 806px;
  right: 46px;
  display: block;
  width: 640px;
  color: #ffffff;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

@media (min-width: 901px) and (max-width: 1320px) {
  .vr-section {
    height: 1260px;
  }

  .vr-section .cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .vr-section .cupix-tour-card--secondary {
    top: 850px;
  }

  .vr-section .pencil-144,
  .cupix-tour-info {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .vr-section .pencil-144 {
    top: 812px;
  }

  .cupix-tour-info {
    top: 1196px;
  }
}

/* Restored responsive behaviour */
@media (min-width: 901px) {
  .selected-works[data-filter="modern"] {
    min-height: 1680px;
  }

  .selected-works[data-filter="classical"] {
    min-height: 1120px;
  }
}

@media (max-width: 900px) {
  .restored-menu-panel {
    display: flex;
  }

  .restored-menu-panel__content {
    width: 60%;
    padding: 15vh 20px 28px;
  }

  .restored-menu-panel__overlay {
    display: block;
  }

  .restored-menu-panel__close {
    display: flex;
  }

  .restored-menu-panel__links a {
    font-size: 8.5vw;
  }

  .restored-menu-panel p {
    display: none;
  }

  .restored-modal {
    padding: 12px;
  }

  .restored-modal__panel {
    grid-template-columns: 1fr;
    max-height: 92svh;
    min-height: 0;
    overflow: auto;
  }

  .restored-modal__media {
    min-height: 48svh;
  }

  .restored-modal__copy {
    padding: 28px 20px 34px;
  }

  .restored-modal__copy h2 {
    font-size: 15vw;
  }

  [data-pencil-name="Tour Viewer / Cupix Penthouse"] {
    min-height: 70svh !important;
  }

  .cupix-frame {
    min-height: 70svh;
  }

  .vr-section {
    height: 1260px;
  }

  .vr-section .cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    right: 18px;
    left: 18px;
    width: auto;
    height: 300px;
  }

  .vr-section .cupix-tour-card {
    top: 500px;
  }

  .vr-section .cupix-tour-card--secondary {
    top: 850px;
  }

  .vr-section .pencil-144,
  .cupix-tour-info {
    right: 18px;
    left: 18px;
    width: auto;
  }

  .vr-section .pencil-144 {
    top: 812px;
  }

  .cupix-tour-info {
    top: 1162px;
  }

  .pixel-carousel-card[data-carousel-state="previous"],
  .pixel-carousel-card[data-carousel-state="next"] {
    transform: scale(.94) !important;
  }

  .video-thumb-rail {
    bottom: 70px;
    width: calc(100% - 36px);
  }

  .video-thumb {
    flex-basis: 118px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .restored-menu-panel,
  .pixel-carousel-card,
  .selected-works [data-pencil-name="Project Image"],
  .restored-modal,
  .evolve-section .content__img {
    animation: none !important;
    transition: none !important;
  }

  .js-enabled .site-section:not(.is-visible) {
    opacity: 1;
    transform: none;
  }
}

/* Wide viewport correction for Pencil's fixed 1440px export canvas */
@media (min-width: 1441px) {
  .site-page,
  .site-section,
  .site-header,
  .site-footer,
  .pencil-1,
  .pencil-2,
  .pencil-3,
  .pencil-8,
  .pencil-46,
  .pencil-58,
  .pencil-71,
  .pencil-72,
  .pencil-95,
  .pencil-129,
  .pencil-146,
  .pencil-161 {
    width: 100vw !important;
    max-width: none !important;
  }

  .pencil-3,
  .hero-background-video {
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .pencil-4 {
    left: auto !important;
    right: 0 !important;
    width: min(31vw, 600px) !important;
    height: 100% !important;
  }

  .pencil-5 {
    left: 0 !important;
    top: 0 !important;
    width: min(31vw, 600px) !important;
    height: 100% !important;
    transform: none !important;
    background-image: linear-gradient(270deg, #00000000 0%, #000000CC 100%) !important;
  }

  .hero-section [data-pencil-name="Hero Index"] {
    left: auto !important;
    right: 46px !important;
  }

  .hero-section [data-pencil-name="Hero Scroll Cue"] {
    left: auto !important;
    right: 76px !important;
  }

  .pencil-47,
  .pencil-59,
  .pencil-96,
  .pencil-102,
  .pencil-130,
  .pencil-131,
  .pencil-132,
  .pencil-138,
  .pencil-139,
  .pencil-144,
  .pencil-147,
  .pencil-148,
  .pencil-160,
  .pencil-163,
  .pencil-164 {
    width: calc(100vw - 92px) !important;
    max-width: none !important;
  }

  .pencil-102 {
    width: calc(100vw - 100px) !important;
  }

  .pencil-139 {
    left: 0 !important;
  }

  [data-pencil-name="Metadata Right"],
  [data-pencil-name="Open Full Screen Link"] {
    left: auto !important;
    right: 0 !important;
  }

  [data-pencil-name="Metadata Center"],
  [data-pencil-name="Metadata Centre"],
  [data-pencil-name="Format Label"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  [data-pencil-name="Open Full Screen Underline"] {
    left: auto !important;
    right: 38px !important;
  }
}

/* Selected Pencil VR section restoration */
.vr-section {
  background-color: #000000 !important;
}

.vr-section .pencil-133 {
  align-content: flex-start !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0 24px !important;
  height: 210px !important;
  width: 610px !important;
}

.vr-section .pencil-134,
.vr-section .pencil-135 {
  color: #EAF5FA !important;
  font-size: clamp(76px, 6.9vw, 100px) !important;
  font-weight: 500 !important;
  letter-spacing: -3px !important;
  line-height: .88 !important;
}

.vr-section [data-pencil-name="Heading Space"] {
  flex-basis: 100%;
}

.vr-section .pencil-136 {
  top: 48px !important;
}

.vr-section .pencil-138 {
  background-color: #061624 !important;
  border-color: #071D2F !important;
  height: 716px !important;
  top: 338px !important;
}

.vr-section .pencil-139 {
  height: 716px !important;
}

.vr-section [data-pencil-name="Interaction Instruction"],
.vr-section [data-pencil-name="Format Label"],
.vr-section [data-pencil-name="Open Full Screen Link"] {
  color: transparent !important;
}

.vr-section [data-pencil-name="Interaction Instruction"]::before,
.vr-section [data-pencil-name="Format Label"]::before,
.vr-section [data-pencil-name="Open Full Screen Link"]::before {
  color: #ffffff;
}

.vr-section [data-pencil-name="Interaction Instruction"]::before {
  content: "DRAG TO LOOK \00B7  TAP HOTSPOTS TO MOVE";
}

.vr-section [data-pencil-name="Format Label"]::before {
  content: "INTERACTIVE 360\00B0  VISUALISATION";
}

.vr-section [data-pencil-name="Open Full Screen Link"]::before {
  content: "OPEN FULL SCREEN \2197";
}

@media (max-width: 900px) {
  .vr-section .pencil-133 {
    width: 100% !important;
  }

  .vr-section .pencil-134,
  .vr-section .pencil-135 {
    font-size: clamp(54px, 18vw, 76px) !important;
    letter-spacing: -2px !important;
  }
  .vr-section .pencil-138,
  .vr-section .pencil-139 {
    height: min(88vw, 520px) !important;
  }
}

/* Why Choose section full-width treatment */
.why-choose-us .pencil-159 {
  left: 50% !important;
  width: min(100%, 1040px) !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  white-space: normal !important;
}

.why-choose-us .pencil-149 {
  left: 0 !important;
  width: 100% !important;
  justify-content: space-between !important;
}

.why-choose-us .pencil-149.why-choose-logoloop-source {
  display: none !important;
}

.why-choose-us .pencil-148 {
  height: auto;
  overflow: visible;
}

@media (min-width: 1321px) {
  .why-choose-us,
  .pencil-146 {
    height: 420px;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  .why-choose-us,
  .pencil-146 {
    height: 400px;
  }
}

.why-choose-logoloop {
  position: relative;
  width: 100%;
  margin-top: 52px;
  padding: 12px 0 6px;
  overflow: visible;
}

.why-choose-logoloop .logoloop {
  width: 100%;
}

.why-choose-logoloop .logoloop__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.why-choose-logoloop .logoloop__item img {
  filter: none;
  max-height: 129px;
}

@media (min-width: 901px) and (max-width: 1320px) {
  .why-choose-logoloop .logoloop__item img {
    max-height: 112px;
  }
}

@media (max-width: 900px) {
  .why-choose-logoloop .logoloop__item img {
    max-height: 56px;
  }
}

/* Final VR cleanup: remove metadata noise and keep both viewers at true 4:3. */
.vr-section .pencil-130,
.vr-section [data-pencil-name="Interaction Instruction"] {
  display: none !important;
}

.vr-section .pencil-137 {
  font-weight: 300 !important;
}

.vr-section .cupix-tour-card,
.vr-section .cupix-tour-card--secondary {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  overflow: hidden !important;
}

.vr-section .cupix-tour-card .cupix-frame,
.vr-section .cupix-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

.vr-section .cupix-tour-info,
.vr-section .pencil-144 {
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .vr-section {
    --vr-side: 12px;
    --vr-top: 360px;
    --vr-card-w: calc(100% - (var(--vr-side) * 2));
    --vr-card-h: calc(var(--vr-card-w) * 3 / 4);
    height: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 190px) !important;
    min-height: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 190px) !important;
    overflow: hidden !important;
  }

  .vr-section .pencil-132 {
    top: 84px !important;
  }

  .vr-section .pencil-136 {
    margin-top: 14px !important;
  }

  .vr-section .cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    width: var(--vr-card-w) !important;
    height: var(--vr-card-h) !important;
    aspect-ratio: 4 / 3 !important;
    transform: none !important;
  }

  .vr-section .pencil-138.cupix-tour-card {
    top: var(--vr-top) !important;
  }

  .vr-section .cupix-tour-card--secondary {
    top: calc(var(--vr-top) + var(--vr-card-h) + 72px) !important;
  }

  .vr-section .cupix-frame,
  .vr-section .cupix-tour-card .cupix-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .vr-section .pencil-144 {
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    top: calc(var(--vr-top) + var(--vr-card-h) + 16px) !important;
    width: var(--vr-card-w) !important;
    transform: none !important;
  }

  .vr-section .cupix-tour-info {
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    top: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 88px) !important;
    width: var(--vr-card-w) !important;
    transform: none !important;
  }
}

/* Portfolio images hug their masonry frame without cropping the composition. */
html body .selected-works.is-masonry-enhanced [data-pencil-name="Project Image"],
html body .selected-works.is-masonry-enhanced .project-image {
  background-color: #f1f1ed !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

html body .selected-works.is-masonry-enhanced .project-image picture,
html body .selected-works.is-masonry-enhanced .project-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

html body .selected-works.is-masonry-enhanced .project-image img {
  object-fit: contain !important;
  object-position: center !important;
}

html body .selected-works.is-masonry-enhanced .portfolio-pagination {
  position: absolute;
  left: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
}

html body .selected-works.is-masonry-enhanced .portfolio-pagination__page {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #111111;
  border-radius: 50%;
  background: transparent;
  color: #111111;
  cursor: pointer;
  font-family: "Geist Mono", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
}

html body .selected-works.is-masonry-enhanced .portfolio-pagination__page.is-active,
html body .selected-works.is-masonry-enhanced .portfolio-pagination__page:hover,
html body .selected-works.is-masonry-enhanced .portfolio-pagination__page:focus-visible {
  background: #111111;
  color: #f4f3ef;
}

@media (max-width: 900px) {
  html body .selected-works.is-masonry-enhanced .portfolio-pagination {
    left: 18px;
  }
}

/* Keep the style filters separated when the exported canvas narrows. */
html body .selected-works [data-pencil-name="Style Filter Buttons"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: max-content !important;
  max-width: calc(100% - 36px) !important;
}

html body .selected-works [data-pencil-name="Filter / Modern Active"],
html body .selected-works [data-pencil-name="Filter / Classical Inactive"] {
  position: relative !important;
  inset: auto !important;
  flex: 0 1 auto !important;
  width: 170px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body .selected-works.is-masonry-enhanced [data-pencil-name="Project Metadata Instance"] {
  overflow: hidden !important;
  white-space: nowrap !important;
}

html body .selected-works.is-masonry-enhanced [data-pencil-name="Project Metadata Instance"] > [data-pencil-name="Project Meta Stack"] {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  html body .selected-works [data-pencil-name="Style Filter Buttons"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body .selected-works [data-pencil-name="Filter / Modern Active"],
  html body .selected-works [data-pencil-name="Filter / Classical Inactive"] {
    flex: 0 0 auto !important;
    width: max-content !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body .selected-works .selected-works-office-link {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tablet: shrink the heading so it no longer collides with the filter buttons/archive info. */
@media (min-width: 901px) and (max-width: 1320px) {
  .selected-works .pencil-98 {
    font-size: clamp(60px, 9vw, 130px) !important;
    line-height: .9 !important;
  }
}

/* Two-project Cupix portfolio layout overrides the original single-viewer export. */
.vr-section {
  height: 900px !important;
}

.vr-section .pencil-138.cupix-tour-card,
.vr-section .cupix-tour-card--secondary {
  top: 460px !important;
  width: 640px !important;
  height: 330px !important;
}

.vr-section .pencil-139 {
  width: 640px !important;
  height: 330px !important;
}

.vr-section .cupix-tour-card .cupix-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

@media (min-width: 901px) and (max-width: 1320px) {
  .vr-section {
    height: 1260px !important;
  }

  .vr-section .pencil-138.cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .vr-section .cupix-tour-card--secondary {
    top: 850px !important;
  }

  .vr-section .pencil-144,
  .vr-section .cupix-tour-info {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .vr-section .pencil-144 {
    top: 812px !important;
  }

  .vr-section .cupix-tour-info {
    top: 1196px !important;
  }
}

@media (max-width: 900px) {
  .vr-section {
    height: 1260px !important;
  }

  .vr-section .pencil-138.cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    right: 18px !important;
    left: 18px !important;
    width: auto !important;
    height: 300px !important;
    transform: none !important;
  }

  .vr-section .pencil-138.cupix-tour-card {
    top: 500px !important;
  }

  .vr-section .cupix-tour-card--secondary {
    top: 850px !important;
  }

  .vr-section .pencil-139 {
    width: 100% !important;
    height: 300px !important;
  }
}

@media (min-width: 901px) {
  .evolve-section,
  .pencil-46 {
    height: 100svh !important;
    min-height: 900px !important;
  }

  .vr-section,
  .pencil-129 {
    height: 100svh !important;
    min-height: 900px !important;
  }
}

@media (min-width: 901px) and (max-height: 900px) {
  .evolve-section,
  .pencil-46,
  .vr-section,
  .pencil-129 {
    min-height: 0 !important;
  }
}

@media (min-width: 1441px) {
  .why-choose-us .pencil-149 {
    gap: clamp(20px, 2.2vw, 46px) !important;
  }
}

@media (max-width: 900px) {
  .why-choose-us .pencil-159 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 8px 0 22px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .why-choose-us .pencil-149 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    height: auto !important;
  }
}

/* Pencil sync: v5Crec without deprecated Interior heading block */
.evolve-section {
  height: 1270px !important;
  min-height: 1270px !important;
}

.evolve-intro-heading {
  position: absolute;
  left: 50%;
  top: 228px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: min(1290px, calc(100% - 92px));
  height: 210px;
}

.evolve-intro-heading__line1 {
  color: #808080;
  font-family: Geist, system-ui, sans-serif;
  font-size: clamp(46px, 4.8vw, 70px);
  font-weight: 600;
  letter-spacing: -1.8px;
  line-height: .92;
  text-align: center;
}

.evolve-intro-heading__line2 {
  color: #333333;
  font-family: Geist, system-ui, sans-serif;
  font-size: clamp(46px, 4.8vw, 70px);
  font-weight: 600;
  letter-spacing: -1.8px;
  line-height: .92;
  text-align: center;
}

.evolve-body-copy {
  position: absolute;
  left: 50%;
  top: 429px;
  transform: translateX(-50%);
  z-index: 3;
  width: min(681px, calc(100% - 92px));
}

.evolve-body-copy__paragraph {
  margin: 0;
  color: #000000;
  font-family: Geist, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.48;
  text-align: justify;
}

.evolve-divider {
  position: absolute;
  left: 50%;
  top: 683px;
  transform: translateX(-50%);
  z-index: 3;
  width: min(1213px, calc(100% - 92px));
  height: 1px;
  background-color: #cccccc;
}

.evolve-section .pencil-66 {
  position: absolute;
  left: 50%;
  top: 823px;
  transform: translateX(-50%);
  width: min(739px, calc(100% - 92px));
  margin: 0;
  color: #000000;
  font-size: 76px;
  font-weight: 600;
  line-height: .85;
  text-align: center;
  text-shadow: none;
}

.evolve-subheading {
  position: absolute;
  left: 50%;
  top: 990px;
  transform: translateX(-50%);
  width: min(700px, calc(100% - 92px));
  margin: 0;
  color: #707070;
  font-size: 44px;
  font-weight: 600;
  line-height: .85;
  text-align: center;
}

@media (max-width: 900px) {
  .evolve-section {
    height: auto !important;
    min-height: 0 !important;
  }

  .evolve-body-copy,
  .evolve-divider,
  .evolve-section .pencil-66,
  .evolve-subheading {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin: 0;
  }

  .evolve-intro-heading {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: auto;
    margin-top: 26px;
    margin-bottom: 18px;
  }

  .evolve-intro-heading__line1,
  .evolve-intro-heading__line2 {
    font-size: clamp(34px, 8.5vw, 62px);
    line-height: .94;
  }

  .evolve-body-copy {
    margin-top: 20px;
  }

  .evolve-divider {
    margin: 26px 0;
  }

  .evolve-section .pencil-66 {
    margin-top: 10px;
    font-size: clamp(24px, 5.3vw, 37px);
    line-height: .9;
  }

  .evolve-subheading {
    margin-top: 10px;
    margin-bottom: 72px;
    font-size: clamp(16px, 3.5vw, 24px);
  }

  .video-portfolio-label {
    top: 34px;
    font-size: clamp(34px, 9.5vw, 44px);
  }
}

/* Stable VR layout: compact composition + strict 4:3 frames */
.vr-section {
  --vr-side: 46px;
  --vr-gap: 28px;
  --vr-top: 360px;
  --vr-card-w: min(620px, calc((100% - (var(--vr-side) * 2) - var(--vr-gap)) / 2));
  --vr-card-h: calc(var(--vr-card-w) * 3 / 4);
  height: calc(var(--vr-top) + var(--vr-card-h) + 140px) !important;
}

.vr-section .pencil-132 {
  left: var(--vr-side) !important;
  top: 92px !important;
  width: calc(100% - (var(--vr-side) * 2)) !important;
  height: auto !important;
}

.vr-section .pencil-133 {
  left: 220px !important;
}

.vr-section .pencil-134,
.vr-section .pencil-135 {
  font-size: clamp(92px, 7.9vw, 112px) !important;
  line-height: .88 !important;
}

.vr-section .pencil-136 {
  left: auto !important;
  right: 0 !important;
}

.vr-section .pencil-138.cupix-tour-card,
.vr-section .cupix-tour-card--secondary {
  top: var(--vr-top) !important;
  width: var(--vr-card-w) !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
}

.vr-section .pencil-138.cupix-tour-card {
  left: var(--vr-side) !important;
}

.vr-section .cupix-tour-card--secondary {
  left: auto !important;
  right: var(--vr-side) !important;
  transform: none !important;
}

.vr-section .pencil-139 {
  width: 100% !important;
  height: 100% !important;
}

.vr-section .pencil-144 {
  left: var(--vr-side) !important;
  top: calc(var(--vr-top) + var(--vr-card-h) + 18px) !important;
  width: var(--vr-card-w) !important;
}

.vr-section .cupix-tour-info {
  left: auto !important;
  right: var(--vr-side) !important;
  top: calc(var(--vr-top) + var(--vr-card-h) + 18px) !important;
  width: var(--vr-card-w) !important;
  transform: none !important;
}

@media (min-width: 901px) and (max-width: 1320px) {
  .vr-section {
    --vr-side: 32px;
    --vr-top: 410px;
    --vr-card-w: min(760px, calc(100% - (var(--vr-side) * 2)));
    --vr-card-h: calc(var(--vr-card-w) * 3 / 4);
    height: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 200px) !important;
  }

  .vr-section .pencil-133 {
    left: 180px !important;
  }

  .vr-section .pencil-136 {
    right: 0 !important;
  }

  .vr-section .pencil-138.cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .vr-section .cupix-tour-card--secondary {
    top: calc(var(--vr-top) + var(--vr-card-h) + 96px) !important;
  }

  .vr-section .pencil-144 {
    left: 50% !important;
    right: auto !important;
    top: calc(var(--vr-top) + var(--vr-card-h) + 56px) !important;
    transform: translateX(-50%) !important;
  }

  .vr-section .cupix-tour-info {
    left: 50% !important;
    right: auto !important;
    top: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 116px) !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 900px) {
  .vr-section {
    --vr-side: 12px;
    --vr-top: 560px;
    --vr-card-w: calc(100% - (var(--vr-side) * 2));
    --vr-card-h: calc(var(--vr-card-w) * 3 / 4);
    height: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 200px) !important;
  }

  .vr-section .pencil-130 {
    left: var(--vr-side) !important;
    width: calc(100% - (var(--vr-side) * 2)) !important;
  }

  .vr-section .pencil-132 {
    left: var(--vr-side) !important;
    top: 84px !important;
    width: calc(100% - (var(--vr-side) * 2)) !important;
    display: block !important;
  }

  .vr-section .pencil-190 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 0 14px !important;
  }

  .vr-section .pencil-133 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    gap: 2px !important;
    margin: 0 !important;
  }

  .vr-section .pencil-134,
  .vr-section .pencil-135 {
    font-size: clamp(58px, 16vw, 86px) !important;
    line-height: .9 !important;
    letter-spacing: -1.8px !important;
    white-space: normal !important;
  }

  .vr-section .pencil-136 {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 18px !important;
    gap: 14px !important;
  }

  .vr-section .pencil-138.cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    width: auto !important;
    transform: none !important;
  }

  .vr-section .cupix-tour-card--secondary {
    top: calc(var(--vr-top) + var(--vr-card-h) + 88px) !important;
  }

  .vr-section .pencil-144 {
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    width: auto !important;
    top: calc(var(--vr-top) + var(--vr-card-h) + 16px) !important;
    transform: none !important;
  }

  .vr-section .cupix-tour-info {
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    width: auto !important;
    top: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 108px) !important;
    transform: none !important;
  }

  /* Force Why Choose and footer into natural mobile flow to prevent overlap. */
  .why-choose-us,
  .pencil-146 {
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 12px 20px !important;
    overflow: visible !important;
  }

  .why-choose-us .pencil-147 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 8px !important;
    font-size: clamp(29px, 7.8vw, 41px) !important;
    line-height: .94 !important;
    text-align: center !important;
  }

  .why-choose-us .pencil-148 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .why-choose-us .pencil-159 {
    order: -1 !important;
    margin: 0 0 14px !important;
  }

  .why-choose-us .pencil-149 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .why-choose-us .pencil-149.why-choose-logoloop-source {
    display: none !important;
  }

  .why-choose-logoloop {
    margin-top: 8px;
    padding: 10px 0 6px;
  }

  .why-choose-us .pencil-150,
  .why-choose-us .pencil-157 {
    width: calc(50% - 8px) !important;
    max-width: 170px !important;
    height: 108px !important;
    padding: 10px !important;
  }

  .why-choose-us .pencil-159 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .why-choose-us .pencil-160 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .site-footer.pencil-161 {
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 12px !important;
    overflow: visible !important;
  }

  .site-footer .pencil-195 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 0 14px !important;
    font-size: 18px !important;
    white-space: normal !important;
  }

  .site-footer .pencil-162 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: clamp(84px, 25.5vw, 141px) !important;
    line-height: .88 !important;
    white-space: normal !important;
  }

  .site-footer .pencil-163 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 14px 0 16px !important;
  }

  .site-footer .pencil-164 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .site-footer .pencil-196 {
    white-space: normal !important;
  }
}

  @media (max-width: 900px) {
    .selected-works {
      min-height: 0 !important;
      height: auto !important;
      padding: 18px 12px 28px !important;
      overflow: visible !important;
    }

    .selected-works.is-masonry-enhanced {
      position: relative !important;
    }

    .selected-works .pencil-98 {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      height: auto !important;
      margin: 0 0 18px !important;
      font-size: clamp(48px, 14vw, 72px) !important;
      line-height: .88 !important;
      white-space: normal !important;
    }

    .selected-works .pencil-182,
    .selected-works [data-pencil-name="Selected Works Archive Info"] {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      width: 100% !important;
      height: auto !important;
      margin: 0 0 12px !important;
      font-size: 11px !important;
      line-height: 20px !important;
      text-align: right !important;
      white-space: normal !important;
      z-index: 0 !important;
    }

    .selected-works .pencil-99,
    .selected-works .pencil-100,
    .selected-works .pencil-101,
    .selected-works .pencil-102,
    .selected-works .pencil-103,
    .selected-works .pencil-107,
    .selected-works .pencil-109,
    .selected-works .pencil-111,
    .selected-works .pencil-113,
    .selected-works .pencil-115,
    .selected-works .pencil-117,
    .selected-works .pencil-119,
    .selected-works .pencil-121,
    .selected-works .pencil-123,
    .selected-works .pencil-125,
    .selected-works .pencil-127 {
      max-width: none !important;
    }

    .selected-works .pencil-99 {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      margin: 0 0 10px !important;
      justify-content: flex-start !important;
    }

    .selected-works .pencil-102 {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      margin: 12px 0 !important;
    }

    .selected-works.is-masonry-enhanced [data-pencil-name^="Project Card"] {
      margin: 0 !important;
      overflow: visible !important;
    }

    .selected-works.is-masonry-enhanced [data-pencil-name="Project Image"] {
      display: block !important;
      background-position: center !important;
      background-size: cover !important;
    }

    .selected-works [data-pencil-name="Project Metadata Instance"] {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      gap: 4px !important;
      min-height: 34px !important;
      padding-top: 7px !important;
    }

    .selected-works [data-pencil-name="Project Study"] {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
  }

  @media (max-width: 900px) {
    .vr-section {
      height: calc(var(--vr-top) + (var(--vr-card-h) * 2) + 170px) !important;
      padding: 16px 12px 24px !important;
    }

    .vr-section .pencil-134,
    .vr-section .pencil-135 {
      font-size: clamp(52px, 14vw, 76px) !important;
    }
  }

/* Keep the mobile masonry image layers visible after JavaScript positioning. */
@media (max-width: 900px) {
  .selected-works.is-masonry-enhanced [data-pencil-name^="Project Card"]:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
  }

  .selected-works.is-masonry-enhanced .pencil-104,
  .selected-works.is-masonry-enhanced .pencil-108,
  .selected-works.is-masonry-enhanced .pencil-110,
  .selected-works.is-masonry-enhanced .pencil-112,
  .selected-works.is-masonry-enhanced .pencil-114,
  .selected-works.is-masonry-enhanced .pencil-116,
  .selected-works.is-masonry-enhanced .pencil-118,
  .selected-works.is-masonry-enhanced .pencil-120,
  .selected-works.is-masonry-enhanced .pencil-122,
  .selected-works.is-masonry-enhanced .pencil-124,
  .selected-works.is-masonry-enhanced .pencil-126,
  .selected-works.is-masonry-enhanced .pencil-128 {
    display: block !important;
    visibility: visible !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
  }
}

/* Authoritative final VR rules: placed after legacy export overrides. */
.vr-section .pencil-130,
.vr-section [data-pencil-name="Interaction Instruction"] {
  display: none !important;
}

.vr-section .pencil-137 {
  font-weight: 300 !important;
}

.vr-section .cupix-tour-card,
.vr-section .cupix-tour-card--secondary {
  width: var(--vr-card-w) !important;
  height: var(--vr-card-h) !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}

.vr-section .cupix-frame,
.vr-section .cupix-tour-card .cupix-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.vr-section .pencil-139,
.vr-section .cupix-tour-card__fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

@media (min-width: 901px) {
  .vr-section {
    --vr-side: 46px;
    --vr-gap: 28px;
    --vr-top: 360px;
    --vr-card-w: min(620px, calc((100% - (var(--vr-side) * 2) - var(--vr-gap)) / 2));
    height: 1000px !important;
    min-height: 0 !important;
  }

  .vr-section .cupix-tour-card,
  .vr-section .cupix-tour-card--secondary {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  .vr-section .pencil-138.cupix-tour-card {
    left: var(--vr-side) !important;
    right: auto !important;
    top: var(--vr-top) !important;
  }

  .vr-section .cupix-tour-card--secondary {
    left: auto !important;
    right: var(--vr-side) !important;
    top: var(--vr-top) !important;
    transform: none !important;
  }

  .vr-section .pencil-144 {
    left: var(--vr-side) !important;
    top: 843px !important;
    width: var(--vr-card-w) !important;
    transform: none !important;
  }

  .vr-section .cupix-tour-info {
    left: auto !important;
    right: var(--vr-side) !important;
    top: 843px !important;
    width: var(--vr-card-w) !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .vr-section {
    --vr-side: 20px;
    --vr-top: 420px;
    --vr-gap: 16px;
    --vr-card-w: calc(100vw - 40px);
    --vr-card-h: calc(75vw - 30px);
    height: calc(75vw + 490px) !important;
    min-height: calc(75vw + 490px) !important;
  }

  .vr-section .cupix-tour-card--secondary {
    position: absolute !important;
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    top: var(--vr-top) !important;
    width: var(--vr-card-w) !important;
    height: var(--vr-card-h) !important;
    box-sizing: border-box !important;
    aspect-ratio: 4 / 3 !important;
    transform: none !important;
  }
}

/* Dual VR viewers: new primary walkthrough (left) alongside the existing secondary walkthrough (right), aligned and responsive. */
.vr-section .cupix-tour-card--primary,
.vr-section .cupix-tour-card--secondary {
  position: absolute !important;
  overflow: hidden !important;
  border: 1px solid #071d2f !important;
  background: #061624 !important;
  aspect-ratio: 4 / 3 !important;
}

.vr-section .cupix-tour-card--primary .cupix-frame,
.vr-section .cupix-tour-card--secondary .cupix-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

@media (min-width: 901px) {
  .vr-section {
    --vr-side: 46px;
    --vr-gap: 28px;
    --vr-top: 360px;
    --vr-card-w: min(620px, calc((100% - (var(--vr-side) * 2) - var(--vr-gap)) / 2));
  }

  .vr-section .cupix-tour-card--primary,
  .vr-section .cupix-tour-card--secondary {
    top: var(--vr-top) !important;
    width: var(--vr-card-w) !important;
    height: auto !important;
  }

  .vr-section .cupix-tour-card--primary {
    left: var(--vr-side) !important;
    right: auto !important;
    transform: none !important;
  }

  .vr-section .cupix-tour-card--secondary {
    left: auto !important;
    right: var(--vr-side) !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .vr-section {
    --vr-side: 20px;
    --vr-top: 420px;
    --vr-gap: 24px;
    --vr-card-w: calc(100vw - 40px);
    --vr-card-h: calc(75vw - 30px);
    height: calc(var(--vr-top) + (var(--vr-card-h) * 2) + var(--vr-gap) + 60px) !important;
    min-height: calc(var(--vr-top) + (var(--vr-card-h) * 2) + var(--vr-gap) + 60px) !important;
  }

  .vr-section .cupix-tour-card--primary,
  .vr-section .cupix-tour-card--secondary {
    left: var(--vr-side) !important;
    right: var(--vr-side) !important;
    width: var(--vr-card-w) !important;
    height: var(--vr-card-h) !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .vr-section .cupix-tour-card--primary {
    top: var(--vr-top) !important;
  }

  .vr-section .cupix-tour-card--secondary {
    top: calc(var(--vr-top) + var(--vr-card-h) + var(--vr-gap)) !important;
  }
}

/* Selected contact footer composition (1440x470 reference). */
@media (min-width: 901px) {
  .site-footer.pencil-161 {
    height: 470px !important;
  }

  .site-footer.pencil-161 .pencil-195 {
    left: 48px !important;
    top: 44px !important;
    font-size: 14px !important;
    line-height: normal !important;
  }

  .site-footer.pencil-161 .pencil-162 {
    left: 48px !important;
    top: 82px !important;
    font-size: 108px !important;
    line-height: 1.1 !important;
  }

  .site-footer.pencil-161 .pencil-163 {
    left: 48px !important;
    top: 208px !important;
    width: calc(100% - 96px) !important;
  }

  .site-footer.pencil-161 .pencil-164 {
    left: 48px !important;
    top: 232px !important;
    width: calc(100% - 96px) !important;
  }

  .site-footer.pencil-161 .pencil-166 {
    align-items: flex-start !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .site-footer.pencil-161 .footer-office-address {
    text-align: right !important;
  }
}

@media (max-width: 900px) {
  .site-footer.pencil-161 .pencil-166 {
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
}

/* Mobile video section: center active card, hide desktop-only side cards */
@media (max-width: 900px) {
  .video-section {
    /* Height tracks the card's own aspect-ratio height (card top 68px + bottom margin 20px) so it never clips at wider mobile/small-tablet widths. */
    height: calc(88px + (100vw - 36px) * 0.5625) !important;
    padding: 0 !important;
  }

  .video-section [data-pencil-name="Active Center Video / USJ5 x Bon Estate"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 36px) !important;
    height: calc((100vw - 36px) * 0.5625) !important;
    top: 68px !important;
  }

  .video-section [data-pencil-name="Left Side Video / Verge32 x Hijayu"],
  .video-section [data-pencil-name="Right Side Video / USJ5 x Bon Estate"],
  .video-section .pencil-78,
  .video-section .pencil-83,
  .video-section .pencil-85,
  .video-section .pencil-86,
  .video-section .pencil-87 {
    display: none !important;
  }

  .video-section .pencil-80 {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }

  .video-section .pencil-81 {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .video-section .video-portfolio-label {
    top: 20px !important;
    font-size: clamp(22px, 7vw, 32px) !important;
  }

  .video-section .video-thumb-rail {
    bottom: 16px !important;
    left: 18px !important;
    width: calc(100% - 36px) !important;
    transform: none !important;
  }
}

/* Tablet video section: same centred single-card layout as mobile, sized up, to stop the side preview cards overflowing the section. */
@media (min-width: 901px) and (max-width: 1320px) {
  .video-section {
    height: 760px !important;
    padding: 0 !important;
  }

  .video-section [data-pencil-name="Active Center Video / USJ5 x Bon Estate"] {
    left: 50% !important;
    top: 100px !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100% - 80px)) !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }

  .video-section [data-pencil-name="Left Side Video / Verge32 x Hijayu"],
  .video-section [data-pencil-name="Right Side Video / USJ5 x Bon Estate"],
  .video-section .pencil-78,
  .video-section .pencil-83,
  .video-section .pencil-85,
  .video-section .pencil-86,
  .video-section .pencil-87 {
    display: none !important;
  }

  .video-section .pencil-80 {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }

  .video-section .pencil-81 {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .video-section .video-portfolio-label {
    top: 32px !important;
    font-size: clamp(30px, 4vw, 42px) !important;
  }

  .video-section .video-thumb-rail {
    bottom: 20px !important;
  }
}

html .pencil-74, html .pencil-76, html .pencil-79 {
  background-image: none;
}
.pencil-104, .pencil-108, .pencil-110, .pencil-112, .pencil-114, .pencil-116,
.pencil-118, .pencil-120, .pencil-122, .pencil-124, .pencil-126, .pencil-128 {
  background-image: none !important;
}