:root{--ink:#17231a;--green:#416937;--deep:#294d2c;--lime:#cddf8a;--cream:#f5f2e7;--paper:#fffdf7;--orange:#ee8138;--line:rgba(23,35,26,.14);--shadow:0 24px 70px rgba(32,55,31,.14);--shell:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:"DM Sans","Noto Sans Thai",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}.section-shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:100;width:100%;background:rgba(255,253,247,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.nav-inner{width:100%;min-height:78px;padding:0 clamp(22px,4vw,68px);display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:5px;flex:0 0 auto}.brand img{width:46px;height:46px;object-fit:contain}.brand span,.footer-brand span{font-size:1.2rem;font-weight:700;letter-spacing:.075em}.site-header nav{display:flex;align-items:center;gap:30px;margin-left:auto}.site-header nav a{font-size:.88rem;font-weight:600;color:#4f5b50;transition:.2s}.site-header nav a:hover{color:var(--green)}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:.92rem;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px);background:var(--green)}.button b{font-size:1.12rem}.button-small{min-height:43px;padding-inline:18px;font-size:.84rem}.section-kicker,.eyebrow,.feature-label{font-size:.72rem;font-weight:700;letter-spacing:.14em}.section-kicker{color:var(--green);margin:0 0 28px}.intro{position:relative;padding:104px 0 118px;background:linear-gradient(135deg,#f7f4e9 0%,#eef3e5 62%,#dfe9cc 100%);overflow:hidden}.intro::after{content:"";position:absolute;width:520px;height:520px;right:-170px;bottom:-310px;border:1px solid rgba(65,105,55,.17);border-radius:50%;box-shadow:0 0 0 75px rgba(255,255,255,.12),0 0 0 150px rgba(65,105,55,.05)}.intro-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .65fr;gap:80px;align-items:end}.intro h1,.hero h2,.slider-heading h2,.community h2,.cta h2{margin:0;font-weight:600;letter-spacing:-.06em;line-height:1.1}.intro h1{font-size:clamp(3.1rem,5.8vw,6.1rem)}em{font-family:Georgia,"Noto Serif Thai",serif;font-weight:400;color:var(--green)}.intro-copy{margin:0 0 8px;color:#5c675d;line-height:1.9}.hero{position:relative;padding:92px 0 110px;background:linear-gradient(180deg,#f5f2e7 0%,#fffdf7 70%,#f7f7ef 100%)}.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}.hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--green);margin:0 0 22px}.eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--orange)}.hero h2{font-size:clamp(3.1rem,5.4vw,5.8rem)}.hero-description{max-width:470px;color:#59645a;line-height:1.9;margin:28px 0 0}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:32px}.text-link{font-size:.9rem;font-weight:700;border-bottom:1px solid;padding-bottom:4px}.hero-visual{position:relative}.hero-visual::before{content:"";position:absolute;inset:-25px 15% -25px -25px;background:var(--lime);border-radius:48% 52% 45% 55%/55% 43% 57% 45%;transform:rotate(-3deg)}.hero-visual img{position:relative;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}.floating-tag{position:absolute;right:-20px;bottom:-22px;padding:16px 20px;border-radius:16px;background:#fff;box-shadow:0 18px 45px rgba(24,45,26,.2)}.floating-tag small{display:block;color:var(--orange);font-weight:700;margin-bottom:4px}.floating-tag strong{font-size:.86rem;letter-spacing:.08em}.feature-section{position:relative;padding:110px 0 125px;background:linear-gradient(145deg,#eaf0df 0%,#f4f2e6 48%,#efe8d7 100%)}.feature-section::before{content:"";position:absolute;left:-8%;top:20%;width:300px;height:300px;border-radius:50%;background:rgba(205,223,138,.35);filter:blur(2px)}.slider-heading{position:relative;display:flex;gap:40px;align-items:end;justify-content:space-between;margin-bottom:34px}.slider-heading h2{font-size:clamp(2.7rem,4.4vw,4.8rem)}.slide-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.slide-tab,.pause-button{border:1px solid var(--line);background:rgba(255,253,247,.78);color:#596358;cursor:pointer}.slide-tab{padding:11px 15px;border-radius:999px;font-weight:700;font-size:.82rem}.slide-tab span{margin-right:7px;font-size:.68rem;color:#8b9588}.slide-tab.is-active{background:var(--ink);color:#fff}.slide-tab.is-active span{color:var(--lime)}.pause-button{width:42px;height:42px;border-radius:50%;font-weight:700}.slider-stage{position:relative}.feature{display:none;grid-template-columns:.68fr 1.32fr;min-height:510px;background:rgba(255,253,247,.9);border:1px solid rgba(23,35,26,.1);border-radius:30px;box-shadow:var(--shadow);overflow:hidden}.feature.is-active{display:grid;animation:slide-in .45s ease}.feature-copy{padding:60px 42px 50px 52px;display:flex;flex-direction:column;justify-content:center}.number{font-size:.72rem;color:#71806f}.feature-label{color:var(--green);margin:35px 0 15px}.feature h3{margin:0;font-size:clamp(2.5rem,3.8vw,4rem);line-height:1.08;letter-spacing:-.055em}.feature-copy>p:last-child{color:#5b665c;line-height:1.8;margin:23px 0 0}.feature-image{display:grid;place-items:center;padding:28px;background:linear-gradient(145deg,#dce9d2,#f1ecdc)}.feature-image img{width:100%;max-width:740px;aspect-ratio:16/10;object-fit:cover;border-radius:20px;box-shadow:0 20px 45px rgba(31,53,31,.2)}@keyframes slide-in{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}.community{padding:120px 0;background:linear-gradient(180deg,#294d2c 0%,#355b35 100%);color:#fff}.community-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:85px;align-items:center}.community-photo{min-height:530px;border-radius:34px;background:linear-gradient(180deg,transparent 55%,rgba(19,46,22,.35)),url('https://images.unsplash.com/photo-1505471768190-275e2ad7b3f9?auto=format&fit=crop&w=1500&q=85') center/cover;box-shadow:0 25px 60px rgba(0,0,0,.25)}.community .section-kicker{color:var(--lime)}.community h2{font-size:clamp(3rem,5vw,5.4rem)}.community h2 em{color:var(--lime)}.community-copy>p:not(.section-kicker){max-width:500px;color:rgba(255,255,255,.74);line-height:1.9;margin:28px 0}.button-light{background:#fff;color:var(--ink)}.cta{position:relative;text-align:center;padding:125px 24px 135px;background:linear-gradient(180deg,#f5f2e7 0%,#fffdf7 100%);overflow:hidden}.cta-orbit{position:absolute;left:50%;top:52%;width:630px;height:630px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(65,105,55,.13);box-shadow:0 0 0 80px rgba(205,223,138,.08),0 0 0 160px rgba(65,105,55,.035)}.cta>*:not(.cta-orbit){position:relative}.cta h2{font-size:clamp(3rem,5.5vw,5.8rem)}.cta>p:not(.section-kicker){color:#5a665b;line-height:1.85;margin:24px 0 30px}footer{background:#17231a;color:#fff;padding:48px clamp(24px,5vw,72px) 24px}.footer-main{display:grid;grid-template-columns:1fr auto auto;gap:50px;align-items:center;padding-bottom:36px}.footer-brand{display:flex;align-items:center;gap:5px}.footer-brand img{width:44px;height:44px;object-fit:contain}.policy-links{display:flex;gap:25px;flex-wrap:wrap}.policy-links a,.back-top{font-size:.8rem;color:rgba(255,255,255,.72);transition:.2s}.policy-links a:hover,.back-top:hover{color:var(--lime)}.footer-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.13);padding-top:22px}.footer-bottom p{margin:0;font-size:.75rem;color:rgba(255,255,255,.5)}.language-switcher{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.35)}.language-button{padding:0;border:0;background:none;color:rgba(255,255,255,.48);font-weight:700;font-size:.78rem;cursor:pointer}.language-button.is-active{color:var(--lime)}
@media(max-width:900px){.site-header nav{display:none}.nav-inner{padding-inline:22px}.intro-grid,.hero-grid,.community-grid{grid-template-columns:1fr;gap:48px}.intro{padding:75px 0 85px}.intro-copy{max-width:600px}.hero{padding:75px 0 90px}.hero-copy{max-width:650px}.hero-visual{margin:0 12px}.slider-heading{align-items:flex-start;flex-direction:column}.slide-controls{justify-content:flex-start}.feature{grid-template-columns:1fr}.feature-copy{padding:42px 34px}.feature-image{min-height:370px}.community{padding:85px 0}.community-photo{min-height:390px}.community-copy{order:-1}.footer-main{grid-template-columns:1fr auto}.policy-links{grid-column:1/-1;grid-row:2}.back-top{grid-column:2;grid-row:1}}
@media(max-width:600px){.section-shell{width:min(100% - 36px,var(--shell))}.nav-inner{min-height:70px}.brand img{width:39px;height:39px}.brand span{font-size:1rem}.button-small{min-height:39px;padding-inline:14px}.button-small b{display:none}.intro h1,.hero h2,.community h2,.cta h2{line-height:1.14}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.floating-tag{right:-8px}.feature-section{padding:78px 0 88px}.slide-controls{gap:6px}.slide-tab{padding:9px 11px}.feature-copy{padding:35px 24px}.feature-image{min-height:260px;padding:16px}.feature-image img{border-radius:14px}.community-photo{min-height:310px}.footer-main{display:flex;align-items:flex-start;flex-direction:column;gap:24px}.policy-links{flex-direction:column;gap:14px}.footer-bottom{align-items:flex-end;gap:18px}.footer-bottom p{max-width:190px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.feature.is-active{animation:none}.button{transition:none}}
.community-photo{background-image:linear-gradient(180deg,transparent 55%,rgba(19,46,22,.35)),url('../images/buy/Buy.png')}
.keep-line{display:inline-block;white-space:nowrap}

/* Full-width hero artwork: preserve the complete Mix image without cropping. */
.hero-grid{display:block;width:100%}
.hero-copy{width:min(var(--shell),calc(100% - 48px));margin:0 auto 64px}
.hero-visual{width:100vw;margin-left:calc(50% - 50vw)}
.hero-visual::before{display:none}
.hero-visual img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;box-shadow:none}
.hero-visual .floating-tag{right:clamp(18px,4vw,68px);bottom:clamp(18px,3vw,45px)}

/* Concept artwork is shown in full rather than used as a cropped background. */
.community-photo{display:grid;place-items:center;min-height:0;padding:18px;background:rgba(255,255,255,.07);overflow:hidden}
.community-photo img{width:100%;height:auto;max-height:680px;object-fit:contain;border-radius:22px}

@media(max-width:600px){.hero-copy{width:calc(100% - 36px);margin-bottom:42px}.community h2 .keep-line{font-size:clamp(1.75rem,8.7vw,3rem);letter-spacing:-.07em}.feature h3 .keep-line{font-size:clamp(2rem,10vw,3rem)}}

/* Restore the original two-column hero while keeping the complete Mix artwork. */
.hero-grid{display:grid;width:min(var(--shell),calc(100% - 48px));grid-template-columns:.8fr 1.2fr;gap:70px}
.hero-copy{width:auto;margin:0}
.hero-visual{width:auto;margin:0}
.hero-visual img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:28px;box-shadow:var(--shadow)}
.hero-visual .floating-tag{right:-20px;bottom:-22px}

