/* CHON Chemical — final reference site ("Lab light").
   Original CSS that recreates the feel of a clean lab theme (white page, soft glows, big grotesk, rounded imagery,
   marquee band, overlay image cards) with none of its code. Tokens → base → layout → header → hero slider → sections →
   inner pages → responsive → motion preferences. See SPEC.md for the rules behind each block. */

/* ---------- fonts: self-hosted (OFL, unmodified Google Fonts subsets; the site makes no third-party request) ---------- */
/* fonts: Figtree for English (owner, 2026-10-06); Prompt for every Thai text, headings 500, body 400, bold 600 (owner, 2026-10-08:
   "เปลี่ยนตัวอักษรไทยทุกอันเป็น prompt"); all SIL OFL, self-hosted */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/Figtree-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/Figtree-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Prompt";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Prompt-400-thai.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Prompt";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Prompt-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Prompt";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Prompt-500-thai.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Prompt";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Prompt-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Prompt";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Prompt-600-thai.woff2) format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Prompt";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Prompt-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --kw-grad:linear-gradient(95deg,#00897B 0%,#2E8B57 55%,#4E9A2E 100%);
  --bg:#fff; --panel:#F4F8F5; --panel-2:#EEF6F0;
  --ink:#0B1A14;            /* headings, 17.9:1 on white */
  --text:#45544D;           /* body, 7.9:1 */
  --muted:#5A6661;          /* small print, 5.9:1 */
  --line:#DCE5DF; --line-2:#C9D6CE;
  --forest:#1B4332; --green:#2D6A4F; --green-d:#23553F;
  --teal-ink:#00796D;       /* links / numbers, 5.3:1 */
  --accent:#C2410C;         /* review marks only */
  --brand-a:#00AD9D; --brand-b:#7CC242; --mint:#B7E4C7; --amber:#FCB03D;
  --grad:linear-gradient(135deg,var(--brand-a),var(--brand-b));   /* decoration only, never text */

  --container:1300px;
  --gutter:clamp(20px,4.86vw,70px);
  --section:clamp(80px,8.33vw,120px);
  --hh:92px;
  --r:18px; --r-lg:24px; --r-btn:999px;

  --font:"Figtree","Prompt",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-th:"Prompt","Figtree",system-ui,sans-serif;
  --font-th-head:"Prompt","Figtree",sans-serif;
  --fs-hero:clamp(38px,4.7vw,68px);
  --fs-h1:clamp(36px,4.05vw,58px);
  --fs-h2:clamp(30px,3.6vw,52px);
  --fs-state:clamp(23px,2.45vw,35px);
  --fs-mega:clamp(38px,6.9vw,100px);
  --fs-h3:clamp(20px,1.6vw,23px);
  --tr-hero:-.012em; --tr-h:-.012em;

  --eo:cubic-bezier(.215,.61,.355,1);     /* ease-out cubic */
  --eq:cubic-bezier(.165,.84,.44,1);      /* ease-out quart */
  --es:cubic-bezier(.445,.05,.55,.95);    /* sine in-out */
  --dur:6500ms;                            /* one slide */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
:lang(th){font-family:var(--font-th)}
:lang(th) :is(h1,h2,h3,h4,.h2,.slide__title,.hero__kicker,.statement,.mega-line,.btn,.slide__eyebrow,.eyebrow,.lede-xl),:lang(th) :is(h1,h2,h3,h4,.h2,.slide__title,.hero__kicker,.statement,.mega-line,.btn,.slide__eyebrow,.eyebrow,.lede-xl) *{font-family:var(--font-th-head);font-weight:500}
body:lang(th){font-size:18px;line-height:1.75}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--teal-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--forest)}
h1,h2,h3,h4{color:var(--ink);font-weight:600;margin:0;line-height:1.1;letter-spacing:var(--tr-h)}
:lang(th) :is(h1,h2,h3,h4){letter-spacing:0;line-height:1.38}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
:focus-visible{outline:3px solid var(--brand-a);outline-offset:3px;border-radius:6px}
.nw{white-space:nowrap}
/* no one-word last lines (V12, V13): headings even out their lines, body text avoids a lone last word */
h1,h2,h3,h4{text-wrap:balance}
/* a small evidence photo (build: --nw = its natural width) is never drawn past 1.25x; centred in its slot (V7) */
[style*="--nw"]{width:100%;max-width:min(100%,calc(var(--nw) * 1.25));margin-inline:auto}
p,li,dd,figcaption{text-wrap:pretty}
.nw--soft{white-space:normal}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.section{padding-block:var(--section);position:relative}
.section--tight{padding-top:0}
.has-glow{position:relative;isolation:isolate;overflow:clip}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- design review marks: hidden by default, shown with ?review (build strips unconfirmed data-ask) ---------- */
.review-note{position:fixed;left:0;right:0;bottom:0;z-index:70;box-shadow:0 -8px 24px rgb(0 0 0 / .08);background:#FFF4E5;color:#6B3A00;font-size:14px;line-height:1.45;padding:10px var(--gutter);text-align:center;border-bottom:1px solid #F3D3AE}
.review-note[hidden]{display:none}
.review body{padding-bottom:52px}
.review-note span{border:1.5px dashed var(--accent);padding:0 6px;border-radius:4px}
.review [data-ask]{outline:1.5px dashed rgb(194 65 12 / .7);outline-offset:4px}
.review :is(.card,.fcard,.addr,.pcard)[data-ask]::after{content:"Owner to confirm";position:absolute;top:12px;right:12px;z-index:3;font:600 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#8A2E08;background:#FFF1E8;border:1px dashed #C2410C;border-radius:999px;padding:6px 9px}
.review :lang(th) :is(.card,.fcard,.addr,.pcard)[data-ask]::after,.review:lang(th) :is(.card,.fcard,.addr,.pcard)[data-ask]::after{content:"รอเจ้าของยืนยัน";letter-spacing:0;text-transform:none;font-size:12px}

/* ---------- glows (CSS only) ---------- */
.glow{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;aspect-ratio:1;width:var(--w,min(64vw,900px))}
.glow--teal{background:radial-gradient(closest-side,rgb(0 173 157 / .20),rgb(0 173 157 / .09) 45%,transparent)}
.glow--lime{background:radial-gradient(closest-side,rgb(124 194 66 / .20),rgb(124 194 66 / .08) 48%,transparent)}
.glow--mint{background:radial-gradient(closest-side,rgb(183 228 199 / .62),rgb(183 228 199 / .26) 45%,transparent)}
.glow--lilac{background:radial-gradient(closest-side,rgb(205 188 236 / .42),rgb(205 188 236 / .16) 45%,transparent)}
.glow--amber{background:radial-gradient(closest-side,rgb(252 176 61 / .24),rgb(252 176 61 / .08) 48%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .glow--drift{animation:drift 26s var(--es) infinite alternate}
  .glow--drift2{animation:drift2 31s var(--es) infinite alternate}
}
@keyframes drift{to{transform:translate3d(4%,5%,0) scale(1.06)}}
@keyframes drift2{to{transform:translate3d(-5%,-3%,0) scale(.95)}}

/* ---------- buttons & links ---------- */
.btn{--b:var(--green);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--r-btn);background:var(--b);border:2px solid var(--b);color:#fff;font:600 15.5px/1 var(--font);letter-spacing:0;text-transform:none;text-decoration:none;transition:background .25s var(--eo),border-color .25s var(--eo),color .25s var(--eo)}
.btn:hover{--b:var(--green-d);color:#fff}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--sm{min-height:44px;padding:0 20px;font-size:13px}
:lang(th) .btn{letter-spacing:0;text-transform:none;font-size:16px}
.btn .icon{width:18px;height:18px}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-weight:600;text-decoration:none}
.tlink .icon{width:20px;height:20px;transition:transform .3s var(--eo)}
.tlink:hover{color:var(--forest)}
.tlink:hover .icon{transform:translateX(4px)}

/* ---------- eyebrow, section heads ---------- */
.eyebrow{position:relative;display:inline-block;padding-left:18px;font:600 13px/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
.eyebrow::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;background:var(--grad)}
:lang(th) .eyebrow{letter-spacing:0;text-transform:none;font-size:15px}
.shead{display:grid;gap:18px;margin-bottom:clamp(36px,3.6vw,54px);max-width:780px}
.shead--row{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;justify-content:space-between;max-width:none}
.shead--row>div{display:grid;gap:18px;max-width:780px}
.h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.028em}
:lang(th) .h2{line-height:1.3;letter-spacing:0}
.lede{font-size:19px;line-height:1.6;color:var(--text);max-width:660px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;height:var(--hh);transition:height .3s var(--eo),background-color .3s var(--eo),box-shadow .3s var(--eo)}
.site-header.is-stuck{--hh:76px;background:rgb(255 255 255 / .94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line),0 6px 24px rgb(11 26 20 / .04)}
.site-header__bar{height:100%;display:flex;align-items:center;gap:clamp(20px,3vw,48px)}
.brand{display:block;flex:none;border-radius:6px}
.brand img{width:150px;height:auto}
.nav{flex:1}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);list-style:none}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;color:var(--ink);font-size:16px;font-weight:500;text-decoration:none;text-underline-offset:9px;text-decoration-thickness:2px}
.nav__link:hover,.nav__link[aria-current]{text-decoration-line:underline;color:var(--ink)}
.nav__chev{display:grid;place-items:center;width:30px;height:44px;margin-left:-2px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:6px}
.nav__chev .icon{width:16px;height:16px;transition:transform .25s var(--eo)}
.nav__chev[aria-expanded="true"] .icon{transform:rotate(180deg)}
.nav__extra{display:none}
.site-header__tools{display:flex;align-items:center;gap:14px;margin-left:auto}
.lang{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:600}
.lang a,.lang span[aria-current]{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 6px;border-radius:6px;text-decoration:none}
.lang a{color:var(--muted)}
.lang span[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand-a)}
.lang a:hover{color:var(--forest)}
.lang .sep{color:var(--muted);min-width:0}
.burger{display:none}

