:root{--cream:#fffcf6;--blue:#3288b0;--green:#4b8b48}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header{max-width:1392px;height:86px;margin:0 auto;border:0;border-radius:0;box-shadow:none;background:transparent;border-bottom:1px solid #ebdfcd;padding:0 34px}.header .brand>span{color:var(--red);font-size:32px}.header .brand img{width:43px;height:43px}.header nav{font-size:14px;gap:35px}.header .button.small{box-shadow:none}.header select{max-width:100px;border:1px solid #d6cbbd;border-radius:25px;padding:8px}
.wrap{max-width:1280px}.map-intro{max-width:1392px;display:grid;grid-template-columns:1.15fr 1fr 1fr;align-items:center;gap:36px;padding:34px 34px 30px;min-height:252px}.map-intro .eyebrow{display:inline-flex;background:#fae8df;border-radius:30px;padding:8px 14px;font-size:10px;letter-spacing:1px;line-height:1.65}.map-intro h1{font-size:48px;line-height:1.17;letter-spacing:-2.5px;margin:18px 0 0}.map-intro h1 em:after{display:none}.intro-copy{border-left:1px solid #e2d4c3;padding-left:30px}.intro-copy .lead{font-size:15px;line-height:1.8;color:#51443d;margin:0 0 18px}.intro-copy .button{padding:13px 23px;box-shadow:none}.intro-note{font-size:11px;line-height:1.8;color:#75685f;margin:15px 0 0}.intro-art{height:210px;position:relative;isolation:isolate;overflow:hidden;border-radius:48% 48% 12% 12%;background:#dbf0f7;align-self:end}.intro-art>img{height:100%;width:100%;object-fit:cover;object-position:58% 10%;opacity:.75}.intro-art .mascot{position:absolute;bottom:-17px;left:12%;width:220px;z-index:2;animation:map-wave 5s ease-in-out infinite;transform-origin:center bottom}.intro-sun{position:absolute;width:52px;height:52px;border-radius:50%;background:#ffe6a0;top:16px;right:28px;z-index:-1}
.map-experience{max-width:1392px;margin:0 auto 50px;padding:0 20px;scroll-margin-top:20px}.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;border:1px solid #e6d6be;border-radius:28px;overflow:hidden;background:#fffdf8;box-shadow:0 8px 22px #6344290c;padding:8px}.map-column{min-width:0;position:relative;border-radius:22px;overflow:hidden;background:#f7ecd5;display:flex;flex-direction:column}.map-filters{position:absolute;top:16px;left:16px;right:16px;z-index:4;display:flex;gap:8px;flex-wrap:wrap}.map-filter{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:30px;border:1px solid #e9decb;background:#fffef9f5;color:#4a3930;font-size:12px;line-height:1.6;font-weight:700;box-shadow:0 3px 6px #62472910;transition:background .2s,transform .2s}.map-filter svg{width:20px;height:20px;flex:none;color:var(--red)}.map-filter[data-filter=shops] svg{color:var(--blue)}.map-filter[data-filter=community] svg{color:var(--green)}.map-filter:hover{transform:translateY(-2px)}.map-filter.active{color:#fff;background:var(--red);border-color:var(--red)}.map-filter.active svg{color:#fff}.map-filter[data-filter=shops].active{background:var(--blue);border-color:var(--blue)}.map-filter[data-filter=community].active{background:var(--green);border-color:var(--green)}
.map-scene{position:relative;aspect-ratio:3/2;min-height:510px;flex:1;isolation:isolate;--pin-color:var(--red)}.neighborhood-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-2}.map-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}.map-route path{fill:none;stroke:var(--pin-color);stroke-width:6;stroke-linecap:round;stroke-dasharray:1 17;filter:drop-shadow(0 2px 1px white);animation:path-travel 4s linear infinite}.map-scene[data-selected=shops]{--pin-color:var(--blue)}.map-scene[data-selected=community]{--pin-color:var(--green)}
.map-pin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:4px;transform:translate(-50%,-100%);z-index:2;color:var(--red);--pin-color:var(--red);transition:filter .2s}.map-pin[hidden]{display:none}.pin-market{left:51%;top:49%}.pin-shops{left:82%;top:33%;--pin-color:var(--blue);color:var(--blue)}.pin-community{left:78%;top:72%;--pin-color:var(--green);color:var(--green)}.pin-body{width:60px;height:60px;display:grid;place-items:center;border-radius:50% 50% 50% 8%;transform:rotate(-45deg);background:var(--pin-color);border:3px solid white;box-shadow:-3px 4px 0 #4e392222;transition:transform .25s,box-shadow .25s}.pin-body svg{width:27px;height:27px;transform:rotate(45deg);color:#fff}.pin-label{max-width:150px;line-height:1.5;display:block;margin-top:8px;background:#fffef9;color:#413129;border:1px solid #dfd0bd;box-shadow:0 2px 5px #533c1526;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}.map-pin.selected{z-index:3}.map-pin.selected .pin-body{transform:rotate(-45deg) scale(1.13);box-shadow:0 0 0 9px #ffffff70,0 0 0 13px color-mix(in srgb,var(--pin-color) 35%,transparent),-4px 6px 0 #4e392222}.map-pin:hover .pin-body{transform:rotate(-45deg) scale(1.15)}.map-pin:focus-visible{outline-offset:10px;border-radius:12px}
.map-guide{position:absolute;left:3%;bottom:1%;display:flex;align-items:center;z-index:3;max-width:49%;pointer-events:none}.map-guide .mascot{width:112px;transition:transform .3s;flex:none}.guide-bubble{background:#fffef9;border:1.5px solid #675143;border-radius:24px;padding:12px 16px;position:relative;margin-left:-10px;margin-bottom:54px;box-shadow:3px 4px 0 #5e44231c;line-height:1.7;min-width:160px;max-width:220px}.guide-bubble:after{content:'';position:absolute;width:12px;height:12px;border-left:1.5px solid #675143;border-bottom:1.5px solid #675143;background:inherit;left:15px;bottom:-7px;transform:skew(-20deg) rotate(-35deg)}.guide-bubble strong{display:block;font-size:12px}.guide-bubble>span{display:block;font-size:11px;color:#5b4b41}.map-caption{background:#fdf6e7;padding:9px 14px;display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:9px;line-height:1.7;color:#78634e}.map-caption-dot{width:5px;height:5px;border-radius:50%;background:#b7a28b;flex:none}
.map-detail.feature-panel{display:flex;flex-direction:column;background:#fffdf8;border:0;border-radius:0;box-shadow:none;gap:0;padding:24px 24px 17px;min-height:0;overflow:hidden;text-align:left;align-items:stretch;justify-content:flex-start}.map-detail .pill{align-self:flex-start;border:0;background:#fbe8e2;color:var(--red);padding:7px 11px;font-size:9px;letter-spacing:.7px}.map-detail h3{font-size:25px;line-height:1.4;letter-spacing:-1px;margin:15px 0 10px}.map-detail p{font-size:12px;line-height:1.8;margin:0;color:#6b5a50}.detail-preview{position:relative;margin:20px auto 0;width:145px;flex:none}.detail-preview #feature-image{width:145px;height:285px;object-fit:cover;object-position:top;border-radius:16px;transform:none;box-shadow:0 0 0 5px #fff,0 0 0 6px #e4d8c9,8px 12px 20px #72522d18}.map-detail #feature-mascot{position:absolute;width:83px;right:-57px;bottom:-10px;margin:0;filter:drop-shadow(0 4px 2px #ae926c38)}.map-detail .screen-note{font-size:8px;text-align:center;margin:14px 0 12px;line-height:1.6}.map-detail .detail-cta{font-size:12px;text-align:center;justify-content:center;box-shadow:none;padding:13px 14px;margin-top:auto;line-height:1.6}.map-detail[data-feature=shops] .pill{background:#e0f1f7;color:#206b8c}.map-detail[data-feature=community] .pill{background:#eaf1df;color:#416b32}
.how{background:#fbf1da;border:0;padding:55px 0 65px}.how .section-head h2{max-width:780px}.how h2{font-size:36px}.how .section-head{align-items:center}.story-scene{height:210px}.story-scene .mascot{width:210px;height:210px}.overview{padding-top:60px;padding-bottom:55px}.community{padding-top:60px}
@keyframes path-travel{to{stroke-dashoffset:-72}}@keyframes map-wave{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg)}}
html[lang=lo] .map-intro h1,html[lang=th] .map-intro h1{font-size:36px;line-height:1.55;letter-spacing:-.5px}html[lang=ko] .map-intro h1{font-size:43px;line-height:1.35;letter-spacing:-2.1px}html[lang=en] .map-intro h1{font-size:42px;line-height:1.2}html[lang=lo] .map-filter,html[lang=th] .map-filter{font-size:11px}html[lang=lo] .map-detail h3,html[lang=th] .map-detail h3{font-size:22px;line-height:1.6}html[lang=lo] .map-detail,html[lang=th] .map-detail{grid-template-columns:none}
@media(min-width:1550px){.map-scene{min-height:565px}.map-intro{min-height:275px}}
@media(max-width:1100px){.header{margin:0 20px;padding:0 8px}.header nav{gap:20px;font-size:12px}.map-intro{grid-template-columns:1.15fr 1fr;gap:25px;padding:28px 32px}.intro-art{display:none}.map-intro h1,html[lang=en] .map-intro h1{font-size:42px}.map-layout{grid-template-columns:minmax(0,1fr) 285px}.map-filter{padding:9px 12px;font-size:11px;gap:5px}.map-filter svg{width:17px;height:17px}.map-filters{gap:6px;top:12px;left:12px;right:12px}.map-scene{min-height:510px}.map-detail.feature-panel{padding:22px 20px 16px}.map-detail h3{font-size:23px}.guide-bubble{min-width:120px;padding:9px 12px;margin-bottom:60px}.map-guide{max-width:65%}.map-guide .mascot{width:93px}.pin-label{font-size:10px;padding:4px 8px}.pin-body{width:53px;height:53px}}
@media(max-width:760px){html{scroll-padding-top:16px}.header{height:76px;margin:0 16px;padding:0;gap:8px}.header .brand>span{font-size:26px}.header .brand img{width:33px;height:33px}.header nav{display:none}.header-right{gap:8px}.header select{font-size:10px;padding:7px;max-width:78px}.header .button.small{font-size:10px;padding:11px 13px}.map-intro{grid-template-columns:1fr;gap:21px;padding:28px 23px 25px;min-height:0}.intro-copy{padding:0;border:0}.map-intro .eyebrow{font-size:9px;padding:7px 11px}.map-intro h1,html[lang=en] .map-intro h1{font-size:40px;line-height:1.22;letter-spacing:-2px;margin-top:16px}.intro-copy .lead{font-size:14px;margin-bottom:15px;line-height:1.8}.intro-copy .lead br{display:none}.intro-copy .button{padding:13px 21px;font-size:12px}.intro-note{font-size:10px;margin-top:13px}.map-experience{padding:0 12px;margin-bottom:35px}.map-layout{grid-template-columns:1fr;border-radius:23px;padding:5px}.map-column{border-radius:18px}.map-filters{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:11px;background:#fff9ed}.map-filter{padding:8px 10px;font-size:11px;box-shadow:none}.map-scene{min-height:340px;aspect-ratio:1.15;flex:auto}.pin-body{width:48px;height:48px;border-width:2.5px}.pin-body svg{width:23px;height:23px}.pin-label{font-size:9px;white-space:normal;max-width:99px;padding:3px 7px;min-width:57px}.pin-market{top:49%}.pin-shops{left:81%;top:31%}.pin-community{left:78%;top:72%}.map-pin.selected .pin-body{box-shadow:0 0 0 6px #ffffff70,0 0 0 9px color-mix(in srgb,var(--pin-color) 35%,transparent)}.map-guide{left:1%;bottom:0;max-width:66%}.map-guide .mascot{width:74px}.guide-bubble{min-width:112px;max-width:151px;border-radius:15px;padding:7px 9px;margin-left:-7px;margin-bottom:33px}.guide-bubble strong{font-size:9px}.guide-bubble>span{font-size:9px;line-height:1.6}.map-route path{stroke-width:7}.map-caption{font-size:8px;padding:7px 10px;justify-content:center}.map-detail.feature-panel,html[lang=lo] .map-detail,html[lang=th] .map-detail{display:grid;grid-template-columns:minmax(0,1fr) 108px;align-items:center;gap:0 19px;padding:22px 18px 16px;border-radius:0;min-height:0}.map-detail .detail-copy{grid-column:1;grid-row:1}.map-detail h3{font-size:22px;line-height:1.4;margin:12px 0 9px;letter-spacing:-.9px}.map-detail p{font-size:11px;line-height:1.85}.map-detail .pill{font-size:8px;padding:6px 9px;letter-spacing:.3px}.detail-preview{grid-column:2;grid-row:1;margin:5px 0;width:100px}.detail-preview #feature-image{width:100px;height:210px;border-radius:10px}.map-detail #feature-mascot{width:54px;right:-6px;bottom:-12px}.map-detail .screen-note{grid-column:1/-1;grid-row:2;font-size:8px;margin:20px 0 12px}.map-detail .detail-cta{grid-column:1/-1;grid-row:3;font-size:12px;padding:12px}.how{padding:40px 0 50px}.how h2{font-size:29px;line-height:1.35}.how .section-head{display:block}.how .section-head>a{margin-top:20px}.how .section-head h2{margin-top:14px}.story-scene{height:220px}.story-scene .mascot{width:220px;height:220px}.overview{padding-top:40px;padding-bottom:40px}html[lang=lo] .map-intro h1,html[lang=th] .map-intro h1{font-size:34px;line-height:1.5}html[lang=ko] .map-intro h1{font-size:38px;line-height:1.35}html[lang=lo] .map-detail h3,html[lang=th] .map-detail h3{font-size:19px;line-height:1.7}html[lang=lo] .pin-label{font-size:9px}}
@media(max-width:360px){.header{margin:0 12px}.header .brand small{display:none}.header .brand>span{font-size:23px}.header select{max-width:65px;padding:5px}.header .button.small{font-size:9px;padding:10px}.map-intro{padding-left:20px;padding-right:20px}.map-intro h1,html[lang=en] .map-intro h1{font-size:35px}.map-experience{padding:0 8px}.map-scene{min-height:315px}.map-detail.feature-panel,html[lang=lo] .map-detail,html[lang=th] .map-detail{grid-template-columns:minmax(0,1fr) 88px;gap:0 15px;padding:20px 15px 15px}.detail-preview,.detail-preview #feature-image{width:83px}.detail-preview #feature-image{height:180px}.map-detail h3{font-size:20px}.map-guide .mascot{width:64px}.guide-bubble{max-width:130px;min-width:105px}html[lang=ko] .map-intro h1{font-size:34px}html[lang=lo] .map-intro h1,html[lang=th] .map-intro h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.map-route path,.intro-art .mascot{animation:none}.pin-body,.map-filter,.map-guide .mascot{transition:none}}
html[lang=ko] .map-detail h3{word-break:keep-all;overflow-wrap:normal}
@media(max-width:760px){html[lang=ko] .map-detail h3{font-size:20px;line-height:1.5}}
/* The guide's feet follow the route; the bubble stays readable on either side. */
.map-scene .map-guide{left:12%;top:91.45%;bottom:auto;width:112px;height:112px;max-width:none;display:block;transform:translate(-50%,-100%);z-index:3}
.map-scene .map-guide .mascot{width:100%;height:100%;transition:none;transform-origin:50% 90%}
.map-scene .guide-bubble{position:absolute;left:calc(50% + 25px);bottom:calc(100% - 25px);margin:0;width:185px;min-width:0;max-width:none;transition:opacity .15s,visibility .15s}
.map-guide.bubble-left .guide-bubble{left:auto;right:calc(50% + 25px)}
.map-guide.bubble-left .guide-bubble:after{left:auto;right:15px;transform:skew(20deg) rotate(-55deg)}
.map-guide.moving .guide-bubble{opacity:0;visibility:hidden}
.map-guide.moving .mascot{animation:uni-walk .3s ease-in-out infinite}
.map-guide.arrived .mascot{animation:uni-arrive .45s ease-out}
@keyframes uni-walk{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(5deg)}}
@keyframes uni-arrive{0%{transform:scale(.9)}55%{transform:translateY(-9px) scale(1.04)}100%{transform:none}}
@media(max-width:1100px){.map-scene .map-guide{width:93px;height:93px}.map-scene .guide-bubble{width:160px}}
@media(max-width:760px){.map-scene .map-guide{width:74px;height:74px}.map-scene .guide-bubble{width:132px;left:calc(50% + 12px);bottom:calc(100% - 16px)}.map-guide.bubble-left .guide-bubble{left:auto;right:calc(50% + 12px)}}
@media(max-width:360px){.map-scene .map-guide{width:64px;height:64px}.map-scene .guide-bubble{width:118px}}
@media(prefers-reduced-motion:reduce){.map-guide.moving .mascot,.map-guide.arrived .mascot{animation:none}.map-scene .guide-bubble{transition:none}}
.pin-click-hint{position:absolute;top:auto;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid var(--pin-color);background:var(--pin-color);color:#fff;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:800;line-height:1.5;box-shadow:0 3px 7px #533c1525;animation:click-invite 1.8s ease-in-out infinite;pointer-events:none}
.pin-click-hint:before{content:'👇';margin-right:4px}
.map-pin,.map-pin.selected{z-index:4}.map-filters{z-index:5}
@keyframes click-invite{0%,100%{opacity:1}50%{opacity:.55}}
@media(max-width:760px){.map-scene{min-height:420px}.pin-click-hint{font-size:9px;padding:3px 7px;top:auto;bottom:calc(100% + 12px)}}
@media(prefers-reduced-motion:reduce){.pin-click-hint{animation:none;opacity:1}}