/* Larger Concept artwork without the surrounding card. */
.community-grid{grid-template-columns:.9fr 1.1fr;gap:72px}
.community-photo{display:block;min-height:0;padding:0;background:none;border-radius:0;overflow:visible}
.community-photo img{width:auto;max-width:100%;height:auto;max-height:820px;margin-inline:auto;object-fit:contain;border-radius:52px;box-shadow:0 34px 80px rgba(7,25,11,.42),0 8px 22px rgba(7,25,11,.24)}

@media(max-width:900px){.hero-grid{grid-template-columns:1fr;width:min(var(--shell),calc(100% - 48px));gap:48px}.hero-copy{max-width:650px}.hero-visual{margin:0 12px}.community-grid{grid-template-columns:1fr}.community-photo img{max-height:760px}}
@media(max-width:600px){.hero-grid{width:calc(100% - 36px)}.hero-copy{width:auto;margin:0}.hero-visual{margin:0}.hero-visual img{border-radius:18px}.hero-visual .floating-tag{right:-8px;bottom:-16px}.community-photo img{max-height:680px;border-radius:34px}}

/* Concept is a direct grid image—no wrapper or extra background layer. */
.community-concept{display:block;width:auto;max-width:100%;height:auto;max-height:860px;margin-inline:auto;object-fit:contain;border-radius:54px;box-shadow:0 34px 80px rgba(7,25,11,.42),0 8px 22px rgba(7,25,11,.24)}