/* products mega panel (disclosure: the word is a link, the chevron opens the panel) */
.mega{position:absolute;top:calc(100% + 14px);left:-24px;width:min(1080px,calc(100vw - 2*var(--gutter)));background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 60px -20px rgb(11 26 20 / .18);padding:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 230px;gap:24px}
.mega[hidden]{display:none}
.mega__h{font:600 12px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
:lang(th) .mega__h{letter-spacing:0;text-transform:none;font-size:14px}
.mega ul{list-style:none;display:grid;gap:2px}
.mega a{display:block;padding:7px 0;color:var(--ink);font-size:15px;text-decoration:none;line-height:1.35}
.mega a:hover{color:var(--teal-ink);text-decoration:underline}
.mega__all{font-weight:600}
.mega__tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;letter-spacing:.04em;color:#00655B;background:#E4F3F1;border-radius:999px;padding:2px 7px;vertical-align:1px}
.mega__promo{border-radius:var(--r);background:radial-gradient(120% 90% at 30% 20%,#fff5e2,#e9f5ec 70%);padding:16px;display:grid;gap:10px;align-content:start}
.mega__promo img{width:84px;mix-blend-mode:multiply}
.mega__promo p{font-size:14px;line-height:1.45;color:var(--ink);font-weight:600}
.mega__promo a{font-weight:600;color:var(--forest);padding:0}

/* ======================================================================
   HERO SLIDER — one H1 above a 7-slide carousel. Timings: SPEC.md §5.
   ====================================================================== */
.hero{position:relative;isolation:isolate;overflow:clip;margin-top:calc(-1 * var(--hh));padding:calc(var(--hh) + clamp(18px,2.6vw,36px)) 0 clamp(36px,3.6vw,56px)}
.hero .glow--teal{--w:min(70vw,980px);left:-16%;top:-34%}
.hero .glow--lime{--w:min(52vw,720px);left:-28%;bottom:-40%}
.hero .glow--mint{--w:min(58vw,820px);right:-14%;top:-6%}
.hero .glow--lilac{--w:min(34vw,480px);right:22%;top:-22%}
.hero__kicker{position:relative;padding-left:50px;font-size:15px;line-height:1.45;font-weight:600;letter-spacing:0;color:var(--ink);margin-bottom:clamp(22px,3vw,44px);max-width:780px;text-wrap:balance}
.hero__kicker::before{content:"";position:absolute;left:0;top:.72em;width:36px;height:2px;border-radius:2px;background:var(--grad)}
:lang(th) .hero__kicker{font-size:16px;line-height:1.55}
.hero__track{display:grid;touch-action:pan-y}
.slide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.slide:focus{outline:none}
.slide:focus-visible .slide__title{outline:2px dashed var(--brand-a);outline-offset:8px;border-radius:4px}
.slide__text{display:grid;gap:22px;align-content:center;max-width:660px}
.slide__eyebrow{display:flex;align-items:center;gap:14px;font:600 13px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--forest)}
:lang(th) .slide__eyebrow{letter-spacing:0;text-transform:none;font-size:15px}
.slide__num{font-variant-numeric:tabular-nums;color:var(--teal-ink)}
.slide__num::after{content:"";display:inline-block;width:28px;height:1px;background:var(--line-2);vertical-align:middle;margin-left:14px}
.slide__title{font-size:var(--fs-hero);line-height:1.03;letter-spacing:var(--tr-hero);font-weight:600}
:lang(th) .slide__title{font-size:clamp(34px,4vw,58px);line-height:1.3;letter-spacing:0}
.ln{display:block;overflow:hidden;padding-block:.12em .1em;margin-block:-.12em -.1em}
:lang(th) .ln{padding-block:.2em .16em;margin-block:-.2em -.16em}
.ln>span{display:inline-block}
.slide__lead{font-size:18px;line-height:1.62;color:var(--text);max-width:560px}
:lang(th) .slide__lead{font-size:18.5px;line-height:1.75}
.slide__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding-top:6px}
.slide__visual{position:relative;width:100%;max-width:560px;aspect-ratio:1;justify-self:end;margin:0}

/* visual building blocks */
.vis{position:absolute;overflow:hidden}
.vis img{width:100%;height:100%;object-fit:cover}
.circle{inset:7%;border-radius:50%;background:var(--panel)}
.orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.float{position:absolute;z-index:2;background:#fff;border-radius:16px;box-shadow:0 18px 40px -16px rgb(27 67 50 / .28),0 0 0 1px rgb(27 67 50 / .06);padding:12px 14px;display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.3;color:var(--ink);font-weight:600}
.float small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.float--formula{left:-2%;bottom:14%}
.float--formula svg{width:58px;height:52px}
.float--s1{left:-4%;bottom:1%}
.float--chip{right:4%;bottom:8%}
.dotburst{position:absolute;right:6%;top:6%;width:26%}
.pouch-panel{inset:7%;border-radius:50%;background:radial-gradient(90% 90% at 35% 25%,#FFF3DA 0%,#F3F8EE 55%,#DFF1E5 100%)}
.pouch-panel img{position:absolute;left:30%;top:6%;width:44%;height:auto;object-fit:contain;mix-blend-mode:multiply}
.sachets{position:absolute;z-index:1;left:0;bottom:12%;width:50%;transform:rotate(-7deg);filter:drop-shadow(0 18px 22px rgb(27 67 50 / .18))}
.photo-tall{right:0;top:4%;width:62%;aspect-ratio:3/4;border-radius:var(--r-lg)}
.nmr-card{position:absolute;z-index:2;left:0;bottom:8%;width:74%;background:#fff;border-radius:20px;padding:14px 16px 10px;box-shadow:0 30px 60px -24px rgb(27 67 50 / .35),0 0 0 1px rgb(27 67 50 / .06);margin:0}
.nmr-card__cap{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.nmr-card__cap span+span{color:var(--teal-ink)}
.nmr-card__axis{font-size:11px;color:var(--muted);text-align:center;margin-top:2px}
.chip-gc{right:6%;bottom:2%}
.hexes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.slide4-orb{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(closest-side,rgb(0 173 157 / .22),rgb(124 194 66 / .10) 55%,transparent)}
/* slides 2, 3, 5: drawn in code — a molecule that builds itself, vessels that grow, a mosaic of industries */
.panel-orb{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(90% 90% at 30% 22%,#F4FBF6 0%,#E3F2E8 58%,#D3EBDD 100%)}
.panel-orb--warm{background:radial-gradient(90% 90% at 30% 22%,#FFF7E8 0%,#EEF6EA 55%,#DCEFE3 100%)}
.mol,.jars{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bond{stroke-dasharray:1 1}
.atom,.jar,.liquid,.bub{transform-box:fill-box}
.atom{transform-origin:50% 50%}
.jar,.liquid{transform-origin:50% 100%}
.float--brief{left:-3%;top:9%}
.float--route{right:-2%;bottom:5%}
.float--kg{left:-3%;top:8%}
.mosaic{position:absolute;inset:0}
.mtile{position:absolute;overflow:hidden;border-radius:clamp(14px,1.6vw,22px);background:var(--panel);box-shadow:0 24px 50px -28px rgb(27 67 50 / .4)}
.mtile img,.mtile svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mtile:nth-child(1){left:0;top:7%;width:47%;height:52%}
.mtile:nth-child(2){left:53%;top:0;width:47%;height:40%}
.mtile:nth-child(3){left:53%;top:46%;width:47%;height:54%}
.mtile:nth-child(4){left:0;top:65%;width:47%;height:35%}
.mtile>span{position:absolute;left:10px;bottom:10px;z-index:1;max-width:calc(100% - 20px);background:rgb(255 255 255 / .94);color:var(--ink);border-radius:999px;padding:6px 11px;font:600 12.5px/1.25 var(--font);box-shadow:0 6px 16px -8px rgb(11 26 20 / .35)}
.mtile--hex>span{background:#fff}

/* controls: labelled progress segments (they are also the dots) · big counter · prev / pause / next */
.hero__controls{display:none;align-items:center;gap:14px clamp(20px,3vw,44px);margin-top:clamp(26px,3.2vw,42px)}
.js .hero__controls{display:flex}
.hero__segs{display:flex;gap:10px;flex:1;max-width:860px}
.seg{flex:1;min-width:0;min-height:44px;display:grid;gap:9px;align-content:center;padding:6px 0;background:none;border:0;cursor:pointer;color:var(--muted);text-align:left;font:500 13.5px/1.3 var(--font)}
.seg__bar{position:relative;display:block;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.seg__fill{position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left}
.seg.is-done .seg__fill{transform:scaleX(1);background:var(--line-2)}
.seg[aria-current="true"]{color:var(--ink)}
.seg[aria-current="true"] .seg__bar{background:#C3D3CA}
.seg[aria-current="true"] .seg__fill{animation:segfill var(--dur) linear forwards}
.seg__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg:hover{color:var(--ink)}
.seg:hover .seg__bar{background:var(--line-2)}
.hero.is-paused .seg__fill{animation-play-state:paused}
@keyframes segfill{to{transform:scaleX(1)}}
.hero__count{display:flex;align-items:baseline;gap:8px;margin-left:auto;font-variant-numeric:tabular-nums;overflow:hidden;height:1.05em;font-size:clamp(40px,3.6vw,54px);line-height:1}
.hero__num{display:inline-block;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.hero__of{font-size:15px;color:var(--muted);font-weight:500}
.hero__num.roll{animation:roll .7s var(--eq)}
@keyframes roll{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.hero__btns{display:flex;align-items:center;gap:4px}
.hbtn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background .2s var(--eo)}
.hbtn:hover{background:rgb(27 67 50 / .07)}
.hbtn .icon{width:26px;height:26px;stroke-width:1.4}
.hbtn--play{border:1px solid var(--line-2)}
.hbtn--play .icon{width:18px;height:18px;stroke-width:1.8}
.hbtn--play .i-play,.hero.is-stopped .hbtn--play .i-pause{display:none}
.hero.is-stopped .hbtn--play .i-play{display:block}

/* no JS: the slides read as a stack of short sections */
html:not(.js) .slide+.slide{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}

/* JS: one grid cell (tallest slide sets the height, so no layout shift) */
.js .slide{grid-area:1/1;visibility:hidden}
.js .slide.is-active,.js .slide.is-leaving{visibility:visible}
.js .slide.is-active{z-index:2}
.js .slide.is-leaving{z-index:1;pointer-events:none}
/* resting state of anything not on the active slide */
.js .slide .ln>span{transform:translate3d(0,108%,0) skewY(5deg);transform-origin:0 100%}
.js .slide [data-a]{opacity:0;transform:translate3d(0,16px,0)}
.js .slide :is(.float,.nmr-card){opacity:0;translate:36px 0}
.js .slide .hexes .hx{opacity:0}
.js .slide .vis{clip-path:inset(0 0 0 100%)}
.js .slide .orbit__arc{stroke-dasharray:640;stroke-dashoffset:640}
/* the active slide, final state: picture first, then the headline line by line, then small print, then chips */
.js .slide.is-active .ln>span{transform:none;transition:transform 1s var(--eq) calc(200ms + var(--i,0) * 90ms)}
.js .slide.is-active [data-a]{opacity:1;transform:none;transition:opacity .7s var(--eo) calc(440ms + var(--i,0) * 80ms),transform .9s var(--eq) calc(440ms + var(--i,0) * 80ms)}
.js .slide.is-active :is(.float,.nmr-card){opacity:1;translate:0 0;transition:opacity .6s var(--eo) .85s,translate .9s var(--eq) .85s}
.js .slide.is-active .nmr-card{transition-delay:.6s}
.js .slide.is-active .hexes .hx{opacity:1;transition:opacity .55s var(--eo) calc(260ms + var(--i,0) * 75ms)}
.js .slide.is-active .vis{clip-path:inset(0 0 0 0);transition:clip-path 1.15s var(--eo) .08s}
.js .slide.is-active .vis img{animation:drift-in 1.5s var(--eq) .08s both}
.js .slide.is-active .orbit__arc{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--eq) .4s}
@keyframes drift-in{from{transform:translate3d(-7%,0,0) scale(1.12)}to{transform:none}}
/* the outgoing slide keeps its layout: words fade, the picture wipes out to the left */
.js .slide.is-leaving .ln>span,.js .slide.is-leaving [data-a],.js .slide.is-leaving :is(.float,.nmr-card){transform:none;translate:0 0;opacity:0;transition:opacity .32s linear}
.js .slide.is-leaving .vis{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--eo)}
.js .slide.is-leaving .hexes,.js .slide.is-leaving .orbit,.js .slide.is-leaving .dotburst,.js .slide.is-leaving .sachets,.js .slide.is-leaving .slide4-orb{opacity:0;transition:opacity .5s var(--eo)}
.js .slide .hexes,.js .slide .dotburst,.js .slide .sachets,.js .slide .slide4-orb{opacity:0;transform:scale(.96)}
.js .slide.is-active :is(.hexes,.dotburst,.sachets,.slide4-orb){opacity:1;transform:none;transition:opacity .9s var(--eo) .25s,transform 1.2s var(--eq) .25s}
.js .slide.is-active .sachets{transform:rotate(-7deg)}
.js .slide .sachets{transform:rotate(-2deg) translateY(24px)}
/* slide 2 · bonds draw in, then the atoms pop onto them */
.js .slide .bond{stroke-dashoffset:1}
.js .slide .atom{transform:scale(0)}
.js .slide.is-active .bond{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--eq) calc(250ms + var(--i,0) * 120ms)}
.js .slide.is-active .atom{transform:none;transition:transform .7s cubic-bezier(.34,1.56,.64,1) calc(520ms + var(--i,0) * 120ms)}
/* slide 3 · three vessels grow from the bench, fill, then the arrow rises */
.js .slide .jar{opacity:0;transform:scale(.55)}
.js .slide .liquid{transform:scaleY(0)}
.js .slide .rise{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .slide .jar-labels{opacity:0}
.js .slide.is-active .jar{opacity:1;transform:none;transition:opacity .5s var(--eo) calc(220ms + var(--i,0) * 170ms),transform .85s cubic-bezier(.34,1.45,.64,1) calc(220ms + var(--i,0) * 170ms)}
.js .slide.is-active .liquid{transform:none;transition:transform 1.1s var(--eq) calc(620ms + var(--i,0) * 170ms)}
.js .slide.is-active .rise{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--eq) 1.05s}
.js .slide.is-active .rise--head{transition-delay:1.85s;transition-duration:.45s}
.js .slide.is-active .jar-labels{opacity:1;transition:opacity .7s var(--eo) .9s}
/* slide 5 · tiles open one by one from the bottom edge */
.js .slide .mtile{clip-path:inset(100% 0 0 0 round 22px)}
.js .slide .mtile>span{opacity:0;transform:translate3d(0,8px,0)}
.js .slide.is-active .mtile{clip-path:inset(0 0 0 0 round 22px);transition:clip-path 1s var(--eo) calc(160ms + var(--i,0) * 140ms)}
.js .slide.is-active .mtile img{animation:tile-zoom 1.6s var(--eq) calc(160ms + var(--i,0) * 140ms) both}
.js .slide.is-active .mtile>span{opacity:1;transform:none;transition:opacity .5s var(--eo) calc(800ms + var(--i,0) * 140ms),transform .7s var(--eq) calc(800ms + var(--i,0) * 140ms)}
@keyframes tile-zoom{from{transform:scale(1.18)}to{transform:none}}
.js .slide.is-leaving :is(.mol,.jars,.mosaic,.panel-orb){opacity:0;transition:opacity .5s var(--eo)}
/* the outgoing drawing holds its finished state while it fades, instead of snapping back */
.js .slide.is-leaving :is(.bond,.rise){stroke-dashoffset:0}
.js .slide.is-leaving :is(.atom,.jar,.liquid,.panel-orb){opacity:1;transform:none}
.js .slide.is-leaving .panel-orb{opacity:0}
.js .slide.is-leaving .jar-labels,.js .slide.is-leaving .mtile>span{opacity:1;transform:none}
.js .slide.is-leaving .mtile{clip-path:inset(0 0 0 0 round 22px)}
.js .slide :is(.panel-orb){opacity:0;transform:scale(.94)}
.js .slide.is-active .panel-orb{opacity:1;transform:none;transition:opacity .8s var(--eo) .1s,transform 1.1s var(--eq) .1s}
/* slide 1 (drawn): the flask draws itself, the bed fills, crystals settle, then Design · Make · Verify */
.s1-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.s1-ic{fill:none;stroke:#2D6A4F;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s1-glass{stroke-dasharray:1 1}
.s1-bed,.s1-xtal,.s1-badge,.s1-spark path{transform-box:fill-box}
.s1-bed{transform-origin:50% 100%}
.s1-xtal,.s1-badge,.s1-spark path{transform-origin:50% 50%}
.js .slide .s1-glass{stroke-dashoffset:1}
.js .slide .s1-bed{transform:scaleY(0)}
.js .slide .s1-xtal{opacity:0;transform:scale(.3)}
.js .slide .s1-badge{opacity:0;transform:scale(.6)}
.js .slide.is-active .s1-glass{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--eq) .15s}
.js .slide.is-active .s1-bed{transform:none;transition:transform .9s var(--eq) .75s}
.js .slide.is-active .s1-xtal{opacity:1;transform:none;transition:opacity .4s var(--eo) calc(950ms + var(--i,0) * 55ms),transform .6s cubic-bezier(.34,1.56,.64,1) calc(950ms + var(--i,0) * 55ms)}
.js .slide.is-active .s1-badge{opacity:1;transform:none;transition:opacity .5s var(--eo) calc(1.35s + var(--i,0) * .22s),transform .7s cubic-bezier(.34,1.56,.64,1) calc(1.35s + var(--i,0) * .22s)}
.js .slide.is-leaving .s1-art{opacity:0;transition:opacity .5s var(--eo)}
.js .slide.is-leaving .s1-glass{stroke-dashoffset:0}
.js .slide.is-leaving :is(.s1-bed,.s1-xtal,.s1-badge){opacity:1;transform:none}
/* first load: slide 1 is already on, so its drawing plays as keyframes (a transition would not fire) */
.js .hero:not(.is-moved) .slide.is-active .s1-glass{animation:s1-draw 1.2s var(--eq) .2s both}
.js .hero:not(.is-moved) .slide.is-active .s1-bed{animation:s1-fill .9s var(--eq) .8s both}
.js .hero:not(.is-moved) .slide.is-active .s1-xtal{animation:s1-pop .6s cubic-bezier(.34,1.56,.64,1) calc(1s + var(--i,0) * 55ms) both}
.js .hero:not(.is-moved) .slide.is-active .s1-badge{animation:s1-pop .7s cubic-bezier(.34,1.56,.64,1) calc(1.4s + var(--i,0) * .22s) both}
@keyframes s1-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes s1-fill{from{transform:scaleY(0)}to{transform:none}}
@keyframes s1-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
/* first paint: slide 1's picture is already there (it is the LCP); only its words rise, once */
.js .hero:not(.is-moved) .slide.is-active .vis{clip-path:inset(0 0 0 0);transition:none}
.js .hero:not(.is-moved) .slide.is-active .vis img{animation:none}
/* intro on first load: pure CSS, so the words appear even if the script is late */
.js .hero:not(.is-moved) .slide.is-active .ln>span{animation:rise 1s var(--eq) calc(120ms + var(--i,0) * 90ms) both}
.js .hero:not(.is-moved) .slide.is-active [data-a]{animation:fadeup .8s var(--eo) calc(420ms + var(--i,0) * 80ms) both}
@keyframes rise{from{transform:translate3d(0,108%,0) skewY(5deg)}}
@keyframes fadeup{from{opacity:0;transform:translate3d(0,16px,0)}}
.js .hero.is-instant *,.js .hero.is-instant *::before{transition:none!important;animation-duration:1ms!important;animation-delay:0s!important}

@media (prefers-reduced-motion:no-preference){
  .orbit__spin{transform-box:view-box;transform-origin:50% 50%;animation:spin 70s linear infinite}
  .js .slide.is-active .float{animation:bob 6s var(--es) 1.8s infinite alternate}
  .hex-pulse{animation:pulse 3.2s var(--es) infinite alternate}
  .hero.is-paused .orbit__spin{animation-play-state:paused}
  .js .slide.is-active .mol{animation:mol-sway 9s var(--es) 2s infinite alternate}
  .js .slide.is-active .bub{animation:bubble 3.4s var(--es) calc(1.8s + var(--i,0) * .55s) infinite}
  .hero.is-paused :is(.mol,.bub){animation-play-state:paused}
  .js .slide.is-active .s1-spark path{animation:twinkle 2.6s var(--es) calc(2s + var(--i,0) * .7s) infinite}
}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:none}}
@keyframes mol-sway{from{transform:rotate(0)}to{transform:rotate(4deg)}}
@keyframes bubble{0%{transform:translateY(0);opacity:0}18%{opacity:.85}100%{transform:translateY(var(--d));opacity:0}}
.bub{opacity:0}
.mol{transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{from{transform:translateY(-4px)}to{transform:translateY(6px)}}
@keyframes pulse{from{opacity:.35}to{opacity:1}}

/* ---------- marquee: words in their own viewport, the pause button in its own cell ---------- */
.marquee{display:flex;align-items:stretch;height:clamp(66px,7.4vw,108px);border-block:1px solid var(--ink)}
.marquee__view{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee var(--mq,52s) linear infinite}
.marquee__group{display:flex;align-items:center;list-style:none;flex:none}
.marquee__group li{display:flex;align-items:center;font:600 clamp(24px,3.1vw,44px)/1 var(--font);letter-spacing:-.01em;text-transform:none;color:var(--ink);white-space:nowrap}
:lang(th) .marquee__group li{text-transform:none;letter-spacing:0;font-size:clamp(24px,2.8vw,40px);line-height:1.4}
.marquee__group li::after{content:"";width:.34em;height:.34em;margin-inline:clamp(26px,3.4vw,50px);border-radius:50%;background:var(--grad);flex:none}
.marquee:hover .marquee__track,.marquee.is-paused .marquee__track,.marquee.is-off .marquee__track{animation-play-state:paused}
html:not(.js) .marquee__track{animation:none}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
.marquee__cell{flex:none;display:grid;place-items:center;width:clamp(68px,var(--gutter),96px);border-left:1px solid var(--line)}
.marquee__cell[hidden]{display:none}
.marquee__toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.marquee__toggle .icon{width:16px;height:16px;stroke-width:1.9}
.marquee__toggle .i-play,.marquee.is-paused .marquee__toggle .i-pause{display:none}
.marquee.is-paused .marquee__toggle .i-play{display:block}

/* ---------- who we are (collage + answer-first statement) ---------- */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,100px);align-items:center}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tile{background:var(--forest);color:#fff;border-radius:var(--r);padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:clamp(210px,24vw,330px);position:relative;overflow:hidden}
.tile small{position:relative;z-index:1;max-width:calc(100% - 64px);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#BFE6CF;line-height:1.35}
:lang(th) .tile small{letter-spacing:0;text-transform:none;font-size:14px}
.tile p{position:relative;z-index:1;max-width:14ch;font-size:clamp(20px,1.9vw,27px);line-height:1.2;font-weight:600;letter-spacing:-.015em;color:#fff}
:lang(th) .tile p{line-height:1.4;letter-spacing:0}
.tile svg{position:absolute;right:-26px;top:-28px;width:112px;opacity:.2}
.tile__ask{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:24px;flex:1}
.tile:not(:has(.tile__ask)){justify-content:center;align-items:center}
.tile:not(:has(.tile__ask)) svg{display:block;position:static;width:min(62%,190px);height:auto;opacity:.92}
.collage__circle{position:relative;aspect-ratio:1;align-self:center}
.collage__circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.collage__circle .art-circle,.ph-circle__img .art-circle{display:block;width:100%;height:100%;border-radius:50%}
.collage__circle .ring{position:absolute;inset:-6%;width:112%;height:112%}
.collage__wide{grid-column:1/-1;border-radius:var(--r);overflow:hidden;aspect-ratio:100/58}
.collage__wide img{width:100%;height:100%;object-fit:cover}
.who__text{display:grid;gap:24px}
.statement{font-size:var(--fs-state);line-height:1.26;letter-spacing:-.02em;color:var(--ink);font-weight:500}
:lang(th) .statement{letter-spacing:0;line-height:1.5}
.statement em{font-style:normal;background:var(--kw-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- pillars ---------- */
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px)}
.cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.2vw,32px)}
.pillar{display:grid;gap:16px;align-content:start}
.pillar__icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff,#E6F4EC 70%);box-shadow:inset 0 0 0 1px rgb(27 67 50 / .08);margin-bottom:6px}
.pillar__icon svg{width:44px;height:44px;stroke:url(#g-stroke);stroke-width:1.8}
.pillar h3{font-size:var(--fs-h3)}
.pillar p{font-size:16.5px}

/* ---------- lineup cards ---------- */
.lineup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;transition:border-color .3s var(--eo),box-shadow .3s var(--eo)}
.card:hover{border-color:var(--line-2);box-shadow:0 24px 50px -30px rgb(27 67 50 / .28)}
.card h3{font-size:clamp(21px,1.75vw,25px);line-height:1.15}
.card p{font-size:16px;line-height:1.6}
.card .tlink{margin-top:auto}
.card__art{height:132px;border-radius:14px;background:var(--panel);display:grid;place-items:center;margin-bottom:6px;overflow:hidden}
.card__art svg{width:120px;height:110px}
.card--wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;padding:18px}
.card--wide .card__media{border-radius:18px;background:radial-gradient(90% 90% at 35% 25%,#FFF3DA 0%,#F3F8EE 55%,#DFF1E5 100%);position:relative;min-height:320px;overflow:hidden}
.card--wide .card__media img{position:absolute;left:50%;top:50%;width:50%;translate:-50% -50%;mix-blend-mode:multiply}
.card--wide .card__body{display:flex;flex-direction:column;gap:14px;padding:12px 10px 8px 0}
.card--dashed{border-style:dashed;border-color:var(--line-2);background:linear-gradient(180deg,#fff,var(--panel))}
.small-print{font-size:14px!important;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.spec{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.spec li{font-size:13px;font-weight:600;color:var(--forest);background:var(--panel-2);border-radius:999px;padding:6px 11px}
.status{display:inline-flex;align-self:flex-start;justify-self:start;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px 7px 10px;border-radius:999px;line-height:1.2}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
:lang(th) .status{letter-spacing:0;text-transform:none;font-size:14px}
.status--available{background:#E2F2E7;color:#1B5E3A}
.status--request{background:#FDF0D8;color:#7A4600}
.status--dev{background:#E4F3F1;color:#00655B}
.status--lab{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---------- statement line with inline photos (text first; images are decoration) ---------- */
.mega-line{font:600 var(--fs-mega)/1.04 var(--font);letter-spacing:-.03em;color:var(--ink);display:grid;gap:.1em}
:lang(th) .mega-line{font-size:clamp(34px,5.6vw,84px);line-height:1.3;letter-spacing:0}
.mega-line__row{display:flex;align-items:center;gap:.26em;flex-wrap:nowrap}
.mega-line__row--2{justify-content:flex-end}
.mega-line__img{flex:none;width:1.1em;height:1.1em;border-radius:.24em;object-fit:cover}
.mega-line__img--pill{width:1.85em;border-radius:999px}

/* ---------- focus areas: full-bleed row of image cards, 4 px apart ---------- */
.focus{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:0}
.fcard{position:relative;aspect-ratio:3/4;overflow:hidden;color:#fff;isolation:isolate;background:var(--forest)}
.fcard img,.fcard .fcard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--eq)}
.fcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(8 22 16 / 0) 30%,rgb(8 22 16 / .64) 62%,rgb(8 22 16 / .92) 100%)}
.fcard__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2vw,30px);display:grid;gap:8px;transform:translateY(34px);transition:transform .35s var(--eo)}
.fcard h3{color:#fff;font-size:clamp(21px,1.9vw,27px);line-height:1.12}
:lang(th) .fcard h3{line-height:1.35}
.fcard h3 a{color:#fff;text-decoration:none}
.fcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.fcard p{font-size:15px;line-height:1.5;color:#E6EFEA;max-width:34ch}
.fcard__more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;opacity:0;transition:opacity .35s var(--eo)}
.fcard__more .icon{width:18px;height:18px}
.fcard__tag{position:absolute;top:16px;left:16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:rgb(255 255 255 / .94);color:var(--forest);padding:6px 10px;border-radius:999px}
:lang(th) .fcard__tag{letter-spacing:0;text-transform:none;font-size:13px}
.fcard:hover img,.fcard:focus-within img,.fcard:hover .fcard__bg{transform:scale(1.05)}
.fcard:hover .fcard__body,.fcard:focus-within .fcard__body{transform:none}
.fcard:hover .fcard__more,.fcard:focus-within .fcard__more{opacity:1}
.fcard:focus-within{outline:3px solid var(--brand-a);outline-offset:-3px}
.fcard h3 a:focus-visible{outline:none}
@media (hover:none){.fcard__body{transform:none}.fcard__more{opacity:1}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;list-style:none;position:relative}
.steps::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:1px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b) 60%,var(--line-2))}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{position:relative;display:grid;gap:12px;align-content:start}
.step__n{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--forest);font-variant-numeric:tabular-nums;position:relative}
.step:first-child .step__n{background:var(--forest);border-color:var(--forest);color:#fff}
.step h3{font-size:20px;margin-top:10px}
.step p{font-size:15.5px;line-height:1.6}

/* ---------- proof panels ---------- */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.panel{background:var(--panel);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.panel__media{position:relative;margin:0;background:#fff;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.panel__media img{width:100%;height:100%;object-fit:cover}
.panel__media--grid{padding:clamp(20px,3.4vw,46px);background-color:#FBFDFC;background-image:linear-gradient(rgb(27 67 50 / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(27 67 50 / .06) 1px,transparent 1px);background-size:22px 22px}
.panel__media--grid .chart{background:#fff;border-radius:14px;padding:14px 14px 8px;box-shadow:0 26px 50px -26px rgb(27 67 50 / .35),0 0 0 1px rgb(27 67 50 / .06);width:100%}
.panel__media--grid .chart img{height:auto;object-fit:contain}
.chart__axis{font-size:12.5px;color:var(--muted);text-align:center;margin-top:4px}
.panel__body{padding:clamp(22px,2.4vw,34px);display:grid;gap:12px}
.panel h3{font-size:clamp(21px,1.8vw,26px);line-height:1.18}
.panel p{font-size:16px}
.caption{font-size:15px;color:var(--ink);font-weight:600}
.method{font-size:14px!important;color:var(--muted)}
.label{font:600 12.5px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
:lang(th) .label{letter-spacing:0;text-transform:none;font-size:14px}
.chips{display:flex;gap:10px;flex-wrap:wrap;list-style:none}
.chips li{font-size:13px;font-weight:600;color:var(--forest);background:#fff;border-radius:999px;padding:6px 12px;box-shadow:inset 0 0 0 1px var(--line)}
/* Control / FreshTrap labels printed on a trial photo (the alt text already says it) */
.tags{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;pointer-events:none}
.tags span{font:600 12.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:8px 11px;border-radius:999px;background:rgb(255 255 255 / .95);color:var(--ink);box-shadow:0 6px 16px -8px rgb(0 0 0 / .4)}
.tags span+span{background:var(--forest);color:#fff}

/* ---------- split media + text ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,100px);align-items:center}
.split__media img{border-radius:var(--r-lg);width:100%;aspect-ratio:4/3;object-fit:cover}
.split__text{display:grid;gap:22px}
.split__text p{max-width:600px}
.ticks{list-style:none;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%232D6A4F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}

/* ---------- news ---------- */
.news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ncard{position:relative;display:grid;gap:12px;align-content:start;padding:28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:border-color .3s var(--eo)}
.ncard:hover{border-color:var(--line-2)}
.ncard .meta{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:lang(th) .ncard .meta{letter-spacing:0;text-transform:none;font-size:14px}
.ncard h3{font-size:clamp(20px,1.6vw,24px);line-height:1.22}
.ncard h3 a{color:var(--ink);text-decoration:none}
.ncard h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.ncard h3 a:hover{text-decoration:underline}
.ncard .icon{width:22px;height:22px;color:var(--ink)}

/* ---------- contact routes ---------- */
.cta-panel{position:relative;isolation:isolate;overflow:clip;background:var(--panel);border-radius:clamp(22px,2.4vw,32px);padding:clamp(34px,5vw,72px)}
.cta-panel .glow--mint{--w:min(60vw,760px);right:-18%;bottom:-50%}
.cta-panel .glow--lilac{--w:min(36vw,480px);left:-10%;top:-40%}
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.route{display:flex;flex-direction:column;gap:14px;padding:26px;background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px rgb(27 67 50 / .06)}
.route h3{font-size:21px}
.route p{font-size:15.5px}
.route .btn{margin-top:auto;align-self:stretch;justify-content:space-between;text-align:left;line-height:1.25;padding:12px 20px;text-transform:none;letter-spacing:0;font-size:15.5px}
.contact-line{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:28px;font-size:17px;font-weight:600;color:var(--ink)}
.contact-line a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none}
.contact-line a:hover{color:var(--forest);text-decoration:underline}
.contact-line .icon{width:20px;height:20px;color:var(--green)}

/* ---------- company facts (quotable block) ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--ink)}
.facts>div{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:14px;font-weight:600;color:var(--muted);line-height:1.5}
.facts dd{font-size:16px;color:var(--ink);line-height:1.55}
.facts dd a{color:var(--ink)}
.updated{margin-top:18px;font-size:14px;color:var(--muted)}
.refs{font-size:14px;color:var(--muted);line-height:1.6;max-width:900px;display:grid;gap:8px}
.refs h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
:lang(th) .refs h2{letter-spacing:0;text-transform:none;font-size:15px}
.refs i{font-style:italic}

/* ---------- footer ---------- */
.site-footer{position:relative;isolation:isolate;overflow:clip;padding-top:clamp(64px,6vw,96px);border-top:1px solid var(--line);background:#fff}
.site-footer .glow--mint{--w:min(50vw,640px);left:-18%;top:-40%}
.site-footer .glow--lilac{--w:min(34vw,460px);right:-8%;bottom:-40%}
.footer__top{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,minmax(0,.66fr));gap:36px}
.footer__brand{display:grid;gap:18px;align-content:start}
.footer__brand img{width:170px}
.footer__brand .brand{display:inline-flex;align-items:center;min-height:44px;justify-self:start}
.footer__tag{font-size:clamp(21px,1.9vw,27px);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink);max-width:340px}
:lang(th) .footer__tag{letter-spacing:0;line-height:1.45}
.footer__col h2{font:600 12.5px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
:lang(th) .footer__col h2{letter-spacing:0;text-transform:none;font-size:14px}
.footer__col ul{list-style:none;display:grid;gap:2px}
.footer__col a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-size:15.5px}
.footer__col a:hover{text-decoration:underline;color:var(--forest)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;padding-block:18px 26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.footer__bottom a{color:var(--muted)}
.footer__bottom .tlink{font-size:14px;color:var(--ink)}

/* ======================================================================
   INNER PAGES
   ====================================================================== */
.crumbs{font-size:14px;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--muted)}
.crumbs a{display:inline-block;padding-block:12px;line-height:20px;color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--forest);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.page-hero{position:relative;isolation:isolate;overflow:clip;margin-top:calc(-1 * var(--hh));padding:calc(var(--hh) + clamp(18px,2.4vw,32px)) 0 clamp(64px,7vw,110px)}
.page-hero .glow--teal{--w:min(70vw,960px);left:-18%;top:-34%}
.page-hero .glow--lime{--w:min(46vw,640px);left:-24%;bottom:-38%}
.page-hero .glow--mint{--w:min(54vw,760px);right:-16%;top:6%}
.page-hero .glow--lilac{--w:min(30vw,420px);right:26%;top:-24%}
.page-hero .glow--amber{--w:min(46vw,640px);right:-10%;top:-10%}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,90px);align-items:center;margin-top:clamp(24px,3.2vw,48px)}
.page-hero__text{display:grid;gap:22px}
.page-hero h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.028em}
:lang(th) .page-hero h1{line-height:1.3;letter-spacing:0;font-size:clamp(34px,3.8vw,54px)}
.page-hero .lede{font-size:clamp(19px,1.5vw,22px);color:var(--ink);font-weight:500;line-height:1.45}
:lang(th) .page-hero .lede{line-height:1.6}
.page-hero__media{position:relative;aspect-ratio:1;max-width:540px;width:100%;justify-self:end}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:12px 14px;padding-top:4px}

/* about hero visual: rounded photo + circle photo straddling it + orbit ring */
.av__main{position:absolute;right:0;top:0;width:80%;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.av__main img{width:100%;height:100%;object-fit:cover}
.av__circle{position:absolute;left:0;bottom:0;width:42%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:8px solid #fff;box-shadow:0 30px 50px -24px rgb(27 67 50 / .35);z-index:2}
.av__circle img{width:100%;height:100%;object-fit:cover}
.av__ring{position:absolute;left:-5%;bottom:-5%;width:52%;height:auto;z-index:1;overflow:visible}
.page-hero__media .float--est{left:2%;top:12%;z-index:3}

.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;list-style:none;position:relative;margin-top:clamp(40px,4vw,60px)}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b) 55%,var(--line-2))}
.timeline li{position:relative;padding-top:36px;display:grid;gap:10px;align-content:start}
.timeline li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--brand-a)}
.timeline li:nth-last-child(-n+2)::before{border-color:var(--line-2);border-style:dashed}
.timeline__when{font-size:clamp(26px,2.4vw,36px);line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.timeline__when small{display:block;font-size:14px;font-weight:600;letter-spacing:0;color:var(--muted);margin-top:8px}
.timeline p{font-size:15.5px}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,100px);align-items:start}
.story__body{display:grid;gap:18px;font-size:17.5px}
.drives{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,100px);align-items:start}
.display-line{font-size:clamp(34px,4vw,58px);line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
:lang(th) .display-line{line-height:1.35;letter-spacing:0;font-size:clamp(32px,3.6vw,52px)}
.drives__img{width:min(240px,55%);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-top:8px;box-shadow:0 0 0 10px #fff,0 0 0 11px var(--line)}
.drives__img img{width:100%;height:100%;object-fit:cover}
.values{list-style:none;border-top:1px solid var(--ink)}
.values li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.values li>span{font-size:14px;font-weight:600;color:var(--teal-ink);font-variant-numeric:tabular-nums;padding-top:3px}
.values h3{font-size:20px;margin-bottom:4px}
.values p{font-size:16px}
.vision{position:relative;overflow:hidden;background:var(--forest);color:#fff;border-radius:clamp(22px,2.4vw,32px);padding:clamp(32px,5vw,68px);display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.vision h3{font:600 13px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#BFE6CF}
:lang(th) .vision h3{letter-spacing:0;text-transform:none;font-size:15px}
.vision blockquote{margin:0;font-size:clamp(23px,2.5vw,36px);line-height:1.24;letter-spacing:-.02em;font-weight:500;color:#fff}
:lang(th) .vision blockquote{letter-spacing:0;line-height:1.5}
.vision blockquote p+p{margin-top:14px;font-size:.62em;line-height:1.6;color:#DCEFE3;letter-spacing:0}
.vision cite{display:block;margin-top:18px;font-style:normal;font-size:14px;color:#BFE6CF}
.vision svg{position:absolute;right:-60px;bottom:-80px;width:320px;opacity:.16}
.mission{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px}
.mcard{display:grid;gap:12px;align-content:start;padding:24px;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.mcard svg{width:36px;height:36px;stroke:url(#g-stroke);stroke-width:1.7}
.mcard h3{font-size:19px}
.mcard p{font-size:15.5px}
.mcard .th-src{font-size:14.5px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.do{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.org{overflow-x:auto;padding-bottom:6px}
.org ul{list-style:none}
.org__tree{display:flex;justify-content:center}
.org__tree>li{display:flex;flex-direction:column;align-items:center;width:100%}
.org__node{display:inline-grid;gap:2px;justify-items:center;text-align:center;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid var(--line-2);font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;min-height:64px;align-content:center}
.org__node small{font-size:12.5px;font-weight:500;color:var(--muted)}
.org__node--top{background:var(--forest);border-color:var(--forest);color:#fff;padding:16px 34px}
.org__tree>li>ul{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:22px;width:100%}
.org__tree>li>ul::before{content:"";position:absolute;top:0;left:50%;height:22px;border-left:1px solid var(--line-2)}
.org__tree>li>ul>li{position:relative;padding-top:22px;display:grid}
.org__tree>li>ul>li::before{content:"";position:absolute;top:0;left:50%;height:22px;border-left:1px solid var(--line-2)}
.org__tree>li>ul>li::after{content:"";position:absolute;top:0;left:-8px;right:-8px;border-top:1px solid var(--line-2)}
.org__tree>li>ul>li:first-child::after{left:50%}
.org__tree>li>ul>li:last-child::after{right:50%}
.org__tree>li>ul .org__node{width:100%}
.lanes{margin-top:26px;text-align:center;font-size:17px;color:var(--ink);font-weight:500}

/* team cards (site.json company.team): About shows them compact, /our-team/ with affiliation and a short bio */
.people{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(8px,1.4vw,18px)}
.person{display:grid;gap:4px;align-content:start;min-width:0}
.person__photo{position:relative;aspect-ratio:3/4;border-radius:clamp(16px,1.8vw,24px);overflow:hidden;background:radial-gradient(90% 90% at 30% 20%,#F4FBF6,#DCEFE3);margin-bottom:14px;box-shadow:0 24px 50px -30px rgb(27 67 50 / .45)}
.person__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--eq)}
.person__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad)}
.person:hover .person__photo img{transform:scale(1.04)}
.person__name{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
:lang(th) .person__name{letter-spacing:0;line-height:1.45}
.person__alt{font-size:13.5px;line-height:1.45;color:var(--muted)}
.person__role{font-size:14.5px;line-height:1.4;font-weight:600;color:var(--teal-ink)}
.person__org{font-size:14px;line-height:1.5;color:var(--muted)}
.person__bio{margin-top:8px;font-size:15.5px;line-height:1.62;color:var(--text)}
:lang(th) .person__bio{line-height:1.75}
.people--compact .person__name{font-size:17px}
.org__title{margin:clamp(44px,5vw,68px) 0 18px;font-size:clamp(19px,1.7vw,23px);line-height:1.3;font-weight:600;text-align:center;color:var(--ink)}
@media (max-width:1024px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .people:not(.people--compact){grid-template-columns:1fr;gap:26px}
  .people:not(.people--compact) .person{grid-template-columns:112px minmax(0,1fr);column-gap:16px;align-items:start}
  .people:not(.people--compact) .person__photo{margin:0;border-radius:14px}
  .people--compact{gap:16px 14px}
  .people--compact .person__name{font-size:15.5px}
  .people--compact .person__role{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.person__photo img{transition:none}.person:hover .person__photo img{transform:none}}
.addrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.addr{position:relative;display:grid;gap:10px;align-content:start;padding:26px;border-radius:var(--r);background:var(--panel)}
.addr h3{font-size:19px}
.addr address{font-style:normal;font-size:16px;line-height:1.6;color:var(--ink)}
.addr .icon{width:26px;height:26px;color:var(--green)}
.addr a{font-weight:600;font-size:15px}
.addr p{font-size:15.5px}
.rows{list-style:none;border-top:1px solid var(--ink)}
.rows li{display:grid;grid-template-columns:minmax(160px,.3fr) minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.rows h3{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;line-height:1.5}
.rows p{font-size:16.5px;color:var(--ink)}

/* products page */
.legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none}
.legend li{display:grid;gap:10px;align-content:start;padding:18px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.legend p{font-size:15px;line-height:1.55}
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.prow+.prow{margin-top:clamp(56px,6vw,90px)}
.prow--flip .prow__media{order:2}
.prow__media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;background:radial-gradient(90% 90% at 35% 25%,#FFF3DA 0%,#F3F8EE 55%,#DFF1E5 100%)}
.prow__media--art{background:var(--panel);display:grid;place-items:center}
.prow__media--art svg{width:62%;height:auto}
.prow__media .pouch-img{position:absolute;left:12%;top:8%;width:40%;mix-blend-mode:multiply}
.prow__media .sachets-img{position:absolute;right:6%;bottom:9%;width:50%;transform:rotate(-6deg);filter:drop-shadow(0 16px 20px rgb(27 67 50 / .16))}
.prow__body{display:grid;gap:16px;align-content:start}
.prow__body h3{font-size:clamp(26px,2.4vw,36px);line-height:1.1;letter-spacing:-.022em}
:lang(th) .prow__body h3{line-height:1.35;letter-spacing:0}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcard{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.pcard h3{font-size:clamp(21px,1.75vw,25px);line-height:1.15}
.pcard p{font-size:16px}
.pcard .tlink{margin-top:auto}
.svc{display:grid;gap:14px;align-content:start;padding:26px;border-radius:var(--r);background:var(--panel)}
.svc>svg.icon{width:40px;height:40px;stroke:url(#g-stroke);stroke-width:1.7}
.svc h3{font-size:20px}
.svc p{font-size:15.5px}
.faq{border-top:1px solid var(--ink);max-width:920px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:14px 0;font-size:clamp(18px,1.4vw,20px);font-weight:600;color:var(--ink);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%231B4332' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .3s var(--eo)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 22px;display:grid;gap:10px;max-width:780px}
.faq p{font-size:16.5px}

/* FreshTrap page */
.ft-media .blob{position:absolute;inset:4% 2% 0 10%;border-radius:44% 56% 52% 48% / 46% 44% 56% 54%;overflow:hidden;background:#F5EFE3}
.ft-media .blob img{width:100%;height:100%;object-fit:cover}
.ft-media .float--chip{right:0;bottom:12%}
.ft-media .float--reg{left:0;top:8%;max-width:250px}
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.glance>div{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.glance h3{font-size:19px}
.glance p{font-size:15.5px}
.spec-table{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.55}
.spec-table th{width:34%;font-size:14px;font-weight:600;color:var(--muted);padding-right:18px}
.spec-table td{color:var(--ink)}
.mech{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.mech__art{border-radius:var(--r-lg);background:var(--panel);padding:clamp(20px,3vw,40px)}
.mech__svg{display:block;width:100%;height:auto}
.mech__svg--stack{display:none;max-width:400px;margin-inline:auto}
.mech--stack{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,3.5vw,48px)}
.mech--stack>.split__text{max-width:880px}
.mech--stack>.mech__art{max-width:1040px;width:100%}
/* two-panel diagram beside a tall text column on a small desktop: the row would print labels at 9–11 px */
@media (min-width:901px) and (max-width:1279px){
  .mech__art:not(.mech__art--wide) .mech__svg--wide{display:none}
  .mech__art:not(.mech__art--wide) .mech__svg--stack{display:block;max-width:360px}
}
@media (max-width:900px){
  .mech__art--wide .mech__svg--wide{display:none}
  .mech__art--wide .mech__svg--stack{display:block}
}
@media (max-width:640px){
  .mech__svg--wide{display:none}
  .mech__svg--stack{display:block}
}
.howto{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;list-style:none;counter-reset:h}
.howto li{display:grid;gap:12px;align-content:start;padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.howto svg{width:44px;height:44px;stroke:var(--green);stroke-width:1.6}
.howto b{font-size:13px;color:var(--teal-ink);font-weight:600;font-variant-numeric:tabular-nums}
.howto h3{font-size:18px}
.howto p{font-size:15px;line-height:1.55}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.trials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.trial{display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r-lg);overflow:hidden}
.trial figure{position:relative;margin:0;background:#fff;aspect-ratio:16/10;overflow:hidden}
.trial figure img{width:100%;height:100%;object-fit:contain;background:#fff}
.trial figure.cover img{object-fit:cover}
.trial__body{padding:22px 24px 26px;display:grid;gap:8px}
.trial h3{font-size:20px}
.trial p{font-size:15.5px}
.limits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.limits>div{padding:24px;border-radius:var(--r);border:1px dashed var(--line-2);background:#fff;display:grid;gap:8px}
.limits h3{font-size:19px}
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.doc{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r);background:var(--panel)}
.doc h3{font-size:19px}
.doc p{font-size:15.5px}
.note-box{border-left:3px solid var(--green);background:var(--panel);padding:18px 22px;border-radius:0 var(--r) var(--r) 0;font-size:16px;color:var(--ink)}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1239px){
  .nav{position:fixed;inset:0;z-index:55;background:#fff;padding:calc(var(--hh) + 12px) var(--gutter) 40px;overflow-y:auto;display:none}
  html:not(.js) .nav{position:static;display:block;padding:0;background:none}
  .nav-open .nav{display:block}
  .nav-open{overflow:hidden}
  .nav-open .site-header{background:#fff}
  .brand,.site-header__tools{position:relative;z-index:56}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  html:not(.js) .nav__list{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
  .nav__item{flex-wrap:wrap;border-bottom:1px solid var(--line)}
  .nav__link{flex:1;min-height:58px;font-size:20px}
  .nav__chev{width:52px;height:58px}
  .mega{position:static;width:100%;grid-template-columns:1fr 1fr;box-shadow:none;border:0;padding:4px 0 20px;gap:18px}
  .mega__promo{grid-column:1/-1}
  .nav__extra{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
  .site-header__tools .lang,.site-header__tools .btn{display:none}
  .burger{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line-2);border-radius:50%;background:#fff;cursor:pointer;color:var(--ink)}
  .burger .icon{width:22px;height:22px;stroke-width:1.8}
  .burger .i-close,.nav-open .burger .i-menu{display:none}
  .nav-open .burger .i-close{display:block}
  html:not(.js) .burger{display:none}
}
@media (max-width:1024px){
  .focus,.do,.legend,.glance,.docs,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .steps::before{display:none}
  .howto{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mission{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}
  .timeline{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .timeline::before{display:none}
  .org__tree>li>ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .org__tree>li>ul>li::after{display:none}
  .org__tree>li>ul>li:nth-child(n+4)::before{display:none}
  .hero__count{display:none}
}
@media (max-width:900px){
  :root{--hh:76px}
  .slide,.who,.split,.story,.drives,.page-hero__grid,.prow,.mech{grid-template-columns:minmax(0,1fr)}
  .prow--flip .prow__media{order:0}
  .slide__visual{justify-self:center;max-width:420px}
  .page-hero__media{justify-self:center;max-width:440px}
  .cols-3,.routes,.addrs,.formats,.pgrid{grid-template-columns:1fr}
  .lineup{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card--wide{grid-column:1/-1}
  .proof,.trials,.limits{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .vision{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .mega-line__row--2{justify-content:flex-start}
}
@media (max-width:640px){
  :root{--hh:68px}
  body{font-size:16.5px}
  .brand img{width:124px}
  .burger{width:44px;height:44px}
  /* phone hero: the whole slide plus its controls fits one 390x844 screen */
  .hero{padding-top:calc(var(--hh) + 12px);padding-bottom:22px}
  .hero__kicker{font-size:13.5px;padding-left:32px;margin-bottom:12px}
  .hero__kicker::before{width:22px}
  :lang(th) .hero__kicker{font-size:14.5px}
  /* the slide text box dissolves into the slide grid: eyebrow beside a small visual, then the rest full width */
  .slide{grid-template-columns:minmax(0,1fr) auto;gap:12px 12px;align-items:start}
  .slide__text{display:contents}
  .slide__eyebrow{grid-column:1;grid-row:1;align-self:end;flex-wrap:wrap;gap:4px 10px;font-size:12px;letter-spacing:.12em;padding-bottom:6px}
  .slide__visual{grid-column:2;grid-row:1;justify-self:end;width:min(40vw,156px);max-width:none;margin:0}
  .slide__title,.slide__lead,.slide__cta{grid-column:1/-1}
  .js .slide .float,.js .slide .nmr-card,.float,.nmr-card,.dotburst{display:none}
  .mtile>span,.jar-labels,.s1-badge,.s1-spark{display:none}
  .mtile{border-radius:10px;box-shadow:none}
  :lang(th) .slide__eyebrow{font-size:14px}
  .slide__num::after{display:none}
  .slide__title{font-size:clamp(33px,9.2vw,40px);line-height:1.04}
  :lang(th) .slide__title{font-size:clamp(30px,8.4vw,36px);line-height:1.3}
  .slide__lead{font-size:16px;line-height:1.55}
  :lang(th) .slide__lead{font-size:16.5px;line-height:1.65}
  .slide__cta{gap:6px 20px;padding-top:2px}
  .slide__cta .btn{min-height:48px;padding:0 20px;font-size:13px}
  .slide__cta .btn--ghost{border-color:transparent;padding:0 2px;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-transform:none;letter-spacing:0;font-size:15px}
  :lang(th) .slide__cta .btn{font-size:15px}
  .float{padding:7px 9px;font-size:11px;border-radius:10px;gap:8px}
  .float small{font-size:10px}
  .float--formula svg{width:30px;height:28px}
  .float--formula{bottom:4%}
  .float--chip small,.chip-gc small{display:none}
  .nmr-card{padding:6px 7px 4px;border-radius:10px}
  .nmr-card__cap,.nmr-card__axis{display:none}
  .hero__controls{margin-top:16px;gap:10px}
  .seg__label{display:none}
  .seg{gap:0}
  .hero__segs{gap:6px}
  .lineup,.focus,.do,.mission,.legend,.glance,.docs,.cols-4,.howto{grid-template-columns:1fr}
  .card--wide{grid-template-columns:1fr;padding:14px}
  .card--wide .card__media{min-height:240px}
  .fcard{aspect-ratio:4/3.3}
  .steps{grid-template-columns:1fr;gap:0}
  .step{grid-template-columns:56px minmax(0,1fr);column-gap:18px;padding-bottom:26px}
  .step::before{content:"";position:absolute;left:28px;top:56px;bottom:0;width:1px;background:var(--line-2)}
  .step:last-child::before{display:none}
  .step__n{grid-row:span 2}
  .step h3{margin-top:12px}
  .facts>div{grid-template-columns:1fr;gap:4px}
  .footer__top{grid-template-columns:1fr 1fr}
  .collage{gap:12px}
  .tile{min-height:190px}
  .tile p{font-size:19px}
  .timeline{grid-template-columns:1fr}
  .rows li{grid-template-columns:1fr;gap:4px}
  .spec-table th{width:40%}
  .org__tree>li>ul{grid-template-columns:1fr;padding-left:22px}
  .org__tree>li>ul::before{left:22px}
  .org__tree>li>ul>li{padding-top:10px;padding-left:22px}
  .org__tree>li>ul>li::before{left:0;top:-10px;height:calc(100% + 10px)}
  .org__tree>li>ul>li:last-child::before{height:52px}
  .org__tree>li>ul>li:nth-child(n+4)::before{display:block}
  .org__tree>li>ul>li::after{display:block;left:0;right:auto;width:22px;top:42px}
  .org__tree>li>ul>li:first-child::after{left:0}
  .org__tree>li>ul .org__node{justify-items:start;text-align:left}
  .org__tree>li{align-items:flex-start}
  .cta-panel{padding:28px 20px}
  .mega-line{font-size:clamp(30px,8.6vw,36px)}
  :lang(th) .mega-line{font-size:clamp(28px,8vw,34px)}
  .mega-line__img--pill,.tile svg{display:none}
  .tile small{max-width:none}
  .page-hero__cta .btn{flex:1 1 auto}
}
@media (max-width:360px){
  .footer__top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .slide .ln>span,.js .slide [data-a],.js .slide .float,.js .slide .nmr-card,.js .slide .hx,.js .slide .vis,.js .slide .vis img,.js .slide :is(.hexes,.dotburst,.sachets,.slide4-orb,.orbit__arc,.bond,.atom,.jar,.liquid,.rise,.jar-labels,.mtile,.mtile img,.mtile>span,.panel-orb,.mol,.s1-glass,.s1-bed,.s1-xtal,.s1-badge,.s1-spark path,.s1-art){transition:none!important;animation:none!important;opacity:1!important;transform:none!important;translate:none!important;clip-path:none!important;stroke-dashoffset:0!important}
  .js .slide .sachets{transform:rotate(-7deg)!important}
  .js .slide.is-leaving{visibility:hidden}
  .hero__num.roll{animation:none}
  .marquee__track{animation:none}
  .marquee__cell{display:none}
  *{transition-duration:1ms!important}
}
@media print{.site-header,.hero__controls,.marquee,.glow,.review-note{display:none!important}}

/* ======================================================================
   GENERATED PAGES — components added for the full sitemap (build.py renders them from content JSON).
   Same tokens as above; nothing here changes the approved home / about / products / FreshTrap look.
   ====================================================================== */
section[id],article[id],li[id]{scroll-margin-top:calc(var(--hh) + 16px)}
.after{display:grid;gap:14px;margin-top:22px;max-width:820px}
.after--lead{margin:-18px 0 30px}
.lede-sm{font-size:19px;line-height:1.55;color:var(--ink);font-weight:500}
:lang(th) .lede-sm{line-height:1.7}
.story__body blockquote,.after blockquote,.split__text blockquote{margin:0;padding:6px 0 6px 20px;border-left:3px solid var(--brand-a);color:var(--ink);font-size:18px}
.story__body h3,.after h3{font-size:20px;margin-top:6px}
.story__body ul:not(.rows):not(.ticks),.after ul:not(.ticks):not(.chips){padding-left:20px;display:grid;gap:6px}
.contact-note{font-size:15.5px;color:var(--muted);margin-top:18px;max-width:820px}
.contact-note a{font-weight:600}
.cta-note{margin-top:22px;font-size:16px;max-width:760px}
.method a{color:var(--muted)}
.tick-label{font-size:14px;color:var(--muted);white-space:nowrap}
.tick-link{display:inline-flex;align-items:center;min-height:44px;margin-left:6px;font-weight:600}
.ticks-block{display:grid;gap:18px;max-width:820px}

/* page heroes: text only, jump links, article meta, extra media compositions */
.page-hero__grid--solo{grid-template-columns:minmax(0,860px)}
.jumps{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}
.jumps a{display:grid;gap:2px;min-height:44px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.jumps a:hover{box-shadow:0 0 0 1px var(--line-2),0 12px 24px -18px rgb(27 67 50 / .35)}
.jumps b{font-weight:600;font-size:16px;text-wrap:balance}
.jumps a>span{font-size:14px;color:var(--muted);line-height:1.45;text-wrap:balance}
.article-meta time{font-weight:600}
.article-hero{margin:clamp(28px,3vw,44px) 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.article-hero img{width:100%;aspect-ratio:16/8;object-fit:cover}
.ph-photo{border-radius:var(--r-lg);overflow:hidden;background:#F5EFE3}
.ph-photo img{width:100%;height:100%;object-fit:cover}
.ph-circle__img{position:absolute;inset:7%;border-radius:50%;overflow:hidden;background:var(--panel)}
.ph-circle__img img{width:100%;height:100%;object-fit:cover}
.ph-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.float--card{position:absolute;right:-2%;bottom:4%;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;max-width:300px}
.float-card__title{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
:lang(th) .float-card__title{letter-spacing:0;text-transform:none;font-size:14px}
.float--card ul{list-style:none;display:grid;gap:0}
.float--card li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.float--card a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font-size:15px}
.float--card a:hover{text-decoration:underline}
.float--card .icon{width:18px;height:18px;color:var(--green)}
.float--card small{color:var(--muted);font-size:13px;font-weight:500}
.ph-circle .float--chip,.ph-art .float--chip,.av-media .float--chip{right:0;bottom:10%;left:auto;top:auto}
.ph-art .float--reg,.av-media .float--reg{left:0;top:8%;max-width:260px}
.av-media .float--reg{left:auto;right:0;top:6%}
.ph-art>div{position:absolute;inset:0}
.ft-media .ft-float{position:absolute;z-index:2;left:-2%;bottom:2%;width:46%;transform:rotate(-7deg);filter:drop-shadow(0 18px 22px rgb(27 67 50 / .22))}
.ft-media .float--reg{left:auto;right:0;top:4%}
.ph-evidence{aspect-ratio:auto;display:grid;gap:0}
.ph-evidence figure{margin:0;border-radius:var(--r-lg);background:#fff;box-shadow:0 30px 60px -32px rgb(27 67 50 / .35),0 0 0 1px var(--line);overflow:hidden}
.ph-evidence__img{position:relative;background:#fff}
.ph-evidence__img img{width:100%;height:auto}
.ph-evidence figcaption.method{padding:14px 18px 24px}
.ph-evidence .float--chip{right:-4%;bottom:auto;top:-18px}
.ph-evidence .float--reg{position:relative;left:auto;top:auto;bottom:auto;justify-self:start;margin:-14px 0 0 -4%;max-width:calc(100% - 24px)}

/* cards and grids */
.card__art--warm{background:radial-gradient(90% 90% at 35% 25%,#FFF3DA 0%,#F3F8EE 55%,#DFF1E5 100%)}
.card h3 a,.glance h3 a,.pillar h3 a,.limits h3 a{color:var(--ink);text-decoration-color:var(--line-2)}
.card h3 a:hover,.glance h3 a:hover,.pillar h3 a:hover{color:var(--forest)}
.glance .label{margin-bottom:-2px}
.glance__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#E6F4EC 70%);box-shadow:inset 0 0 0 1px rgb(27 67 50 / .08)}
.glance__icon .icon{width:28px;height:28px;stroke:url(#g-stroke);stroke-width:1.8}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.cols-1{display:grid;gap:20px}
.svc .status{margin-top:-4px}
.pillar .icon{stroke:url(#g-stroke)}
.minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.mini{display:grid;gap:6px;align-content:start;padding:18px;border-radius:var(--r);background:var(--panel)}
.mini h3{font-size:18px}
.mini p{font-size:15.5px}
.limits--top{margin-top:0}
.limits .method{margin-top:2px}
.limits+.note-box,.limits+div.note-box{margin-top:22px}
.note-box p+p,.note-box p+dl,.note-box p+ul{margin-top:12px}
.note-box--block{max-width:900px}
.nb-dl{display:grid;gap:0;margin-top:10px}
.nb-dl>div{display:grid;grid-template-columns:minmax(160px,.34fr) minmax(0,1fr);gap:18px;padding:12px 0;border-top:1px solid var(--line-2)}
.nb-dl dt{font-weight:600;color:var(--ink);font-size:15.5px}
.nb-dl dd{font-size:15.5px;color:var(--text)}
.nb-cards{margin-top:22px}
.note-box .ticks{margin-top:12px}
.refs__group{margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
:lang(th) .refs__group{letter-spacing:0;text-transform:none;font-size:14.5px}
.updated time{font-weight:600}
.news--one{grid-template-columns:minmax(0,640px)}
.route--jump{text-decoration:none;color:var(--text);transition:box-shadow .25s var(--eo)}
.route--jump h3{color:var(--ink)}
.route--jump .tlink{margin-top:auto;min-height:32px}
.route--jump:hover{box-shadow:0 0 0 1px var(--line-2),0 18px 36px -24px rgb(27 67 50 / .35)}
.cta-split{align-items:center}
.cta-split__btns{justify-content:flex-end}
.links-404{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;max-width:640px}

/* split variants */
.split--flip>.split__media{order:2}
.split--solo{grid-template-columns:minmax(0,860px)}
.split__media--pack img{background:radial-gradient(90% 90% at 35% 25%,#FFF3DA 0%,#F3F8EE 55%,#DFF1E5 100%);object-fit:cover}
.split__chart{border-radius:var(--r-lg);aspect-ratio:auto}
.split__media .panel{background:var(--panel)}
.split__media .panel .panel__media img{border-radius:0;aspect-ratio:4/3}

/* proof panels: text panels, charts that keep their own height, the GC card */
.proof--one{grid-template-columns:minmax(0,1fr)}
.panel--text{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.panel--wide .panel__body{max-width:860px}
.panel__media--auto{aspect-ratio:auto}
.panel__media--cover img{object-fit:cover}
.panel__media--text{display:grid;place-items:center;gap:6px}
.gc-mark{font-size:clamp(46px,5vw,72px);font-weight:600;letter-spacing:-.03em;color:var(--forest);line-height:1}
.gc-trace{width:min(80%,320px);height:auto}
.panel .chips{margin-top:2px}
.proof-note{margin-top:14px;font-size:15.5px;max-width:860px}
.proof-note b{color:var(--ink)}

/* trials: single arms (day 0 → end of hold) shown whole, each with its own tag */
.trials--one{grid-template-columns:minmax(0,1fr)}
.trials--one .trial figure{aspect-ratio:auto}
.trials--one .trial figure img{height:auto}
.trial--note{grid-column:1/-1;padding:18px 24px;display:grid;gap:4px;background:#fff;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.trial--note p{font-size:16px;color:var(--ink)}
.trial__arms{display:grid;gap:4px;background:#fff;margin:0}
.trial__arms--row{grid-template-columns:1fr 1fr;align-items:end}
.trial figure.trial__arms{aspect-ratio:auto}
.arm{position:relative;background:#fff}
.arm img{width:100%;height:auto}
.trial figure.trial__arms img,.panel__media.trial__arms img{object-fit:contain;height:auto}
.panel__media.trial__arms{aspect-ratio:auto;display:grid;justify-items:stretch;padding:0}
.arm__tag{position:absolute;left:10px;top:10px;font:600 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:rgb(255 255 255 / .95);color:var(--ink);box-shadow:0 6px 16px -8px rgb(0 0 0 / .4)}
.arm+.arm .arm__tag{background:var(--forest);color:#fff}
:lang(th) .arm__tag,:lang(th) .tags span{letter-spacing:0;text-transform:none;font-size:13px}
.arm__cap{position:absolute;right:10px;bottom:8px;font-size:12px;font-weight:600;color:var(--ink);background:rgb(255 255 255 / .9);padding:4px 8px;border-radius:999px}

/* focus cards that carry an evidence pair: the pair is shown whole (never cropped to portrait) */
.fcard--pair{background:var(--forest)}
.fcard__pair{position:absolute;left:0;right:0;top:0;padding:14px 14px 0}
.fcard__pair img{position:static;width:100%;height:auto;border-radius:10px;object-fit:contain;background:#fff;z-index:auto;transform:none!important}
.fcard__pair .tags{left:24px;right:24px;bottom:auto;top:24px}
.fcard--pair::before{background:linear-gradient(180deg,rgb(8 22 16 / 0) 36%,rgb(8 22 16 / .7) 60%,rgb(8 22 16 / .94) 100%)}
/* the pair, the category chip and the text are in normal flow, one under the other: the chip never covers the
   Control / FreshTrap labels (SPEC §6) and the white text never sits on the white trial photo (WCAG 1.4.3). A row that
   mixes pair cards and photo cards stretches to the tallest card. */
.focus{align-items:stretch;justify-items:stretch}  /* both explicit: a stretched 3:4 card keeps its column width */
.fcard--pair{display:flex;flex-direction:column;aspect-ratio:auto}
.fcard--pair .fcard__pair{position:relative;flex:none}
.fcard--pair .fcard__tag{position:static;align-self:flex-start;margin:14px 14px 0}
.fcard--pair .fcard__body{position:relative;inset:auto;margin-top:auto}

/* products */
.prow__media--photo img.prow__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* comparison table (1-MCP page): a table on wide screens, one card per row on phones */
.cmp-wrap{overflow-x:auto}
.cmp thead th{font-size:14px;font-weight:600;color:var(--ink);padding:12px 12px 12px 0;vertical-align:bottom;border-bottom:1px solid var(--ink)}
.cmp th[scope=row]{width:22%}
.cmp td{padding-right:14px}
.cmp thead td{border-bottom:1px solid var(--ink)}

/* the enquiry form (contact page) */
.enq-wrap{max-width:900px}
.enq{display:grid;gap:22px;padding:clamp(22px,3vw,40px);border-radius:var(--r-lg);background:var(--panel)}
.enq__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.field{display:grid;gap:6px;align-content:start;margin:0;min-width:0}
.field--wide{grid-column:1/-1}
.field label,.field legend,.enq__group legend{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.enq input[type=text],.enq input[type=email],.enq input[type=tel],.enq select,.enq textarea{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--ink);font:400 16px/1.4 var(--font)}
:lang(th) .enq input,:lang(th) .enq select,:lang(th) .enq textarea{font-family:var(--font-th)}
.enq textarea{min-height:140px;resize:vertical}
.enq input:focus-visible,.enq select:focus-visible,.enq textarea:focus-visible{outline:3px solid var(--brand-a);outline-offset:1px}
.field__help{font-size:14px;color:var(--muted);line-height:1.45}
.field__error{font-size:14px;color:var(--accent);font-weight:600;display:flex;gap:6px;align-items:center}
.field__error::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--accent)}
.req{color:var(--accent);font-weight:600}
.choices{display:flex;flex-wrap:wrap;gap:4px 20px}
.choice{display:inline-flex;align-items:flex-start;gap:10px;min-height:44px;padding-top:10px;font-size:15.5px;color:var(--ink);cursor:pointer}
.choice input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green);flex:none}
.field--radio{border:0;padding:0}
.field--check .choice{padding-top:4px}
.enq__group{border:0;border-top:1px solid var(--line-2);padding:18px 0 0;margin:0}
.enq__group legend{padding:0 10px 0 0;font-size:16px}
.enq__group[hidden]{display:none}
.enq__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.enq__status{padding:16px 18px;border-radius:var(--r);font-size:16px;line-height:1.55;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.enq__status.is-ok{box-shadow:inset 4px 0 0 var(--green),inset 0 0 0 1px var(--line-2)}
.enq__status.is-err{box-shadow:inset 4px 0 0 var(--accent),inset 0 0 0 1px var(--line-2);color:#7A2C07}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.route-sec .split__media img{aspect-ratio:4/3}

/* grids that lost cards when unconfirmed copy was removed (strip.mark_grids writes data-n) */
.focus[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.focus[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.lineup[data-n="3"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.lineup[data-n="3"] .card--wide{grid-column:span 2}
.cols-4[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.docs[data-n="2"],.addrs[data-n="2"],.formats[data-n="2"],.pgrid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgrid[data-n="1"],.docs[data-n="1"]{grid-template-columns:minmax(0,440px)}
.proof[data-n="1"],.trials[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.legend[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.glance[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.glance[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.mission[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
/* odd card out (SPEC §10 re-flow, M2 qa/verify-report.md): a two-column grid with an odd count gives its last card the
   whole row instead of leaving an empty column; the trial grids are paired by height in the build (strip.layout_trials),
   which marks their odd card trial--wide and moves it to the end of its run */
@media (min-width:901px){
  :is(.limits,.minis,.proof,.cols-2):is([data-n="3"],[data-n="5"],[data-n="7"],[data-n="9"])>:last-child{grid-column:1/-1}
  .trial--wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center}
  .trial--wide .trial__arms{grid-template-columns:1fr 1fr;align-items:center;height:100%}
  .trial--wide>figure:not(.trial__arms){aspect-ratio:auto;height:100%}
  .trial--wide .trial__body{padding:28px 32px}
}
/* a three-column grid with five cards: 3 + 2, the last two share their row half and half */
@media (min-width:641px){
  .glance[data-n="5"],.cols-3[data-n="5"],.formats[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  :is(.glance,.cols-3,.formats)[data-n="5"]>*{grid-column:span 2}
  :is(.glance,.cols-3,.formats)[data-n="5"]>:nth-child(n+4){grid-column:span 3}
}

@media (max-width:1024px){
  .lineup[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legend[data-n="3"],.glance[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .split--flip>.split__media{order:0}
  .page-hero__grid--solo,.split--solo{grid-template-columns:1fr}
  .cols-2,.minis,.jumps{grid-template-columns:1fr}
  .docs[data-n="2"],.addrs[data-n="2"],.formats[data-n="2"],.pgrid[data-n="2"]{grid-template-columns:1fr}
  .lineup[data-n="3"] .card--wide{grid-column:1/-1}
  .cta-split__btns{justify-content:flex-start}
  .ph-evidence{max-width:520px}
  .float--card{right:0}
}
@media (max-width:640px){
  .focus[data-n="3"],.focus[data-n="2"],.lineup[data-n="3"],.legend[data-n="3"],.glance[data-n="4"],.glance[data-n="2"],.cols-4[data-n="3"],.mission[data-n="3"]{grid-template-columns:1fr}
  .enq__grid{grid-template-columns:1fr}
  .nb-dl>div{grid-template-columns:1fr;gap:2px}
  .links-404{grid-template-columns:1fr}
  .trial__arms--row{grid-template-columns:1fr 1fr}
  .ph-evidence .float{display:none}
  .article-hero img{aspect-ratio:4/3}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .cmp th[scope=row]{width:auto;padding:0 0 6px;border:0;font-size:15px;color:var(--ink)}
  .cmp td{border:0;padding:4px 0}
  .cmp td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
  .ft-media .ft-float{width:40%;left:3%}
  .page-hero__media .float{padding:8px 10px;font-size:12px}
  .float--card{position:relative;right:auto;bottom:auto;margin-top:12px;max-width:none}
}
/* ---------- process infographic (.pinfo — components.Page.process_ol): how CHON works in six steps ----------
   An <ol> of rounded cards on a soft panel with glows; each card = a hexagon pictogram (art.PROCESS_ART, aria-hidden),
   the step number (aria-hidden: the list numbers it), the title and one line. Desktop: one row, a gradient "bond"
   runs behind the cards with an atom in each gap. Tablet: 3 × 2. Phone: a vertical stack, the bond runs down the
   pictograms. .pinfo--compact drops the cards (About). */
.pinfo{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel),#fff 88%);border:1px solid var(--line);padding:clamp(28px,3vw,44px) clamp(18px,2.4vw,34px)}
.pinfo .glow--mint{--w:min(44vw,600px);right:-14%;top:-50%}
.pinfo .glow--teal{--w:min(36vw,520px);left:-16%;bottom:-66%}
.pinfo .glow--lime{--w:min(24vw,340px);left:40%;top:-34%}
.pinfo__list{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;list-style:none}
.pinfo__list::before{content:"";position:absolute;left:0;right:0;top:56px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b) 72%,var(--line-2))}
.pinfo__step{position:relative;isolation:isolate;display:grid;align-content:start;gap:14px;padding:16px 14px 20px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px -20px rgb(27 67 50 / .30)}
.pinfo__step:not(:last-child)::after{content:"";position:absolute;top:51px;right:-16px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--brand-a);z-index:1}
.pinfo__step:nth-child(n+4):not(:last-child)::after{border-color:var(--brand-b)}
.pinfo__art{position:relative;width:80px;height:80px}
.pinfo__art::before{content:"";position:absolute;inset:-18px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgb(183 228 199 / .8),rgb(183 228 199 / .28) 55%,transparent)}
.pinfo__svg{width:100%;height:100%}
.pinfo__n{position:absolute;top:16px;right:16px;font:600 14px/1 var(--font);letter-spacing:.04em;color:var(--teal-ink);font-variant-numeric:tabular-nums}
.pinfo__text{display:grid;gap:8px;align-content:start}
.pinfo__title{font-size:17px;line-height:1.3;letter-spacing:-.01em}
:lang(th) .pinfo__title{font-size:17px;line-height:1.45}
.pinfo__title a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand-a);text-decoration-thickness:2px;text-underline-offset:4px}
.pinfo__title a:hover{color:var(--forest);text-decoration-color:var(--brand-b)}
.pinfo__sub{display:block;margin-top:3px;font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--green)}
.pinfo__line{font-size:15px;line-height:1.55}
:lang(th) .pinfo__line{font-size:15.5px;line-height:1.65}
.pinfo + .after{margin-top:22px}
/* compact (About "What we do"): no cards, smaller art, the bond runs straight through the hexagons */
.pinfo--compact{padding:clamp(22px,2.4vw,34px) clamp(18px,2.4vw,32px)}
.pinfo--compact .pinfo__list::before{display:none}
/* compact: a bond segment from each hexagon to the next one (ends exactly at the last hexagon) */
.pinfo--compact .pinfo__step:not(:last-child)::before{content:"";position:absolute;z-index:-1;left:32px;top:31px;width:calc(100% + 18px);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.pinfo--compact .pinfo__step{padding:0;background:none;border:0;box-shadow:none;gap:12px}
.pinfo--compact .pinfo__step::after{display:none}
.pinfo--compact .pinfo__art{width:64px;height:64px}
.pinfo--compact .pinfo__art::before{inset:-12px}
.pinfo--compact .pinfo__n{top:0;right:auto;left:74px}
.pinfo--compact .pinfo__title{font-size:16.5px}
.pinfo--compact .pinfo__line{font-size:14.5px}
:lang(th) .pinfo--compact .pinfo__line{font-size:15px}
@media (max-width:1299px){
  .pinfo__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
  .pinfo__list::before,.pinfo__step:not(:last-child)::after{display:none}
  .pinfo--compact .pinfo__step:nth-child(3n)::before{display:none}
}
@media (max-width:640px){
  .pinfo{padding:18px 14px;border-radius:var(--r)}
  .pinfo__list{grid-template-columns:minmax(0,1fr);gap:14px}
  .pinfo__list::before{display:block;left:46px;right:auto;top:40px;bottom:40px;width:2px;height:auto;background:linear-gradient(180deg,var(--brand-a),var(--brand-b))}
  .pinfo__step{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 14px 16px}
  .pinfo__step:not(:last-child)::after{display:block;top:auto;right:auto;bottom:-13px;left:40px}
  .pinfo__art{width:64px;height:64px}
  .pinfo__art::before{inset:-12px}
  .pinfo__n{top:15px;right:14px}
  .pinfo__text{padding-right:24px}
  .pinfo__title,:lang(th) .pinfo__title{font-size:17px}
  .pinfo__line,:lang(th) .pinfo__line{font-size:15px}
  .pinfo--compact{padding:18px 14px}
  .pinfo--compact .pinfo__step:not(:last-child)::before,.pinfo--compact .pinfo__step:nth-child(3n):not(:last-child)::before{display:block;left:27px;top:28px;width:2px;height:calc(100% + 14px);background:linear-gradient(180deg,var(--brand-a),var(--brand-b))}
  .pinfo--compact .pinfo__step{grid-template-columns:56px minmax(0,1fr);padding:0}
  .pinfo--compact .pinfo__art{width:56px;height:56px}
  .pinfo--compact .pinfo__n{top:2px;right:0;left:auto}
  .pinfo--compact .pinfo__step:not(:last-child)::after{display:none}
  .pinfo--compact .pinfo__line{font-size:14.5px}
}
/* hidden messages stay hidden even where a display rule is set; buttons under a grid get room */
.field__error[hidden],.enq__status[hidden],[hidden]{display:none !important}
.container > .page-hero__cta{margin-top:28px}
.container > .page-hero__cta:first-child{margin-top:0}
/* badge-free FreshTrap imagery on the home page (the pouch print carries a claim; only its top is shown) */
.pouch-panel img.pouch-top{left:27%;top:13%;width:68%;height:auto;-webkit-mask-image:linear-gradient(#000 88%,transparent 100%);mask-image:linear-gradient(#000 88%,transparent 100%)}  /* the crop now stops above the pouch roundels (800x491): the fade starts where it did on the 800x600 crop */
.card--wide .card__media img.lineup-sachets{width:74%;mix-blend-mode:normal;filter:drop-shadow(0 16px 20px rgb(27 67 50 / .16));rotate:-5deg}

/* ================================================================ round-2 fixes (qa/visual-r2-*.md, tech-report-r2.md) */
/* focus ring: --brand-a is 2.8:1 on white; the ink teal is 5.3:1 (WCAG 1.4.11) */
:focus-visible{outline-color:var(--teal-ink)}
.enq input:focus-visible,.enq select:focus-visible,.enq textarea:focus-visible{outline-color:var(--teal-ink)}
/* a wrapped button label is centred, with room between its lines */
.btn{text-align:center;line-height:1.25}
.btn>.fx{display:block}
@media (max-width:414px){.btn{padding-inline:20px}}
/* breadcrumbs: the separator ends the item before it, so a wrapped line never starts with "/" */
.crumbs li+li::before{content:none}
.crumbs li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--muted)}
/* the process rule stops at the last dot */
.steps::before{right:calc((100% - 4 * 26px) / 5 - 28px)}
.steps--3::before{right:calc((100% - 2 * 26px) / 3 - 28px)}
/* phone drawer: the list scrolls below the header row, never under the logo */
@media (max-width:1239px){.nav{inset:var(--hh) 0 0 0;padding-top:12px}}
/* footer facts: one column on phones (a squeezed 2-up grid wrapped the address a word a line) */
/* reflow at 320 px (WCAG 1.4.10): long e-mail addresses may break; long hyphenated terms may break at the hyphen */
a[href^="mailto:"],.contact-line a,.cta-panel a{overflow-wrap:anywhere}
.contact-line a,.cta-panel a{min-width:0}
@media (max-width:359.98px){.nw--hy{white-space:normal}}

/* ================================================================ round-3 fixes (qa/visual-r2-*.md re-check) */
/* an image whose box differs from its ratio is never stretched (the 500x407 sachets in fixed boxes) */
img{object-fit:contain}
/* Thai labels and chips: 14 px minimum (SPEC §3) */
:lang(th) :is(.float,.float small,.float--card small,.spec li,.chips li,.fcard__tag,.chart__axis,.footer__bottom,.org__node small,.howto b,.nmr-card__cap,.arm__tag,.tags span,.arm__cap,.page-hero__media .float){font-size:14px}
:lang(th) .cmp td::before{font-size:14px}
/* limits / honest-fit cards: a solid border (dashed is for placeholders), content from the top, the citation at the foot */
.limits>div{border-style:solid;border-color:var(--line);display:flex;flex-direction:column;gap:8px}
.limits>div>.method{margin-top:auto;padding-top:4px}
/* proof panels: a short note card keeps its own height beside a tall chart */
.proof{align-items:start}
/* the stopped slider still shows which slide is on (reduced motion, ?slide=N, after Pause) */
.hero.is-stopped .seg[aria-current="true"] .seg__fill{animation:none;transform:scaleX(1);background:var(--grad)}
/* the hero glow fades out inside the hero instead of ending in a hard line */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(120px,40%);background:linear-gradient(rgb(255 255 255 / 0),#fff);z-index:-1;pointer-events:none}
/* five enquiry routes: 3 + 2 on desktop, no empty cell */
@media (min-width:901px){
  .routes[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .routes[data-n="5"]>*{grid-column:span 2}
  .routes[data-n="5"]>:nth-child(n+4){grid-column:span 3}
}
/* two-tone headlines: one phrase in a darkened brand gradient (large text, ≥ 3:1 on white at both ends) */
.kw{font-style:normal;color:#00796E}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kw{background:var(--kw-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}
/* services page: a bar to jump between the three services, "suits you if" bullets, the scale ladder */
.svc-switch{margin:-6px 0 22px}
.svc-switch ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.svc-switch a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;transition:border-color .2s var(--eo),background .2s var(--eo)}
.svc-switch a:hover{border-color:#9ED3C2;background:var(--panel)}
.svc-switch .icon{width:22px;height:22px;stroke:var(--forest)}
.svc[id]{scroll-margin-top:calc(var(--hh) + 28px)}
.svc-fit__h{margin-top:4px;font:600 12.5px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
:lang(th) .svc-fit__h{letter-spacing:0;text-transform:none;font-size:14px}
.svc-fit{list-style:none;display:grid;gap:8px;margin:0 0 6px}
.svc-fit li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--text)}
.svc-fit li::before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:8px;border:2px solid var(--brand-a);border-top:0;border-right:0;transform:rotate(-45deg)}
.ladder{margin:6px 0 0;padding:clamp(18px,3vw,34px);border-radius:var(--r-lg);background:linear-gradient(180deg,#fff,var(--panel));box-shadow:0 0 0 1px rgb(27 67 50 / .06)}
.ladder__art{display:block;width:100%;height:auto}
.ladder__art--tall{display:none;max-width:420px;margin:0 auto}
@media (max-width:900px){.ladder__art--wide{display:none}.ladder__art--tall{display:block}}
@media (max-width:640px){.svc-switch a{font-size:14px;padding:6px 14px 6px 10px}}
@media (prefers-reduced-motion:no-preference){
  .js .ladder:not(.is-in) .ladder__rung{opacity:0}
  .js .ladder.is-in .ladder__rung{transform-box:fill-box;transform-origin:50% 100%;animation:rung-up .8s var(--eq) calc(var(--i,0) * 120ms) both}
}
@keyframes rung-up{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
/* seven enquiry routes: the three services in one row, FreshTrap and everything else in the next */
@media (min-width:901px){
  .routes[data-n="7"]{grid-template-columns:repeat(12,minmax(0,1fr))}
  .routes[data-n="7"]>*{grid-column:span 3}
  .routes[data-n="7"]>:nth-child(-n+3){grid-column:span 4}
}
/* home: three fixed ways in under the slider (they replace the moving ticker) */
.qroutes{position:relative;z-index:1;padding:0 0 clamp(8px,1.6vw,20px)}
.qroutes ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.qroute a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;height:100%;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 16px 36px -28px rgb(27 67 50 / .45);transition:border-color .2s var(--eo),transform .35s var(--eq),box-shadow .35s var(--eq)}
.qroute a:hover{border-color:#9ED3C2;transform:translateY(-2px);box-shadow:0 22px 40px -26px rgb(27 67 50 / .5)}
.qroute a:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
.qroute__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--panel);color:var(--forest)}
.qroute__icon .icon{width:24px;height:24px}
.qroute__text b{display:block;font-size:16.5px;line-height:1.3;font-weight:600}
.qroute__text small{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--muted)}
.qroute a>.icon{width:20px;height:20px;color:var(--forest);transition:transform .3s var(--eq)}
.qroute a:hover>.icon{transform:translateX(3px)}
:lang(th) .qroute__text b{font-size:17px}
@media (max-width:900px){.qroutes ul{grid-template-columns:1fr;gap:10px}.qroute a{padding:14px 16px}}
@media (prefers-reduced-motion:reduce){.qroute a,.qroute a>.icon{transition:none}.qroute a:hover{transform:none}.qroute a:hover>.icon{transform:none}}
/* the three-panel mechanism figure sits in the middle of the container */
.mech--stack>.mech__art{margin-inline:auto}
/* one remaining pipeline card: beside the section intro, not a third of an empty row */
@media (min-width:901px){
  .container:has(>.shead+.pgrid[data-n="1"]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:center}
  .container:has(>.shead+.pgrid[data-n="1"])>.pgrid{grid-template-columns:minmax(0,1fr)}
}
/* one related story: a full-width row, title and dek across, the arrow at the end */
.news--one{grid-template-columns:minmax(0,1fr)}
@media (min-width:641px){
  .news--one .ncard{grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center}
  .news--one .ncard>:not(svg){grid-column:1}
  .news--one .ncard>svg{grid-column:2;grid-row:1/span 3}
}
/* comparison table: fixed columns, so no column is crushed (row header 18 %, three equal columns) */
@media (min-width:641px){
  .cmp{table-layout:fixed;width:100%}
  .cmp thead tr>:first-child{width:18%}
  :lang(th) .cmp thead tr>:first-child{width:16%}
}
/* small evidence and lab photos are never drawn past their own pixels (soft at 1.25x); a pair shares one box */
[style*="--nw"]{max-width:min(100%,var(--nw))}
.trial__arms--row{align-items:start}
.trial__arms--row[style*="--row-nw"]>.arm{max-width:min(100%,var(--row-nw))}
.trial__arms--row[style*="--row-ar"]>.arm img{aspect-ratio:var(--row-ar);object-fit:contain;background:#fff}
/* hero shapes: a circle on the crop pages (SPEC §6); the pouch keeps its wordmark clear of the blob edge and the chip */
.ft-media--round .blob{inset:auto;left:7%;top:5%;width:88%;height:auto;aspect-ratio:1;border-radius:50%}
.ft-media--pouch .blob{border-radius:46% 54% 16% 18% / 40% 42% 14% 16%}
.ft-media--pouch .float--chip{right:auto;left:-2%;bottom:auto;top:50%}
/* service cards: the text link sits at the foot of every card */
.svc{display:flex;flex-direction:column;align-items:flex-start}
.svc>.tlink{margin-top:auto}
/* diagrams with a phone drawing (labels ≥ 12 px on screen) */
.ring__svg--narrow,.chart__svg--narrow{display:none}
@media (max-width:640px){
  .ring__svg--wide,.chart__svg--wide{display:none}
  .ring__svg--narrow,.chart__svg--narrow{display:block;width:100%;height:auto;max-width:380px;margin-inline:auto}
  .ph-hide-sm{display:none}
}
/* FAQ page: each group's heading sits beside its questions on wide screens */
@media (min-width:1100px){
  .faq-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  .faq-split>.shead{position:sticky;top:calc(var(--hh) + 24px);margin-bottom:0}
}
.jumps{grid-auto-rows:1fr}
/* stacked trial arms (celery, choy sum): one white box of one ratio per arm on every card, the photo at no more than its
   own pixels in the middle, so cards in a row are the same height and their captions line up */
.trial figure.trial__arms:not(.trial__arms--row){background:#fff}
.trial figure.trial__arms:not(.trial__arms--row)>.arm{max-width:none;width:100%;aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;background:#fff}
.trial figure.trial__arms:not(.trial__arms--row)>.arm img{width:auto;height:auto;max-width:min(100%,var(--nw,100%));max-height:100%}
/* a single evidence figure (the Vanda pair, 697 px): photo at its own size and the caption beside it, in one white card */
.trials--one .trial{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:901px){
  .trials--one .trial{flex-direction:row;align-items:center}
  .trials--one .trial figure{flex:0 1 auto;width:min(100%,var(--fig-w,697px));max-width:60%}
  .trials--one .trial figure img{max-width:100%}
  .trials--one .trial__body{flex:1 1 0;padding:28px 32px}
}
/* glance cards with label lines: one shared label row per grid row, so titles line up */
.glance__rest{display:grid;gap:10px;align-content:start}
.label--empty{margin:0}
@media (min-width:641px){
  .glance--labelled>div{grid-row:span 2;grid-template-rows:subgrid;row-gap:10px}
}
@media (max-width:640px){.label--empty{display:none}}
/* a crop card's pair photo: one box ratio, so the evidence chips under the photos sit at one height */
.fcard__pair img{aspect-ratio:4/3}
.fcard--pair .fcard__tag{border-radius:12px;line-height:1.35}
/* CTA panel actions: one column of equal-width buttons, the text link centred under them */
@media (min-width:901px){
  .cta-split__btns{display:grid;grid-template-columns:minmax(240px,max-content);justify-content:end;justify-items:stretch;gap:12px}
  .cta-split__btns>.tlink{justify-self:center}
}
/* NMR figure: the box follows the spectrum's own ratio (it was letterboxed in a 4:3 box); on a phone the text comes first */
.split__chart .chart img{aspect-ratio:auto}
@media (max-width:900px){
  .split--flip>.split__media.split__chart{order:2}
  .split__chart.panel__media--grid{padding:12px}
}
/* residues: the three mini cards run across the container; a note box above a card grid is as wide as the grid */
.split--solo{grid-template-columns:minmax(0,1fr)}
.split--solo>.split__text>:not(.minis){max-width:860px}
@media (min-width:901px){.split--solo .minis[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.split--solo .minis[data-n="3"]>:last-child{grid-column:auto}}
.note-box--block:has(+.glance){max-width:none}
/* the pouch-top crop ends just under the wordmark: a short fade below "TRAP" instead of a hard cut (the fade used to run
   through the wordmark) */
img[src*="freshtrap-pouch-top-800"]{-webkit-mask-image:linear-gradient(#000 95%,transparent);mask-image:linear-gradient(#000 95%,transparent)}
.pouch-panel img.pouch-top{-webkit-mask-image:linear-gradient(#000 95%,transparent 100%);mask-image:linear-gradient(#000 95%,transparent 100%)}
/* the FreshTrap card photo keeps the whole wordmark in a square-ish card */
.fcard img[src*="freshtrap-pouch-card"]{object-position:72% 40%}
/* page H1 written as explicit lines (Thai, SPEC §3): each line a block that may still wrap between phrases */
.page-hero h1 .ln{overflow:visible;text-wrap:balance}
/* a stand-alone checklist (how to use: what you need) runs in two columns on wide screens instead of a narrow strip */
@media (min-width:1024px){
  .shead+.ticks-block{max-width:none}
  .shead+.ticks-block>.ticks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
}
/* the reply-language radio group: its legend lines up with the other field labels (no fieldset/legend default inset) */
fieldset.field{border:0;margin:0;padding:0;min-width:0}
fieldset.field>legend{padding:0}
/* Thai page heroes at desktop: a slightly smaller H1 (now on explicit lines) and hero body text, so the buttons sit in
   a 1440 x 900 first screen */
@media (min-width:1024px){
  :lang(th) .page-hero h1{font-size:clamp(32px,3.1vw,45px)}
  :lang(th) .page-hero__text>p:not(.lede):not(.eyebrow):not(.page-hero__cta){font-size:16.5px;line-height:1.7}
  :lang(th) .page-hero__text>.lede{font-size:19px}
}
/* Thai home slider on a phone: slide and controls end by 729 px on a 390 x 844 screen (SPEC §5.3) */
@media (max-width:640px){
  :lang(th) .slide__title{font-size:clamp(29px,8vw,36px);line-height:1.24}
  :lang(th) .slide__lead{line-height:1.55}
}
/* trial pairs: each photo box follows its own pair's ratio (no white bands), and the Control / FreshTrap tags sit in a
   band under the photo instead of over the stem ends */
.trial>figure:not(.trial__arms){aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
.trial>figure:not(.trial__arms)>img{height:auto;width:100%;aspect-ratio:auto}
.trial>figure:not(.trial__arms)>.tags{position:static;align-self:stretch;padding:10px 14px 12px;background:#fff}
.trials--one .trial>figure>.tags{padding-inline:0}
.trials{align-items:start}
/* contact hero on a phone: the "Call or e-mail" card stays (only decorative chips are hidden), in the flow under the
   circle photo, so the first tappable number is in the first screens */
@media (max-width:640px){
  .ph-circle:has(.float--card){aspect-ratio:auto;display:flex;flex-direction:column}
  .ph-circle:has(.float--card)::before{content:"";display:block;width:100%;aspect-ratio:1}
  .ph-circle:has(.float--card) .ph-circle__img{inset:auto;top:0;left:0;margin:7%;width:86%;height:auto;aspect-ratio:1}
  .ph-circle:has(.float--card)>.ph-ring{inset:auto;top:0;left:0;height:auto;aspect-ratio:1}
  .page-hero__media .float--card{display:flex;position:relative;right:auto;bottom:auto;margin-top:12px;max-width:none;font-size:15px;padding:14px 16px}
}
/* wrapped button labels and FAQ questions are balanced: no lone last word ("Request a trial on your / crop") */
.btn>.fx,.faq summary>span{text-wrap:balance}
/* Chrome paints the first half of a soft-split term ("1-methyl­cyclopropene") at a smaller size when its block uses
   text-wrap balance/pretty: such blocks wrap normally */
:is(h1,h2,h3,p,li,dd,figcaption):has(.nw--soft){text-wrap:wrap}

/* ---------- phase-A review fixes (2026-10-06) ---------- */
/* Thai headings: room for the tone marks at the top of a tight section */
:lang(th) .eyebrow{padding-top:3px}
/* four steps fill four columns, no empty fifth (layout-2) */
@media (min-width:1025px){.steps[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.steps[data-n="4"]::before{right:calc((100% - 3 * 26px) / 4 - 28px)}}
/* the quick routes show above the fold on a 900 px laptop (layout-3) */
@media (min-width:901px){.qroutes{margin-top:-40px}}
/* slide 4 and the industry tiles are drawn */
.vis .art-panel{display:block;width:100%;height:100%}
/* "who we are" tile: how we work in three numbered steps, each with one plain line (owner 06/10: the bare chips said nothing).
   Child selectors only: the build wraps Thai terms in span.nw inside these items. */
.tile__how{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);margin-top:auto;width:100%}
.tile .tile__how>small{max-width:none}
.tile__steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.1vw,14px);counter-reset:step}
.tile__steps>li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding-top:clamp(10px,1.1vw,14px);border-top:1px solid rgb(255 255 255 / .18)}
.tile__steps>li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--brand-b);font-variant-numeric:tabular-nums}
.tile__steps>li>b{font-size:clamp(17px,1.45vw,20px);font-weight:600;color:#fff;line-height:1.3}
.tile__steps>li>span{font-size:14px;color:#BFE6CF;line-height:1.45}
:lang(th) .tile__steps>li>b{font-family:var(--font-th-head);font-weight:500}
.tile:has(.tile__ask) .tile__steps>li>span{display:none}
/* the drawn circle says what it is */
.collage__circle .float--cap{left:-4%;bottom:4%;margin:0;max-width:78%}
.float--cap>span{display:block}
/* contact hero: the call card sits below the drawn trace (visual-1) */
@media (min-width:901px){.page-hero__media.ph-circle .float--card{right:0;bottom:-6%}}
/* the form panel is centred (layout-4) */
.enq-wrap{margin-inline:auto}
/* five news cards: the newest spans the row, no orphan (layout-6) */
@media (min-width:641px){.news[data-n="5"]>:first-child{grid-column:1/-1}}
/* phone: the breadcrumb does not repeat the H1 (layout-7) */
@media (max-width:640px){.crumbs li:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.crumbs li:nth-last-child(2)::after{content:none}}
/* tablets keep the header call to action (layout-11) */
@media (min-width:641px) and (max-width:1239px){.site-header__tools .btn{display:inline-flex}}
/* slide 1 kicker: no location line on phones (layout-12) */
@media (max-width:640px){.kicker-loc{display:none}}
/* a note box with no lead: no stray rule at the top (layout-13) */
.note-box>.nb-dl:first-child{margin-top:0}.note-box>.nb-dl:first-child>div:first-child{border-top:0;padding-top:0}
/* guide questions read as questions (visual-4) */
#questions .rows li{grid-template-columns:minmax(300px,.4fr) minmax(0,1fr)}
#questions .rows h3{font-size:17px;color:var(--ink);line-height:1.35}
#questions .rows p{color:var(--text);font-size:16px}
@media (max-width:640px){#questions .rows li{grid-template-columns:1fr}}
/* print and "Save as PDF": gradient words stay visible, buttons keep their fill (a11y-1) */
@media print{.kw,.statement em{background:none!important;color:#00796E!important;-webkit-text-fill-color:#00796E}.btn{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (forced-colors:active){.kw,.statement em{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
@media (max-width:480px){.tile{padding:16px}.tile__steps{gap:8px}.tile__steps>li{padding-top:8px;column-gap:8px}.tile__steps>li>span{display:none}.tile__steps>li>b{font-size:15px}.tile__steps>li::before{font-size:12px}}
/* phones hide floating chips; the circle's caption comes back from 481 px (on a phone it covered half the circle) */
@media (min-width:481px) and (max-width:640px){.collage__circle .float--cap{display:flex;left:-2%;bottom:2%}}

/* ---------- home v3 (owner, 2026-10-07: "like Pentagram or Dr.Sprouts" — big photos, few words, real trials and packaging) ---------- */
.x-intro{padding-bottom:clamp(40px,5vw,72px)}
.x-intro__line{margin-top:22px;font-size:clamp(30px,4.3vw,64px);line-height:1.1;letter-spacing:-.025em;font-weight:500;color:var(--ink);max-width:19em;text-wrap:balance}
.x-intro__line em{font-style:normal;background:var(--kw-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:lang(th) .x-intro__line{font-family:var(--font-th-head);font-size:clamp(27px,3.5vw,52px);line-height:1.38;letter-spacing:0;max-width:22em}
.x-intro__foot{display:grid;grid-template-columns:minmax(0,640px) auto;justify-content:space-between;align-items:end;gap:20px 48px;margin-top:clamp(36px,4.4vw,64px);padding-top:26px;border-top:1px solid var(--line-2)}

.x-svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.x-svc li{border-bottom:1px solid var(--line-2)}
.x-svc__row{display:grid;grid-template-columns:72px minmax(0,1fr) clamp(170px,17vw,240px) 28px;align-items:center;gap:clamp(18px,2.6vw,40px);padding-block:clamp(22px,2.4vw,34px);color:inherit;text-decoration:none}
.x-svc__n{font:600 15px/1 var(--font);color:var(--teal-ink);font-variant-numeric:tabular-nums;align-self:start;padding-top:.7em}
.x-svc__t{display:grid;gap:10px;min-width:0}
.x-svc__t b{font-size:clamp(24px,2.7vw,40px);line-height:1.12;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
:lang(th) .x-svc__t b{font-family:var(--font-th-head);font-weight:500;letter-spacing:0;line-height:1.35;font-size:clamp(23px,2.4vw,34px)}
.x-svc__t>span{max-width:600px;color:var(--text)}
.x-svc__img{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--panel)}
.x-svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--eq)}
.x-svc__img--chart{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.x-svc__img--chart img{object-fit:contain;padding:12px}
.x-svc__go{width:26px;height:26px;color:var(--ink);transition:transform .3s var(--eo)}
.x-svc__row:hover .x-svc__img img{transform:scale(1.05)}
.x-svc__row:hover .x-svc__go{transform:translateX(5px)}
.x-svc__row:hover .x-svc__t b{color:var(--forest)}

.x-ft{--deep:#12392B;background:var(--deep);color:#fff;padding-block:var(--section)}
.x-ft__grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,3.3fr) minmax(0,3.6fr);grid-template-rows:auto auto;gap:18px clamp(16px,1.6vw,24px);align-items:start}
.x-ft__text{grid-row:1/span 2;display:grid;gap:20px;align-content:start;padding-right:clamp(0px,2vw,32px)}
.x-ft__title{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.025em;color:#fff}
:lang(th) .x-ft__title{line-height:1.3;letter-spacing:0}
.x-ft__lead{font-size:19px;line-height:1.6;color:rgb(255 255 255 / .86)}
.x-ft__spec{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.x-ft__spec li{font-size:14px;padding:7px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .34);color:#fff}
.x-ft__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn--on-dark{--b:#fff;color:var(--deep,#12392B)}
.btn--on-dark:hover{background:#E2F2E7;border-color:#E2F2E7;color:#12392B}
.btn--ghost-dark{background:transparent;border-color:rgb(255 255 255 / .6);color:#fff}
.btn--ghost-dark:hover{background:#fff;border-color:#fff;color:#12392B}
.x-ft__note{font-size:14px;color:rgb(255 255 255 / .74)}
.x-ft__shot{margin:0;display:grid;gap:10px}
.x-ft__shot img{width:100%;border-radius:16px;background:#fff;object-fit:cover}
.x-ft__shot--pouch{grid-column:2;grid-row:1/span 2}
.x-ft__shot--pouch img{aspect-ratio:3/4}
.x-ft__shot--sachets{grid-column:3;grid-row:1}
.x-ft__shot--sachets img{aspect-ratio:4/3}
.x-ft__shot--carton{grid-column:3;grid-row:2}
.x-ft__shot--carton img{aspect-ratio:2/1;object-fit:contain;padding:6px 4px}
.x-ft__shot figcaption{font-size:13px;color:rgb(255 255 255 / .72)}
.x-more{margin-top:clamp(48px,5vw,80px);padding-top:30px;border-top:1px solid rgb(255 255 255 / .2);display:grid;gap:22px}
.x-more__head{font:600 13px/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#B7E4C7}
:lang(th) .x-more__head{letter-spacing:0;font-size:15px}
.x-more__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px 32px}
.x-more__list li{display:grid;gap:10px;align-content:start}
.x-more__list h3{font-size:20px;color:#fff}
.x-more__list p:not(.status){font-size:15.5px;line-height:1.6;color:rgb(255 255 255 / .78)}
.x-more__list .status--lab{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .4)}
.tlink--on-dark{color:#fff;justify-self:start}
.tlink--on-dark:hover{color:#B7E4C7}

.x-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)}
.x-pair{margin:0;display:grid;gap:16px;align-content:start}
.x-pair__arms{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x-arm{position:relative;overflow:hidden;border-radius:14px;background:var(--panel)}
.x-pair .x-arm{aspect-ratio:4/5}
.x-arm img{width:100%;height:100%;object-fit:cover}
.x-tag{position:absolute;left:10px;bottom:10px;font:600 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:8px 11px;border-radius:999px;background:rgb(255 255 255 / .95);color:var(--ink);box-shadow:0 6px 16px -8px rgb(0 0 0 / .4)}
.x-tag--ft{background:var(--forest);color:#fff}
:lang(th) .x-tag{letter-spacing:0;text-transform:none;font-size:13px}
.x-pair figcaption,.x-strip figcaption{display:grid;gap:6px}
.x-pair figcaption b{font-size:clamp(20px,1.8vw,26px);line-height:1.2;color:var(--ink);font-weight:600}
.x-pair figcaption>span,.x-strip figcaption>span:last-child{font-size:15.5px;line-height:1.6;color:var(--text)}
.x-strip{list-style:none;margin:clamp(30px,3.4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(20px,2.4vw,36px)}
.x-strip figure{margin:0;display:grid;gap:14px}
.x-strip__arms{display:grid;gap:6px}
.x-strip .x-arm{aspect-ratio:3/2;background:#fff;border:1px solid var(--line)}
.x-strip .x-arm img{object-fit:contain}
.x-strip figcaption b{font-size:19px;color:var(--ink);font-weight:600}
.x-days{font:600 clamp(30px,3vw,44px)/1 var(--font);letter-spacing:-.02em;color:var(--green)}
:lang(th) .x-days{font-family:var(--font-th-head);font-weight:500;letter-spacing:0}
.x-trials .method{margin-top:26px}

.x-proof__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.x-proof__chart{margin:0;padding:clamp(16px,2vw,28px);border-radius:var(--r-lg);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.x-proof__text{display:grid;gap:18px;align-content:center}

.x-team{padding-top:var(--section)}
.x-team__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.x-team__grid a{display:grid;gap:4px;color:inherit;text-decoration:none}
.x-team__img{display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--panel);margin-bottom:10px}
.x-team__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--eq)}
.x-team__grid a:hover img{transform:scale(1.04)}
.x-team__grid b{font-size:17px;line-height:1.35;color:var(--ink);font-weight:600}
.x-team__grid a>span:last-child{font-size:15px;line-height:1.45;color:var(--muted)}
.x-facts{list-style:none;margin:clamp(40px,4.4vw,64px) 0 0;padding:26px 0 0;border-top:1px solid var(--line-2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(24px,3vw,48px)}
.x-facts li{display:grid;gap:8px;align-content:start}
.x-facts b{font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--ink);font-weight:600;letter-spacing:-.015em}
:lang(th) .x-facts b{font-family:var(--font-th-head);font-weight:500;letter-spacing:0;line-height:1.35}
.x-facts li>span{font-size:15.5px;line-height:1.6;color:var(--text)}

.x-news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.x-ncard a{display:grid;gap:10px;color:inherit;text-decoration:none}
.x-ncard__img{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--panel);margin-bottom:6px}
.x-ncard__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .6s var(--eq)}
.x-ncard__img--chart{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.x-ncard__img--chart img{object-fit:contain;padding:18px}
.x-ncard a:hover img{transform:scale(1.04)}
.x-ncard__meta{font:600 12.5px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
:lang(th) .x-ncard__meta{letter-spacing:0;text-transform:none;font-size:14px}
.x-ncard__title{font-size:19px;line-height:1.35;font-weight:600;color:var(--ink)}
:lang(th) .x-ncard__title{font-family:var(--font-th-head);font-weight:500;line-height:1.45}
.x-ncard a:hover .x-ncard__title{color:var(--forest)}

@media (max-width:1000px){
  .x-ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-ft__text{grid-column:1/-1;grid-row:auto;padding-right:0}
  .x-ft__shot--pouch{grid-column:1;grid-row:auto}
  .x-ft__shot--sachets{grid-column:2;grid-row:auto}
  .x-ft__shot--carton{grid-column:1/-1;grid-row:auto}
  .x-proof__grid{grid-template-columns:1fr}
  .x-team__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .x-pairs{grid-template-columns:1fr}
  .x-news{grid-template-columns:1fr 1fr}
  .x-facts{grid-template-columns:1fr}
}
@media (max-width:760px){
  .x-intro__foot{grid-template-columns:1fr}
  .x-svc__row{grid-template-columns:30px minmax(0,1fr) 92px;gap:14px;align-items:start}
  .x-svc__n{padding-top:.45em}
  .x-svc__img{aspect-ratio:1}
  .x-svc__go{display:none}
  .x-svc__t>span{font-size:15.5px}
  .x-news{grid-template-columns:1fr}
}
@media (max-width:480px){
  .x-ft__grid{grid-template-columns:1fr}
  .x-ft__shot--pouch,.x-ft__shot--sachets,.x-ft__shot--carton{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .x-svc__img img,.x-team__img img,.x-ncard__img img{transition:none}
}

/* ======================================================================
   PENTAGRAM TREATMENT (owner, 2026-10-07: "อยากได้ style ของ pentagram")
   White page, near-black type at light weights, square images, hairlines; no glows, no gradients, no shadows.
   Colour lives in the logo, the photographs and the small status dots. Overrides the "Lab light" look above, site-wide.
   ====================================================================== */
:root{
  --ink:#141414; --text:#2B2B2B; --muted:#6B6B6B;
  --line:#E6E6E6; --line-2:#CFCFCF;
  --panel:#F4F4F4; --panel-2:#EFEFEF;
  --teal-ink:#141414; --forest:#141414;
  --r:0px; --r-lg:0px; --r-btn:3px;
  --tr-h:-.02em; --tr-hero:-.025em;
  --grad:linear-gradient(#141414,#141414);
  --kw-grad:linear-gradient(#141414,#141414);
}
.glow{display:none!important}
h1,h2,h3,h4,.h2{font-weight:400}
.h2{letter-spacing:-.025em}
h3{font-weight:500}
.statement{font-weight:400}
.kw,em.kw{font-style:normal;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
a{color:var(--ink);text-decoration-color:rgb(20 20 20 / .35)}
a:hover{text-decoration-color:currentColor}

/* buttons: a small dark rectangle; secondary actions are text links */
.btn{--b:#141414;min-height:48px;padding:0 22px;border-width:1px;font:500 15px/1 var(--font)}
.btn:hover{--b:#3D3D3D;color:#fff}
.btn--ghost{background:transparent;border-color:#141414;color:#141414}
.btn--ghost:hover{background:#141414;border-color:#141414;color:#fff}
.btn--sm{min-height:40px;padding:0 16px;font-size:13.5px}
.tlink{font-weight:500}
.tlink:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* labels: small, sentence case, grey — no dot */
.eyebrow{padding-left:0;font:400 14px/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
.eyebrow::before{display:none}
:lang(th) .eyebrow,:lang(th) .eyebrow *{font-family:var(--font-th);font-weight:400;font-size:15px}
.label,.mega__h{letter-spacing:.02em}

/* header: white bar, thin type */
.site-header{background:#fff}
.site-header.is-stuck{--hh:68px;background:rgb(255 255 255 / .97);box-shadow:0 1px 0 var(--line)}
.nav__link{font-weight:400;font-size:15.5px}
.mega{box-shadow:0 0 0 1px var(--line),0 24px 48px -28px rgb(0 0 0 / .18)}
.mega__promo{background:var(--panel)}
.mega__tag{border-radius:2px;background:var(--panel);color:var(--ink)}

/* chips and pills become small square tags */
.status{border-radius:2px;background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line-2);letter-spacing:.04em}
.status--available::before{background:#2D9D5B}
.status--request::before{background:#C77700}
.status--dev::before{background:#00897B}
.status--lab::before{background:#9A9A9A}
:is(.spec li,.chips li,.tags span,.fcard__tag,.arm__tag,.arm__cap,.mtile>span,.svc-switch a,.x-tag,.x-ft__spec li,.mega-line__img--pill){border-radius:2px;box-shadow:none}
.chips li,.spec li{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}

/* square corners and no shadows on every card, image and panel */
:is(.float,.nmr-card,.mtile,.card,.card__art,.card--wide .card__media,.panel__media--grid .chart,.route,.av__circle,.drives__img,.person__photo,.jumps a,.ph-evidence figure,.route--jump,.pinfo__step,.ladder,.qroute a,.qroute__icon,.org__node,.fcard__pair img,.fcard--pair .fcard__tag,.cta-panel,.vision,.mega-line__img,.x-svc__img,.x-ft__shot img,.x-arm,.x-team__img,.x-ncard__img,.x-proof__chart,.ncard,.panel,.pcard,.svc,.doc,.trial,.mcard,.addr,.legend li,.prow__media,.glance>div,.mech__art,.howto li,.limits>div,.mini,.split__chart,.split__media img,.article-hero,.ph-photo,.photo-tall,.av__main,.tile,.collage__wide,.enq,.enq__status,.pinfo){border-radius:0!important;box-shadow:none!important}
.card:hover,.jumps a:hover,.route--jump:hover,.qroute a:hover{box-shadow:none!important}
.enq :is(input[type=text],input[type=email],input[type=tel],select,textarea){border-radius:2px}
.ft-media .blob,.ft-media--pouch .blob{border-radius:0}
.cta-panel{background:var(--panel)}
.note-box{border-radius:0}

/* footer */
.site-footer{border-top:1px solid var(--line-2)}

/* ---------- home: photo carousel (captions under the picture, Pentagram-style) ---------- */
.hero--photo{margin-top:0;padding:0}
.hero--photo .hero__track{display:grid}
.hero--photo .slide{display:block;gap:0}
.slide__media{position:relative;height:clamp(340px,44vw,660px);background:var(--panel);overflow:hidden;margin:0}
.slide__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.slide__media--graphic{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:clamp(20px,4vw,60px) var(--gutter);border-bottom:1px solid var(--line)}
.slide__media--graphic img{width:auto;height:auto;max-width:min(100%,1000px);max-height:363px;object-fit:contain}
.slide__axis{font-size:13px;color:var(--muted)}
.slide__tags{position:absolute;left:var(--gutter);right:var(--gutter);bottom:18px;display:flex;justify-content:space-between;pointer-events:none}
.slide__tags span,.p-tags span{font:500 12px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;padding:7px 9px;background:rgb(255 255 255 / .94);color:var(--ink);border-radius:2px}
.slide__tags span+span,.p-tags span+span{background:#141414;color:#fff}
:lang(th) :is(.slide__tags span,.p-tags span){letter-spacing:0;text-transform:none;font-size:13px}
.slide__cap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 48px;padding-top:clamp(22px,2.6vw,36px)}
.hero--photo .slide__text{gap:12px;max-width:820px}
.hero--photo .slide__eyebrow{gap:12px;font:400 14px/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:lang(th) .hero--photo .slide__eyebrow{font-family:var(--font-th);font-weight:400;font-size:15px}
.hero--photo .slide__num{color:var(--ink)}
.hero--photo .slide__num::after{display:none}
.hero--photo .slide__title{font-size:clamp(30px,3.5vw,52px);line-height:1.08;font-weight:400;letter-spacing:-.025em}
:lang(th) .hero--photo .slide__title{font-size:clamp(28px,3.1vw,46px);line-height:1.32;letter-spacing:0}
.hero--photo .slide__lead{font-size:17px;color:var(--text);max-width:640px}
.hero--photo .slide__cta{padding-top:0;justify-content:flex-end;flex-wrap:nowrap}
.hero__foot{display:grid;gap:10px;padding-top:clamp(18px,2vw,28px);padding-bottom:clamp(28px,3vw,44px)}
.hero--photo .hero__controls{margin-top:0;padding-top:14px;border-top:1px solid var(--line)}
.hero--photo .hero__count{font-size:15px;height:auto;overflow:visible}
.hero--photo .hero__num{font-weight:500}
.hero--photo .hero__kicker{padding-left:0;margin:0;font-size:13.5px;font-weight:400;color:var(--muted);max-width:none}
.hero--photo .hero__kicker::before{display:none}
.hero--photo .seg__bar{height:2px;border-radius:0}
.hero--photo .seg{font-size:13px}
.hero--photo .hbtn{border-radius:2px}
.js .hero--photo .slide .slide__media{opacity:0}
.js .hero--photo .slide.is-active .slide__media{opacity:1;transition:opacity .9s var(--eo)}
.js .hero--photo .slide.is-leaving .slide__media{opacity:1}
.js .hero--photo .slide.is-leaving .slide__cap{opacity:0;transition:opacity .3s linear}

/* ---------- home: Pentagram-style sections ---------- */
.p-label{font:400 14px/1.4 var(--font);color:var(--muted);margin:0}
:lang(th) .p-label{font-family:var(--font-th);font-size:15px}
.p-wrap{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.p-sec{padding-block:clamp(64px,7vw,110px)}
.p-sec--line{border-top:1px solid var(--line)}
.p-head{display:grid;gap:14px;max-width:880px;margin-bottom:clamp(30px,3.4vw,48px)}
.p-head--row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.p-head--row>div{display:grid;gap:14px;max-width:880px}
.p-h2{font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.025em;font-weight:400;color:var(--ink)}
:lang(th) .p-h2{line-height:1.3;letter-spacing:0}
.p-intro{font-size:19px;line-height:1.5;color:var(--text);max-width:700px}
.p-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--ink);text-decoration:none}
.p-more .icon{width:18px;height:18px;transition:transform .3s var(--eo)}
.p-more:hover{text-decoration:underline;text-underline-offset:4px}
.p-more:hover .icon{transform:translateX(4px)}

/* dark feature band */
.p-dark{background:#141414;color:#fff;padding-block:clamp(64px,7vw,110px)}
.p-dark .p-label{color:#A8A8A8}
.p-dark__head{margin-top:18px;font-size:clamp(32px,3.9vw,56px);line-height:1.06;letter-spacing:-.025em;font-weight:400;max-width:18em;text-wrap:balance}
.p-dark .p-dark__head{color:#fff}
:lang(th) .p-dark__head{font-family:var(--font-th-head);font-weight:500;line-height:1.32;letter-spacing:0;font-size:clamp(28px,3.3vw,48px)}
.p-dark__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,96px);margin-top:clamp(28px,3vw,44px);align-items:start}
.p-dark__cols p{color:#D6D6D6;font-size:17px;line-height:1.6;max-width:560px}
.p-dark__cols .p-dark__quote{color:#fff;font-size:clamp(22px,2.2vw,32px);line-height:1.22;letter-spacing:-.01em}
:lang(th) .p-dark__cols .p-dark__quote{font-family:var(--font-th-head);font-weight:500;line-height:1.4;letter-spacing:0}
.p-inset{margin-top:clamp(44px,5vw,80px);background:#000;padding:clamp(18px,2vw,28px);display:grid;gap:18px}
.p-inset__label{font:400 14px/1.4 var(--font);color:#A8A8A8}
:lang(th) .p-inset__label{font-family:var(--font-th);font-size:15px;font-weight:400}
.p-inset__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.p-card{display:grid;gap:6px;color:#fff;text-decoration:none;align-content:start}
.p-card__img{display:block;aspect-ratio:3/4;overflow:hidden;background:#222;margin-bottom:10px}
.p-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--eq),opacity .3s}
.p-card__img--graphic{background:#fff;display:flex;align-items:center}
.p-card__img--graphic img{height:auto;object-fit:contain;padding:10px}
.p-card b{font-weight:500;font-size:15px;line-height:1.35}
.p-card>span:last-child{font-size:14px;line-height:1.45;color:#A8A8A8}
.p-card:hover img{transform:scale(1.03)}
.p-card:hover b{text-decoration:underline;text-underline-offset:3px}
.p-inset .p-more{color:#fff;justify-self:start}

/* work grid */
.p-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) 12px}
.p-tile{min-width:0}
.p-tile--wide{grid-column:span 2}
.p-tile figure,.p-tile>a{margin:0;display:grid;gap:4px;color:inherit;text-decoration:none}
.p-tile__img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--panel);margin-bottom:10px}
.p-tile__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .7s var(--eq)}
.p-tile__img--fit{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.p-tile__img--fit img{object-fit:contain;padding:12px}
.p-tags{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;pointer-events:none}
.p-tile figcaption,.p-tile>a{font-size:15px;line-height:1.45}
.p-tile b{display:block;font-weight:500;color:var(--ink)}
.p-tile figcaption>span{color:var(--muted)}
.p-tile__meta{font-size:13.5px;color:var(--muted)}
.p-tile>a:hover img{transform:scale(1.03)}
.p-tile>a:hover b{text-decoration:underline;text-underline-offset:3px}
.p-note{margin-top:clamp(28px,3vw,40px);font-size:14px;color:var(--muted)}

/* FreshTrap product */
.p-product{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,3.4fr) minmax(0,3.6fr);grid-template-rows:auto auto;gap:28px 12px;align-items:start}
.p-product__text{grid-row:1/span 2;display:grid;gap:18px;align-content:start;padding-right:clamp(0px,2vw,36px)}
.p-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2D9D5B;margin-right:7px;vertical-align:1px}
.p-spec{margin:0;display:grid;border-top:1px solid var(--line)}
.p-spec>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.p-spec dt{color:var(--muted)}
.p-spec dd{margin:0;color:var(--ink)}
.p-small{font-size:14px;color:var(--muted)}
.p-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.p-shot{margin:0;display:grid;gap:4px;font-size:15px;line-height:1.45}
.p-shot b{font-weight:500;color:var(--ink)}
.p-shot figcaption>span{color:var(--muted);margin-left:8px}
.p-shot--pouch{grid-column:2;grid-row:1/span 2}
.p-shot--pouch .p-tile__img{aspect-ratio:3/4}
.p-shot--sachets{grid-column:3;grid-row:1}
.p-shot--sachets .p-tile__img{aspect-ratio:4/3}
.p-shot--carton{grid-column:3;grid-row:2}
.p-shot--carton .p-tile__img{aspect-ratio:2/1}
.p-rows{list-style:none;margin:clamp(48px,5vw,80px) 0 18px;padding:0;border-top:1px solid var(--ink)}
.p-rows li{display:grid;grid-template-columns:180px minmax(0,1.1fr) minmax(0,2fr);gap:12px 28px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.p-rows__k{color:var(--muted);font-size:14px}
.p-rows b{font-weight:500;color:var(--ink)}
.p-rows li>span:last-child{color:var(--text)}

/* quality */
.p-quality{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.p-quality>div{display:grid;gap:16px}
.p-quality__chart{margin:0;display:grid;gap:6px;justify-items:center;padding:clamp(16px,2vw,28px);border:1px solid var(--line)}
.p-quality__chart figcaption{font-size:13px;color:var(--muted)}

/* team, facts */
.p-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.p-team a{display:grid;gap:2px;color:inherit;text-decoration:none;font-size:15px;line-height:1.45}
.p-team .p-tile__img{aspect-ratio:3/4}
.p-team b{font-weight:500;color:var(--ink)}
.p-team a>span:last-child{color:var(--muted)}
.p-team a:hover img{transform:scale(1.03)}
.p-team a:hover b{text-decoration:underline;text-underline-offset:3px}
.p-facts{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px;border-top:1px solid var(--ink)}
.p-facts li{display:grid;gap:8px;align-content:start;padding-top:16px;padding-right:24px;font-size:15px;line-height:1.5}
.p-facts b{font-size:clamp(20px,1.8vw,26px);font-weight:400;letter-spacing:-.015em;color:var(--ink)}
:lang(th) .p-facts b{font-family:var(--font-th-head);font-weight:500;letter-spacing:0}
.p-facts li>span{color:var(--text)}

/* contact */
.p-contact__head{color:var(--ink);margin-bottom:clamp(30px,3vw,44px)}
.p-routes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid var(--ink)}
.p-routes a{display:grid;gap:8px;align-content:start;padding:18px 24px 18px 0;height:100%;color:inherit;text-decoration:none;font-size:15.5px;line-height:1.5}
.p-routes b{font-size:clamp(19px,1.6vw,23px);font-weight:400;color:var(--ink)}
:lang(th) .p-routes b{font-family:var(--font-th-head);font-weight:500}
.p-routes a>span{color:var(--text)}
.p-routes .p-routes__go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:500;color:var(--ink)}
.p-routes__go .icon{width:18px;height:18px;transition:transform .3s var(--eo)}
.p-routes a:hover .p-routes__go{text-decoration:underline;text-underline-offset:4px}
.p-routes a:hover .icon{transform:translateX(4px)}
.p-contact__line{margin-top:28px;font-size:17px}

/* quick routes under the carousel: a quiet three-column strip */
.qroutes{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qroute a{background:transparent;border:0}

@media (max-width:1000px){
  .p-inset__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-product{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-product__text{grid-column:1/-1;grid-row:auto;padding-right:0}
  .p-shot--pouch{grid-column:1;grid-row:auto}
  .p-shot--sachets{grid-column:2;grid-row:auto}
  .p-shot--carton{grid-column:1/-1;grid-row:auto}
  .p-quality{grid-template-columns:1fr}
  .p-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-rows li{grid-template-columns:140px minmax(0,1fr)}
  .p-rows li>span:last-child{grid-column:2}
}
@media (max-width:900px){
  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-dark__cols{grid-template-columns:1fr}
  .p-facts,.p-routes{grid-template-columns:1fr}
  .slide__cap{grid-template-columns:1fr}
  .hero--photo .slide__cta{justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:760px){
  .slide__media{height:auto;aspect-ratio:4/3}
  .slide__media--graphic{aspect-ratio:auto;padding-block:36px}
  .p-grid,.p-grid--3{grid-template-columns:1fr}
  .p-tile--wide{grid-column:auto}
  .p-rows li{grid-template-columns:1fr;gap:4px}
  .p-rows li>span:last-child{grid-column:auto}
}
@media (max-width:480px){
  .p-inset__grid{grid-template-columns:1fr 1fr}
  .p-product{grid-template-columns:1fr}
  .p-shot--pouch,.p-shot--sachets,.p-shot--carton{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .p-card__img img,.p-tile__img img{transition:none}
}
.fcard__bg{filter:grayscale(1) brightness(.62)}
@media (max-width:600px){
  .hero--photo .slide__lead{display:none}
  .hero--photo .slide__cap{padding-top:18px;gap:14px}
}
@media (max-width:480px){
  .p-spec>div{grid-template-columns:1fr;gap:2px}
}

/* ---------- inner pages, Pentagram treatment (owner, 2026-10-08: "ปรับหน้าอื่นให้เข้าชุดกัน") ----------
   page-top pictures become plain rectangles with square labels; rings, orbs, blobs and tilted overlays go;
   the drawn art turns grey and black with one green accent; no mint panels or green gradient lines anywhere. */
:root{--brand-a:#141414;--brand-b:#141414}
.kw,.statement em{color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor}

/* page-top pictures */
.page-hero__media :is(.ph-ring,.av__ring,.av__circle,.slide4-orb),.ft-media .ft-float{display:none!important}
.ph-circle__img{inset:0;border-radius:0!important}
.av__main{width:100%;border-radius:0!important}
.ft-media .blob,.ft-media--round .blob,.ft-media--pouch .blob{inset:0;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0!important;background:var(--panel)}
.ph-art{background:var(--panel)}
.page-hero__media .float{position:absolute;left:14px;right:auto;top:auto;bottom:14px;max-width:calc(100% - 28px);padding:9px 11px;background:#fff;border:0;border-radius:0!important;box-shadow:none!important;transform:none;translate:none;rotate:none;font-size:13px;opacity:1}
.page-hero__media :is(.float--reg,.float--est,.float--card){top:14px!important;bottom:auto!important;right:auto!important;left:14px!important}
.art-circle{border-radius:0!important}
.ph-evidence .float{position:static;margin:10px 0 0;justify-self:start}
.page-hero::after{display:none}

/* flat panels instead of mint radial fills */
:is(.pouch-panel,.panel-orb,.panel-orb--warm,.card--wide .card__media,.prow__media,.card__art--warm,.split__media--pack img,.person__photo,.pillar__icon,.glance__icon,.card--dashed,.ladder,.pinfo,.mega__promo){background:var(--panel)!important}
.panel__media--grid{background:#fff;background-image:linear-gradient(rgb(0 0 0 / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(0 0 0 / .05) 1px,transparent 1px)}
.vision blockquote p+p{color:#CFCFCF}
.seg[aria-current="true"] .seg__bar{background:var(--line-2)}
.s1-ic{color:var(--ink)}

/* drawn art: mint fills → greys, green lines → black, brand accents → one green; amber / brown / red keep their meaning */
svg :is([fill="#EEF6F0" i],[fill="#F4F8F5" i],[fill="#EEF6F1" i],[fill="#E4F3F1" i],[fill="#DDEFE4" i],[fill="#FFF6E6" i],[fill="#F4FBF6" i]){fill:#F1F1F1}
svg :is([fill="#B7E4C7" i],[fill="#BFD3C7" i],[fill="#C6E6D3" i],[fill="#BFE6CF" i]){fill:#DCDCDC}
svg :is([fill="#1B4332" i],[fill="#2D6A4F" i],[fill="#0B1A14" i]){fill:#141414}
svg :is([fill="#40916C" i],[fill="#45544D" i],[fill="#5A6661" i]){fill:#555}
svg :is([fill="#9FB7AA" i]){fill:#A8A8A8}
svg :is([fill="#7CC242" i],[fill="#00AD9D" i],[fill="#00796E" i],[fill="#00897B" i]){fill:#2D9D5B}
svg :is([stroke="#2D6A4F" i],[stroke="#1B4332" i]){stroke:#141414}
svg :is([stroke="#9FB7AA" i]){stroke:#A8A8A8}
svg :is([stroke="#DCE5DF" i],[stroke="#C9D6CE" i],[stroke="#BFE6CF" i],[stroke="#B7E4C7" i]){stroke:#D9D9D9}
svg :is([stroke="#7CC242" i],[stroke="#00AD9D" i],[stroke="#00897B" i]){stroke:#2D9D5B}
:is([stop-color="#00897B" i],[stop-color="#4E9A2A" i],[stop-color="#00AD9D" i],[stop-color="#7CC242" i],[stop-color="#5DAA3A" i]){stop-color:#2D9D5B}
:is([stop-color="#1B4332" i],[stop-color="#0E5B52" i]){stop-color:#1A1A1A}
:is([stop-color="#F6FBF7" i]){stop-color:#F6F6F6}
:is([stop-color="#E3F2E8" i]){stop-color:#EDEDED}
:is([stop-color="#CFE9DA" i]){stop-color:#E0E0E0}
/* contact: the call / e-mail card sits under the picture at every width; the drawn art loses its circle */
.ph-circle:has(.float--card){aspect-ratio:auto;display:grid;gap:12px}
.ph-circle:has(.float--card)::before{display:none}
.ph-circle:has(.float--card) .ph-circle__img{position:relative;inset:auto;margin:0;width:100%;aspect-ratio:1}
.page-hero__media .float--card{position:relative!important;top:auto!important;left:auto!important;margin:0;max-width:none;padding:14px 16px;border:1px solid var(--line)!important}
.art-circle [fill^="url(#cs-"][fill$="-bg)"]{fill:var(--panel)}
/* code-drawn illustration slide (graphic-route): the grey of the drawing fills the frame; a small "Illustration" label */
.slide__media--art{background:#EFEFEF}
.slide__note{position:absolute;right:var(--gutter);top:16px;font:400 12.5px/1 var(--font);color:#6B6B6B;letter-spacing:.02em}
:lang(th) .slide__note{font-family:var(--font-th);font-size:13.5px}
/* links on the dark band keep white text on hover (the old site-wide a:hover now resolves to near-black) */
.p-dark a:hover,.p-card:hover,.p-card:hover b{color:#fff}

/* ---------- brand colour blocks (owner, 2026-10-08: "เปลี่ยนสี footer … และแถบตรงกลาง เป็นสีที่เข้ากับสีโลโก้") ----------
   the logo's own colours: deep teal-green ground, the teal → lime gradient as a thin line; white type, the on-dark logo */
:root{--deep:#1B4332;--deep-2:#14432A;--on-deep:rgb(255 255 255 / .76);--line-deep:rgb(255 255 255 / .18);--logo-grad:linear-gradient(90deg,#00AD9D,#1CB383 50%,#7CC242)}   /* the owner's brand chart: 7-min deck title bg, deck v3 title bg, the logo gradient */
.site-footer{background:var(--deep);color:var(--on-deep);border-top:0}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--logo-grad)}
.site-footer :is(.footer__tag,.footer__col a,.footer__bottom .tlink,.lang span[aria-current]){color:#fff}
.site-footer :is(.footer__col h2,.footer__bottom,.footer__bottom a,.lang a,.lang .sep){color:var(--on-deep)}
.site-footer .footer__col a:hover,.site-footer .footer__bottom a:hover,.site-footer .lang a:hover{color:#fff;text-decoration:underline}
.site-footer .footer__bottom{border-top-color:var(--line-deep)}
.site-footer .lang span[aria-current]{box-shadow:inset 0 -2px 0 #78C040}
.site-footer :focus-visible{outline-color:#B7E4C7}
/* the home page's middle band */
.p-dark{background:var(--deep)}
.p-dark .p-label,.p-inset__label,.p-card>span:last-child{color:var(--on-deep)}
.p-dark__cols p{color:rgb(255 255 255 / .84)}
.p-inset{background:var(--deep-2)}
.p-card__img{background:#2D6A4F}

/* ============ CONTACT MAP (tools/make_map.py: OSM tiles, grey, centred on the site — shown 1:1, the pin at the middle,
   its label under it so the landmark above the factory, Yooyen Witthaya School, stays readable) ============ */
.map{margin:clamp(28px,3.5vw,40px) 0 0}
.map__view{position:relative;display:block;height:clamp(300px,34vw,440px);overflow:hidden;background:#ececec;border:1px solid var(--line)}
.map__view img{display:block;width:100%;height:100%;max-width:none;object-fit:none;object-position:50% 50%}
.map__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,16px);padding:7px 12px;background:#141414;color:#fff;font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;pointer-events:none}
.map__pin::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;background:#141414;transform:translateX(-50%) rotate(45deg)}
.map__pin::after{content:"";position:absolute;left:50%;top:-16px;width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#141414;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #141414}
.map figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:12px;font-size:15px;color:var(--ink)}
.map figcaption a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.map figcaption small{margin-left:auto;font-size:13px;color:var(--muted)}
.map figcaption small a{color:var(--muted);min-height:0}
@media (max-width:600px){.map figcaption small{margin-left:0;flex-basis:100%}}

/* ============ ROUNDED CORNERS SITE-WIDE (owner 08/10: home pictures "ขอบมน นิดนึง", then "ทำขอบมนทั้งเว็บเลยครับ") ============
   One small radius for every picture, card, panel, button and field (8px, the radius he chose for the ERP's buttons);
   4px for the little labels and chips. Undoes the square corners of the Pentagram block; colours and type stay. */
:root{--r:8px;--r-lg:8px;--r-btn:8px;--r-sm:4px}
:root :is(.float,.nmr-card,.mtile,.card,.card__art,.card--wide .card__media,.panel__media--grid .chart,.route,.av__circle,.drives__img,.person__photo,.jumps a,.ph-evidence figure,.route--jump,.pinfo__step,.ladder,.qroute a,.qroute__icon,.org__node,.fcard__pair img,.cta-panel,.vision,.mega-line__img,.x-svc__img,.x-ft__shot img,.x-arm,.x-team__img,.x-ncard__img,.x-proof__chart,.ncard,.panel,.pcard,.svc,.doc,.trial,.mcard,.addr,.legend li,.prow__media,.glance>div,.mech__art,.howto li,.limits>div,.mini,.split__chart,.split__media img,.article-hero,.ph-photo,.photo-tall,.av__main,.tile,.collage__wide,.enq,.enq__status,.pinfo){border-radius:var(--r)!important}
:root :is(.p-tile__img,.p-card__img,.fcard,.p-inset,.map__view,.ph-circle__img,.ft-media .blob,.ft-media--round .blob,.ft-media--pouch .blob,.art-circle,.split__media .panel .panel__media img,.ph-art){border-radius:var(--r)!important}
:root :is(.spec li,.chips li,.tags span,.fcard__tag,.fcard--pair .fcard__tag,.arm__tag,.arm__cap,.mtile>span,.svc-switch a,.x-tag,.x-ft__spec li,.mega-line__img--pill,.mega__tag,.status,.slide__tags span,.p-tags span,.page-hero__media .float,.map__pin,.hero--photo .hbtn){border-radius:var(--r-sm)!important}
:root .enq :is(input[type=text],input[type=email],input[type=tel],select,textarea){border-radius:var(--r)}
.note-box{border-radius:0 var(--r) var(--r) 0}
/* the home slider runs edge to edge, no side gaps, square corners (owner 08/10: "slider ควรจะชิดซ้ายสุดไปขวาสุดเลยไม่มีช่องไฟ") */
main:has(.hero--photo) .slide__media{width:100%;margin:0;border-radius:0}

/* ============ CHAT BUTTONS (owner 08/10: WhatsApp "แบบ www.rionaflower.com", then LINE @chonchemical): round buttons bottom
   right — LINE nearest the corner on Thai pages, WhatsApp on English ones — and a greeting bubble once per visit; our own markup and a plain wa.me link — no widget script, nothing loads from WhatsApp until a click ============ */
.wa{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:58;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.wa>*{pointer-events:auto}
.wa__btn{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 6px 18px rgb(0 0 0 / .22);transition:transform .2s var(--eq)}
.wa__btn:hover{transform:scale(1.06)}
.wa__btn--line{background:#06C755}
.wa__btn:focus-visible,.wa__chip:focus-visible,.wa__close:focus-visible{outline:3px solid #141414;outline-offset:3px}
.wa__btn svg{width:31px;height:31px;fill:currentColor}
.wa__bubble{position:relative;width:min(330px,calc(100vw - 32px));background:#fff;border-radius:var(--r);box-shadow:0 10px 30px rgb(0 0 0 / .18);padding:14px 44px 14px 14px}
.wa__bubble::after{content:"";position:absolute;right:22px;bottom:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.wa__msg{display:flex;gap:12px;align-items:flex-start;color:var(--text);text-decoration:none;font-size:14px;line-height:1.5}
.wa__msg img{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line)}
.wa__msg b{display:block;color:var(--ink);font-weight:600;font-size:15px}
.wa__msg small{display:block;color:var(--muted);font-size:12.5px;margin-bottom:4px}
.wa__go{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0 56px}
.wa__chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.wa__chip:hover{border-color:var(--ink)}
.wa__chip svg{width:18px;height:18px;flex:none}
.wa__chip--line svg{fill:#06C755}
.wa__chip--wa svg{fill:#25D366}
.wa__close{position:absolute;top:4px;right:4px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:50%}
.wa__close:hover{color:var(--ink);background:var(--panel)}
.wa__close .icon{width:16px;height:16px}
.wa__bubble.is-in{animation:wa-in .35s var(--eo) both}
@keyframes wa-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wa__bubble.is-in{animation:none}.wa__btn{transition:none}}
.nav-open .wa{display:none}
.review .wa{bottom:76px}
@media print{.wa{display:none}}

/* ============ FOCUS CARDS, LIGHT (owner 08/10: "ไม่เอาสีดำ ไม่ดีเลย"): the picture on top as a rounded square, dark text under it,
   no dark overlay; the row sits in the content column; the drawn tiles (hexagons, durian) turn light by CSS ============ */
.focus{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto;gap:clamp(18px,2vw,28px)}
.fcard{display:flex;flex-direction:column;aspect-ratio:auto!important;overflow:visible;color:var(--ink);background:none;isolation:auto;border-radius:0!important}
.fcard::before{display:none}
.fcard>img,.fcard>.fcard__bg{position:relative;inset:auto;z-index:auto;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);background:var(--panel);transition:none;transform:none!important;filter:none}
.fcard__body{position:static;transform:none!important;padding:16px 0 0;gap:6px}
.fcard h3,.fcard h3 a{color:var(--ink)}
.fcard:hover h3 a{text-decoration:underline;text-underline-offset:4px}
.fcard p{color:var(--text)}
.fcard__more{color:var(--ink);opacity:1}
.fcard:focus-within{outline:3px solid var(--ink);outline-offset:4px}
.fcard__tag{top:12px;left:12px}
.fcard>svg.fcard__bg rect{fill:var(--panel)}
.fcard>svg.fcard__bg :is(g,path,ellipse,polygon){stroke:#141414;stroke-opacity:.45}
.fcard>svg.fcard__bg polygon[stroke]{stroke:#2D9D5B;stroke-opacity:1}
.fcard>svg.fcard__bg circle{fill:#141414}
.fcard>svg.fcard__bg circle:first-of-type{fill:#2D9D5B}
.fcard--pair{background:var(--panel);border-radius:var(--r)!important}
.fcard--pair .fcard__body{padding:16px}
/* Prompt 500 reads heavier than the old Noto Sans Thai 500: the Thai page-top lead paragraph goes to 400 */
:lang(th) .page-hero .lede{font-weight:400}

/* ============ HOME: the owner's slide 1 (his emblem, his line "Advancing chemistry for a sustainable future") and his three
   strengths under the slider (08/10) ============ */
/* the owner's slide colours, sampled from his WordPress slider (08/10 "สีของ slider ด้วย"): white, a lilac-pink haze top left and
   a mint haze on the left, both gone before the middle */
.slide__media--emblem{background:radial-gradient(55% 75% at 6% 0%,#f1e2f6 0%,rgb(241 226 246 / .6) 35%,rgb(241 226 246 / 0) 72%),radial-gradient(42% 62% at 0% 58%,#e2f4f0 0%,rgb(226 244 240 / .55) 38%,rgb(226 244 240 / 0) 74%),#fff;border:1px solid var(--line)}
.slide__media--emblem img{max-height:min(331px,80%)}
.p-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.p-feat{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--ink)}
.p-feat__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r);background:var(--panel);color:#2D9D5B}
.p-feat__icon .icon{width:26px;height:26px}
.p-feat h3{font-size:clamp(21px,1.8vw,26px);font-weight:500;color:var(--ink);line-height:1.2}
.p-feat p{font-size:16px;line-height:1.6;color:var(--text);margin:0}
@media (max-width:860px){.p-feats{grid-template-columns:1fr}}
/* the owner's slide 1 as on his WordPress slider: his line on the left and his emblem on the right, both INSIDE the picture box,
   scaling together with the box (container units), never restacked (08/10 "ให้ทั้ง ข้อความและ ก้อนนี้ไปอยู่ใน slider ด้วย และย่อตามสัดส่วน") */
.slide__media--emblem{container-type:inline-size;padding:0!important;display:block;height:auto!important;aspect-ratio:9/4!important;border:0!important}   /* one shape at every width: the slide scales, it never restacks */
.emblem-split{box-sizing:border-box;width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;column-gap:4cqw;padding:0 max(var(--gutter),calc((100cqw - var(--container)) / 2))}
.hero--photo .emblem-split .slide__title,.hero--photo .emblem-split .slide__title *{font-weight:600}
.hero--photo .emblem-split .slide__title{grid-column:auto;margin:0;font-size:clamp(18px,5.6cqw,66px);line-height:1.06;letter-spacing:-.025em;color:var(--ink);max-width:none}
:lang(th) .hero--photo .emblem-split .slide__title{font-size:clamp(18px,5.4cqw,64px);line-height:1.28;letter-spacing:0}
.emblem-split img{justify-self:center;width:min(100%,410px);height:auto;max-width:100%;max-height:none!important;object-fit:contain}

/* ============ COMMITTEE FIXES (09/10: buyer, Thai phone reader, editor — research/benchmark/committee-live-2026-10-09.md) ============ */
/* About · vision: light like every other card (owner 08/10 "ไม่เอาสีดำ"); no hexagons behind the text */
.vision{background:var(--panel);color:var(--ink)}
.vision h3{color:var(--muted)}
.vision blockquote{color:var(--ink)}
.vision blockquote p+p{color:var(--text)}
.vision cite{color:var(--muted)}
.vision svg{display:none}
/* contact: the chosen topic card shows it is chosen */
.routes .route--jump.is-on{box-shadow:inset 0 0 0 2px var(--ink)!important}
.route--jump.is-on .tlink{font-weight:600}
/* contact hero: the call / e-mail / LINE card stands on its own, near the top (no drawing behind it) */
.ph-circle:has(.float--card){aspect-ratio:auto!important;display:flex;flex-direction:column;justify-content:center;align-self:center}
.ph-circle:has(.float--card)::before{display:none}
.ph-circle:has(.float--card) .ph-circle__img,.ph-circle:has(.float--card)>.ph-ring{display:none!important}
.page-hero__media.ph-circle .float--card{position:static;display:flex;max-width:none;width:100%;margin:0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r)!important;font-size:15px}
/* hero photo panel (About, Solutions, Technology): the photo fills its square frame; it was 540 × 675 in a 540 × 540 frame,
   so the frame cut its bottom off square */
.page-hero__media .av__main{height:100%;aspect-ratio:auto}
/* team portraits: no dark bar under the photo (the home team block has none) */
.person__photo::after{display:none}
/* FAQ jump list: the bold title on its own line (the Thai no-break wrapper had put both on one line) */
.jumps a>.fx{display:grid;gap:2px}
.jumps a>.fx>span{font-size:14px;color:var(--muted);line-height:1.45;text-wrap:balance}
/* the GC-MS mark fits its panel */
.gc-mark{font-size:clamp(34px,3.6vw,56px)}
/* home slider: a little lower on laptops (owner 09/10 "ลดลงนิดหน่อยได้"); slide 1 keeps its layout and scales with the box */
@media (min-width:761px){
  .slide__media{height:clamp(320px,38vw,580px)}
  .slide__media--emblem{aspect-ratio:21/8!important;max-height:580px}
  .emblem-split img{width:min(100%,410px,31cqw)}
}
/* phone: slide 1 shows its lead (it has no title under the picture), so no empty band under its button */
@media (max-width:600px){
  .hero--photo #slide-1 .slide__lead{display:block;font-size:16px}
}
/* phone and tablet: the other language one tap away in the header */
@media (max-width:1239px){
  .site-header__tools .lang{display:flex}
  .site-header__tools .lang .sep,.site-header__tools .lang span[aria-current]{display:none}
}
/* phone menu: call and LINE under the button */
.nav__contact{display:flex;flex-wrap:wrap;gap:4px 20px;width:100%;margin:0;font-size:15px}
.nav__contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none}
.nav__contact .icon{width:18px;height:18px}
/* phone: the floating chat buttons no longer cover the last footer links */
@media (max-width:760px){
  .site-footer{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
/* phone: the home band's cards in one column (picture left, text right), text at 16 px */
@media (max-width:600px){
  .p-inset__grid{grid-template-columns:1fr}
  .p-card{grid-template-columns:104px minmax(0,1fr);column-gap:14px;align-items:start}
  .p-card__img{grid-row:1/span 2;margin:0}
  .p-card b{font-size:17px}
  .p-card>span:last-child{font-size:16px;line-height:1.55}
}
/* crop cards: the durian card (a drawing, no photo pair) is built like the photo cards beside it — grey card, the picture
   inset in a white frame of the same height, the tag under it — so its tag no longer covers the drawing and the titles line up */
.focus .fcard#durian{background:var(--panel);border-radius:var(--r)!important}
.focus .fcard#durian>.fcard__bg{width:calc(100% - 28px);margin:14px 14px 0;aspect-ratio:4/3;background:#fff}
.focus .fcard#durian .fcard__tag{position:static;align-self:flex-start;margin:14px 14px 0;border-radius:12px;line-height:1.35}
.focus .fcard#durian .fcard__body{padding:16px}
.focus .fcard#durian>.fcard__bg>:not(rect){transform:translate(0,30px) scale(.8);transform-origin:150px 170px}   /* the whole fruit, stem included, inside the 4:3 frame */