@font-face{font-family:"Noto Sans Thai";src:url("assets/noto-sans-thai-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("assets/noto-sans-thai-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("assets/noto-sans-thai-700.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--blue:#1d4f9c;--blue-dark:#14376e;--blue-soft:#eef4fc;--line:#e2e9f1;--ink:#1c2533;--muted:#5d6878;--white:#fff;--footer:#0f2a55;--green:#20bd64;--shadow:0 12px 34px rgba(17,55,96,.08)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:"Noto Sans Thai",system-ui,sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
.wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.skip-link{position:fixed;z-index:1000;left:16px;top:-80px;background:#fff;color:var(--blue-dark);padding:10px 15px;border-radius:6px;box-shadow:var(--shadow)}
.skip-link:focus{top:12px}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.header-inner{height:78px;display:flex;align-items:center;gap:24px}
.brand{display:flex;flex:0 0 auto}.brand img{width:170px;height:auto}
.desktop-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.desktop-nav a{font-weight:600;font-size:.91rem;color:#273c58;white-space:nowrap}
.desktop-nav a:hover,.desktop-nav a:focus-visible{color:var(--blue)}
.account-links{display:flex;gap:13px;color:var(--muted);font-size:.82rem;white-space:nowrap}
.menu-toggle{display:none;margin-left:auto;border:1px solid #b8c9d9;background:#fff;color:var(--blue-dark);border-radius:999px;min-height:44px;padding:0 17px;font-weight:700}
.mobile-nav{padding:12px 20px 22px;border-top:1px solid var(--line);background:#fff}.mobile-nav a{display:block;padding:10px 0;font-weight:600}

.image-section{width:100%;background:#f7f9fc;overflow:hidden}
.image-section img{width:100%;height:auto;margin:0}
.hero-image{background:#edf3fb}
.hero-image img{max-height:720px;object-fit:cover;object-position:center}
.band{padding:52px 0;background:var(--blue-soft);scroll-margin-top:78px}
.band-white{background:#fff}
.eyebrow{margin:0 0 7px;color:var(--blue);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3{color:var(--blue-dark);line-height:1.35}
h1{max-width:1050px;margin:0 0 13px;font-size:clamp(2rem,3.2vw,3rem);letter-spacing:-.025em}
h2{margin:0 0 12px;font-size:clamp(1.7rem,2.6vw,2.35rem);letter-spacing:-.02em}
h3{font-size:1.02rem;margin:0 0 6px}
.lead,.section-intro,.narrow-copy>p{max-width:900px;margin:0;color:var(--muted);font-size:1.05rem}
.intro-band{padding-top:48px;padding-bottom:54px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.stats-grid article{padding:20px 18px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px}
.stats-grid strong{display:block;color:var(--blue);font-size:1rem}
.stats-grid span{display:block;color:var(--muted);font-size:.87rem;margin-top:3px}
.narrow-copy{max-width:1240px}

.card-grid{display:grid;gap:18px;margin-top:24px}
.product-text-grid{grid-template-columns:repeat(5,1fr)}
.three-columns{grid-template-columns:repeat(3,1fr)}
.four-columns{grid-template-columns:repeat(4,1fr)}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:21px;transition:transform .18s,box-shadow .18s}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);outline:0}
.card p{margin:0;color:var(--muted);font-size:.91rem;line-height:1.6}
.card>a,.card>span:last-child{display:inline-block;margin-top:10px;color:var(--blue);font-size:.86rem;font-weight:700}
.step{display:inline-grid;width:44px;height:44px;place-items:center;margin-bottom:16px;background:var(--blue-soft);border:1px solid #dce9f8;border-radius:50%;color:var(--blue)}
.step-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.category-card{position:relative;padding-top:27px;overflow:hidden}
.category-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--blue),#73b4e8)}
.category-card h3{font-size:1.2rem;margin-bottom:8px}

.ingredient-gallery{padding:24px 0 30px;background:#fff}
.ingredient-images{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ingredient-images img{width:100%;aspect-ratio:248/350;object-fit:cover;border:1px solid var(--line);border-radius:10px;background:#fff}
.ingredient-text-grid .card{min-height:190px}
.philosophy-image{background:#fff}.philosophy-image img{width:100%}

.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.review-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px}
.review-card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.review-card div{display:grid;padding:15px 17px}.review-card strong{color:var(--blue-dark)}.review-card span{font-size:.82rem;color:var(--muted)}
.disclaimer{margin:16px 0 0;color:var(--muted);font-size:.82rem}

.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}
.outline-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #9bb3c8;border-radius:999px;color:var(--blue-dark);font-weight:700;font-size:.88rem}
.article-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.article-grid article{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
.article-grid img{width:100%;aspect-ratio:711/400;object-fit:cover}
.article-grid article>div{padding:16px}.article-grid time{color:var(--muted);font-size:.78rem}.article-grid h3{margin-top:7px;font-size:.96rem;line-height:1.5}

.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:72px;align-items:start}
.faq-layout>div:first-child>p:last-child{color:var(--muted)}
.faq-list details{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:0 18px;background:#fff}
.faq-list summary{position:relative;list-style:none;cursor:pointer;padding:16px 32px 16px 0;color:var(--blue-dark);font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";position:absolute;right:0;top:12px;color:var(--blue);font-size:1.35rem}.faq-list details[open] summary:after{content:"–"}
.faq-list p{margin:0;padding:0 34px 17px 0;color:var(--muted);font-size:.94rem}

.contact-cta{position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;min-height:610px;padding:48px 20px;text-align:center;color:#fff;background-color:#eaf3fb;background-image:url("assets/expert-consultation-banner-founder.png");background-repeat:no-repeat;background-position:center;background-size:cover}
.contact-cta::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(8,39,84,0) 34%,rgba(8,39,84,.12) 55%,rgba(8,39,84,.48) 100%)}
.contact-content{width:min(660px,100%);padding:28px 30px 30px;border:1px solid rgba(255,255,255,.4);border-radius:20px;background:rgba(15,42,85,.84);box-shadow:0 20px 48px rgba(7,36,79,.28);backdrop-filter:blur(10px)}
.contact-cta h2{margin:0 0 16px;color:#fff;font-size:1.45rem}
.line-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 28px;border-radius:999px;background:var(--green);color:#fff;font-weight:700;box-shadow:0 9px 22px rgba(10,87,47,.25)}
.line-button img{width:22px;height:22px;margin:0;filter:none}
.channels-label{margin:22px 0 9px;font-size:.9rem;font-weight:600;color:#dfeaff}
.channels{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0}.channels a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:#fff;color:var(--blue-dark);font-size:.86rem;font-weight:600;box-shadow:0 7px 18px rgba(7,36,79,.14)}.channels img{width:20px;height:20px;margin:0;object-fit:contain;filter:none}.channels img.logo-wide{width:31px}

.site-footer{padding:52px 0 20px;background:var(--footer);color:#cbd7e6}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.site-footer h2{margin:0 0 12px;color:#fff;font-size:.88rem;letter-spacing:.08em}.site-footer a,.site-footer address{display:block;margin:6px 0;color:#c0cede;font-size:.86rem;font-style:normal}.site-footer a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:34px;padding-top:17px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#8fa5bf}

@media(max-width:1000px){.desktop-nav,.account-links{display:none}.menu-toggle{display:block}.product-text-grid{grid-template-columns:repeat(3,1fr)}.four-columns,.article-grid{grid-template-columns:repeat(2,1fr)}.faq-layout{gap:40px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){body{font-size:16px}.wrap{width:min(100% - 28px,1200px)}.header-inner{height:68px}.brand img{width:145px}.band{padding:40px 0;scroll-margin-top:68px}.hero-image img{min-height:0;object-fit:contain;object-position:center}.intro-band{padding-top:38px}h1{font-size:1.9rem}h2{font-size:1.65rem}.lead,.section-intro,.narrow-copy>p{font-size:1rem}.stats-grid,.three-columns,.four-columns,.ingredient-images,.article-grid{grid-template-columns:repeat(2,1fr)}.product-text-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-14px;padding-right:14px;padding-bottom:8px}.product-text-grid .card{flex:0 0 82%;scroll-snap-align:start}.card{padding:18px}.image-section img{width:100%;height:auto}.ingredient-images{gap:10px}.review-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-14px;padding-right:14px;padding-bottom:8px}.review-card{flex:0 0 78%;scroll-snap-align:start}.section-heading{align-items:start}.outline-button{white-space:nowrap}.faq-layout{grid-template-columns:1fr;gap:24px}.footer-grid{grid-template-columns:1fr 1fr}.contact-cta{min-height:660px;padding:28px 14px;background-position:66% center}.contact-content{padding:24px 14px 26px;border-radius:16px}.contact-cta h2{font-size:1.28rem}.channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(360px,100%);margin-inline:auto}.channels a{padding:0 12px}}
@media(max-width:430px){.stats-grid,.three-columns,.four-columns,.article-grid{grid-template-columns:1fr}.stats-grid article{text-align:left}.ingredient-images{grid-template-columns:repeat(2,1fr)}.section-heading{display:block}.outline-button{margin-top:12px;width:100%}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:grid}.philosophy-image img{width:100%;height:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}