/* Give the feature slideshow more visual weight. */
.feature-section>.section-shell{width:min(1380px,calc(100% - 48px))}
.feature{min-height:610px;grid-template-columns:.58fr 1.42fr}
.feature-copy{padding:70px 46px 60px 58px}
.feature-image{min-height:610px;padding:24px}
.feature-image img{max-width:900px;width:100%;border-radius:24px}

@media(max-width:900px){.community-concept{max-height:780px}.feature{grid-template-columns:1fr;min-height:0}.feature-image{min-height:440px}.feature-section>.section-shell{width:min(100% - 48px,1380px)}}
@media(max-width:600px){.community-concept{max-height:700px;border-radius:36px}.feature-section>.section-shell{width:calc(100% - 36px)}.feature-copy{padding:38px 25px}.feature-image{min-height:300px;padding:14px}.feature-image img{border-radius:16px}}

/* Enlarge the Mix artwork while preserving its complete aspect ratio. */
.hero-grid{width:min(1360px,calc(100% - 48px));grid-template-columns:.68fr 1.32fr;gap:42px}
.hero-visual img{width:100%;max-width:none}
@media(max-width:900px){.hero-grid{width:min(100% - 48px,1360px);grid-template-columns:1fr}.hero-visual{width:100%;margin:0}.hero-visual img{width:100%}}
@media(max-width:600px){.hero-grid{width:calc(100% - 36px)}}

/* Floating botanical navigation with a concave logo cradle. */
.site-header{top:0;padding:12px clamp(14px,2.2vw,34px) 0;background:transparent;border:0;backdrop-filter:none;pointer-events:none}
.nav-inner{position:relative;width:100%;max-width:1480px;min-height:68px;margin:auto;padding:0 clamp(20px,3vw,44px) 0 238px;border:1px solid rgba(255,255,255,.45);border-radius:22px 22px 28px 28px;background:linear-gradient(110deg,rgba(211,226,139,.8) 0%,rgba(103,150,68,.8) 38%,rgba(43,91,48,.8) 72%,rgba(25,62,38,.8) 100%);box-shadow:0 16px 38px rgba(29,65,36,.18);backdrop-filter:blur(16px);pointer-events:auto}
.nav-inner::before{content:"";position:absolute;left:22px;top:-13px;width:194px;height:80px;border-radius:0 0 38px 38px;background:rgba(255,253,247,.95);box-shadow:0 10px 18px rgba(31,67,35,.12)}
.nav-inner::after{content:"";position:absolute;left:16px;top:-14px;width:206px;height:15px;background:var(--cream);border-radius:0 0 50% 50%}
.brand{position:absolute;z-index:2;left:34px;top:-4px;width:170px;height:62px;display:grid;place-items:center;overflow:visible}
.brand-orbit{display:grid;place-items:center;width:100%;height:100%}
.brand-orbit img{width:164px;height:auto;object-fit:contain;filter:drop-shadow(0 7px 9px rgba(21,49,25,.22));transition:transform .25s ease}
.brand:hover .brand-orbit img{transform:translateY(-2px) scale(1.025)}
.site-header nav{margin-left:auto}.site-header nav a{color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(17,48,24,.2)}.site-header nav a:hover{color:#f4ffbf}
.site-header .button-small{background:rgba(255,255,255,.93);color:var(--deep);box-shadow:0 8px 22px rgba(16,50,25,.18)}.site-header .button-small:hover{background:#fff;color:var(--green)}
.footer-brand img{width:158px;height:auto;max-height:52px;object-fit:contain}

@media(max-width:900px){.nav-inner{padding-left:210px}.nav-inner::before{width:170px}.nav-inner::after{width:182px}.brand{left:31px;width:144px}.brand-orbit img{width:140px}}
@media(max-width:600px){.site-header{padding:8px 9px 0}.nav-inner{min-height:62px;padding:0 12px 0 151px;border-radius:18px 18px 23px 23px}.nav-inner::before{left:9px;top:-9px;width:132px;height:70px;border-radius:0 0 28px 28px}.nav-inner::after{left:5px;top:-10px;width:140px;height:12px}.brand{left:15px;top:0;width:120px;height:55px}.brand-orbit img{width:118px}.site-header .button-small{font-size:.75rem;padding-inline:13px}.footer-brand img{width:138px}}
