:root{--bg:#F6F5F0;--ink:#121212;--muted:#4a4a4a;--lime:#C6F432;--card:#fff;--line:#121212;--r:26px;--sh:5px 5px 0 var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0 0 .45em;color:var(--ink)}
h1{font-size:clamp(2.8rem,6.6vw,5.6rem)}h2{font-size:clamp(2rem,4.4vw,3.6rem)}h3{font-size:1.35rem;letter-spacing:-.02em;line-height:1.15}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}.sec{padding:90px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;margin-bottom:20px}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.lead{font-size:1.18rem;color:var(--muted);max-width:620px}
.u{background:var(--lime);padding:0 .12em;border-radius:.18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* stickers (replaces old script notes) */
.stk{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:-.01em;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:8px 16px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg);margin:0 0 14px;transition:transform .25s}
.stk:hover{transform:rotate(2deg) scale(1.04)}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:#F6F5F0e6;backdrop-filter:blur(12px);border-bottom:2px solid transparent;transition:border-color .2s}.hdr.scrolled{border-bottom-color:var(--ink)}
.hdr-in{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;color:var(--ink)}.b1{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.4rem;letter-spacing:-.02em}.b2{font-size:.6rem;font-weight:700;letter-spacing:.4em;margin-top:4px;background:var(--lime);border-radius:99px;padding:2px 6px;text-align:center}.brand.light{color:var(--bg)}.brand.light .b2{color:var(--ink)}
.nav{display:flex;gap:6px;align-items:center;margin-left:auto}.nav>a,.ddb{font:600 15px 'DM Sans';text-decoration:none;color:var(--ink);background:none;border:2px solid transparent;border-radius:999px;cursor:pointer;padding:7px 14px;transition:.2s}
.nav>a:hover,.ddb:hover{border-color:var(--ink)}.nav>a.cur,.dd.cur .ddb{background:var(--ink);color:var(--bg)}
.dd{position:relative}.ddm{display:none;position:absolute;top:100%;left:0;background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:8px;min-width:250px}.dd:hover .ddm,.dd.show .ddm{display:block}
.ddm a{display:block;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;font-size:15px}.ddm a:hover{background:var(--lime)}
.pill,.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:2px solid var(--ink);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;font-family:inherit}
.pill svg,.btn svg{width:18px;height:18px;transition:transform .2s}.pill:hover,.btn:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--ink)}.pill:hover svg,.btn:hover svg{transform:translateX(3px) rotate(-12deg)}
.btn{padding:16px 28px;font-size:16px}.btn.ghost{background:var(--card);color:var(--ink)}.btn.ghost:hover{box-shadow:4px 4px 0 var(--ink)}
.pill.light{background:var(--lime);color:var(--ink);border-color:var(--ink)}.pill.light:hover{box-shadow:4px 4px 0 var(--ink)}
.burger{display:none;width:46px;height:46px;border:2px solid var(--ink);border-radius:50%;background:var(--card);cursor:pointer;flex-direction:column;justify-content:center;gap:4px;padding:11px}.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
/* hero */
.hero{padding:50px 0 50px}.hero-g{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-img{position:relative;padding:14px;background:var(--lime);border:2px solid var(--ink);border-radius:34px;box-shadow:8px 8px 0 var(--ink);transform:rotate(1.2deg);transition:transform .4s}.hero-img:hover{transform:rotate(0)}
.hero-img img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:22px;border:2px solid var(--ink)}
.hero-img:after{content:"✦";position:absolute;right:-18px;top:-22px;width:64px;height:64px;display:grid;place-items:center;font-size:28px;background:var(--lime);border:2px solid var(--ink);border-radius:50%;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.note-on{position:absolute;left:-16px;bottom:26px;margin:0;background:var(--ink);color:#fff;font-size:1.05rem}
.hero.sub .hero-img img{aspect-ratio:4/3}
/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:var(--bg);border-block:2px solid var(--ink);padding:14px 0;transform:rotate(-1deg);margin:10px -10px}
.mq-in{display:flex;gap:28px;width:max-content;animation:mq 38s linear infinite;font-family:'Bricolage Grotesque';font-weight:700;font-size:1.3rem;white-space:nowrap;align-items:center}.mq-in b{color:var(--lime)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-in,.hero-img:after{animation:none}}
/* bento services */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px}.arrow-note{margin:0;background:var(--lime)}
.scards{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.scard{grid-column:span 2;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);overflow:hidden;background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.scard:nth-child(1),.scard:nth-child(4){grid-column:span 4;flex-direction:row}.scard:nth-child(1) .scard-img,.scard:nth-child(4) .scard-img{flex:0 0 48%;aspect-ratio:auto}
.scard:nth-child(1){background:var(--lime)}.scard:nth-child(2){background:var(--lime)}.scard:nth-child(3){background:var(--card)}.scard:nth-child(4){background:var(--card)}
.scard:hover{transform:translate(-4px,-4px) rotate(-.4deg);box-shadow:9px 9px 0 var(--ink)}
.scard-img{aspect-ratio:16/10;overflow:hidden;margin:12px 12px 0;border-radius:18px;border:2px solid var(--ink)}.scard:nth-child(1) .scard-img,.scard:nth-child(4) .scard-img{margin:12px 0 12px 12px}
.scard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.scard:hover .scard-img img{transform:scale(1.06)}
.scard-body{position:relative;padding:22px 22px 76px;flex:1}.scard-body h3{font-size:1.55rem}.scard-body p{font-size:15px;line-height:1.55;margin:0;color:#262626}
.circ{position:absolute;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:.3s}.circ svg{width:20px;height:20px}.scard:hover .circ{background:var(--ink);transform:rotate(-45deg)}
/* who */
.who{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1240px;margin:0 auto;padding:30px 28px}
.who-txt{background:var(--ink);color:var(--bg);border-radius:var(--r);padding:60px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.who h2.big{color:var(--bg);font-size:clamp(2.2rem,4.2vw,3.7rem)}.who h2 .u{color:var(--ink)}.who p{color:#ddd;max-width:520px;font-size:1.08rem;margin:0}
.who .eyebrow{background:transparent;color:var(--bg);border-color:var(--bg)}
.who-img{position:relative;padding:12px;background:var(--ink);border:2px solid var(--ink);border-radius:var(--r);min-height:420px}.who-img img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:2px solid var(--ink)}
.tag{position:absolute;right:26px;bottom:26px;margin:0;background:var(--lime)}
/* how */
.how-g{display:grid;grid-template-columns:.9fr 1.3fr;gap:50px;align-items:center}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hw{padding:24px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);transition:transform .25s}.hw:hover{transform:translateY(-6px) rotate(1deg)}
.nb{display:inline-grid;place-items:center;min-width:52px;height:36px;padding:0 12px;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.05rem;background:var(--lime);border:2px solid var(--ink);border-radius:999px}.nb.t{background:var(--lime)}
.ico{display:block;width:48px;height:48px;margin:18px 0 12px}.ico svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hw h3{font-size:1.15rem}
/* cta */
.cta{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;max-width:1240px;margin:30px auto 90px;padding:0 28px}
.cta-img{position:relative;padding:12px;background:var(--lime);border:2px solid var(--ink);border-radius:var(--r);min-height:360px}.cta-img img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:2px solid var(--ink)}
.cta-note{position:absolute;left:24px;top:24px;margin:0;background:var(--lime)}
.cta-txt{background:var(--ink);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);padding:60px 50px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--ink)}
.cta-txt h2{max-width:520px}.cta-txt p{max-width:440px}.cta-txt .eyebrow{background:var(--bg)}
/* service pages */
.sits{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.sits{align-items:start}.sits li{background:var(--card);border:2px solid var(--ink);border-radius:20px;transition:transform .2s,box-shadow .2s}@media(hover:hover){.sits li:hover{transform:translate(-3px,-3px);box-shadow:var(--sh)}}
.sits li p{margin:0;font-weight:500}.chk{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);font-weight:800;font-size:15px;line-height:1}
.green{background:var(--ink);color:var(--bg)}.green h2{color:var(--bg)}.green .lead{color:#d8d8d8}.green .eyebrow{background:transparent;color:var(--bg);border-color:var(--bg)}
.split2{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start}
.green .note{color:#cfcfcf;border-left-color:var(--lime)}
.others{background:#1f1f1f;border:2px solid #444;border-radius:var(--r);padding:28px}
.others a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-top:8px;border-radius:999px;border:2px solid #444;text-decoration:none;font-weight:700;transition:.2s}.others a svg{width:18px;height:18px;transition:transform .2s}.others a:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}.others a:hover svg{transform:translateX(4px)}
.note{font-size:14px;color:var(--muted);border-left:4px solid var(--ink);padding-left:14px;margin-top:30px;max-width:680px}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.model{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:32px;box-shadow:var(--sh);transition:transform .25s}.model:hover{transform:translateY(-6px)}
.model:nth-child(2){background:var(--lime)}.model:nth-child(3){background:var(--lime)}
.mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.model .ico{margin:0}.model p{color:#2a2a2a;margin:0}
.steps{list-style:none;padding:0;margin:30px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.steps li{background:#1f1f1f;border:2px solid #444;border-radius:var(--r);padding:26px;font-weight:600;font-size:1.1rem}.steps .nb{display:grid;width:max-content;margin-bottom:16px;color:var(--ink)}
.prose{max-width:780px}.prose p{font-size:1.1rem}.big-note{font-size:1.3rem!important;margin-bottom:24px}
.form-g{display:grid;grid-template-columns:1.6fr 1fr;gap:50px;align-items:start}
.form{display:grid;gap:18px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:34px;box-shadow:var(--sh)}.form .note{margin-top:0}
.form label{display:grid;gap:7px;font-weight:700;font-size:14.5px}
input,select,textarea{font:inherit;font-weight:400;padding:13px 16px;border:2px solid var(--ink);border-radius:14px;background:var(--bg);color:var(--ink)}input:focus,select:focus,textarea:focus{outline:3px solid var(--lime);outline-offset:1px}
.form .btn{justify-self:start}.side{padding:20px 0}.side li{margin:8px 0;color:var(--muted)}
/* footer */
.ftr{background:var(--ink);color:#cfcfcf;padding:70px 0 28px;border-radius:34px 34px 0 0}.ftr-g{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.ftr h4{color:var(--lime);margin:0 0 14px;font-size:15px;letter-spacing:0}.ftr a:not(.brand){display:block;text-decoration:none;padding:4px 0;transition:.2s}.ftr a:not(.brand):hover{color:var(--lime);transform:translateX(4px)}
.ftr-b{margin-top:50px;padding-top:22px;border-top:1px solid #333;font-size:13px}
/* responsive */
@media(max-width:1080px){.scards{grid-template-columns:repeat(2,1fr)}.scard,.scard:nth-child(1),.scard:nth-child(4){grid-column:span 1;flex-direction:column}.scard:nth-child(1) .scard-img,.scard:nth-child(4) .scard-img{flex:none;aspect-ratio:16/10;margin:12px 12px 0}.how-g{grid-template-columns:1fr;gap:36px}}
@media(max-width:900px){
.burger{display:flex;margin-left:auto}.hdr .pill{display:none}
.nav{display:none;position:absolute;top:76px;left:12px;right:12px;background:var(--card);flex-direction:column;align-items:stretch;gap:2px;padding:14px;border:2px solid var(--ink);border-radius:22px;box-shadow:var(--sh)}
.nav-open .nav{display:flex}.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav-open .burger span:nth-child(2){opacity:0}.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav>a,.ddb{font-size:17px;padding:10px 14px;text-align:left}.ddm{position:static;display:block;box-shadow:none;border:0;background:none;padding:0 0 0 12px}
.hero-g,.who,.cta,.split2,.form-g{grid-template-columns:1fr}.hero-g{gap:40px}
.who-txt,.cta-txt{padding:44px 28px}.who-img{min-height:320px}.cta-img{min-height:260px}
.models,.steps,.sits,.ftr-g{grid-template-columns:1fr}.sec{padding:64px 0}.sec-head{flex-direction:column;align-items:flex-start}}
@media(max-width:620px){.scards,.how3{grid-template-columns:1fr}.wrap,.who,.cta{padding-left:18px;padding-right:18px}.hero-img{transform:none;box-shadow:5px 5px 0 var(--ink)}.hero-img:after{right:-8px;width:52px;height:52px}.note-on{left:8px}h1{font-size:2.7rem}}
/* dropdown: tap to toggle on mobile */
.dd:hover .ddm{display:none}.dd.show .ddm{display:block}
@media(min-width:901px) and (hover:hover){.dd:hover .ddm{display:block}}
@media(max-width:900px){.ddm,.dd:hover .ddm{display:none}.dd.show .ddm{display:block}.ddb{width:100%;display:flex;justify-content:space-between}.dd.show .ddb span{display:inline-block;transform:rotate(180deg)}}

/* single-accent lime theme, no graphic panels */
.hero{padding:70px 0 60px}.hero-g{grid-template-columns:1fr}.hero-txt{max-width:900px}.hero-txt h1{font-size:clamp(3rem,8vw,7rem)}
.hero.sub .hero-txt h1{font-size:clamp(2.6rem,6vw,5rem)}
.stk-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}.stk-row .stk{position:static;margin:0;font-size:1rem}.stk-row br{display:none}.stk-row .stk br+*{margin-left:4px}
.stk,.note-on,.tag,.cta-note,.arrow-note{background:var(--lime);color:var(--ink)}
.eyebrow:before{background:var(--lime);border:1.5px solid var(--ink)}
.pill:hover,.btn:hover{box-shadow:4px 4px 0 var(--lime)}.btn.ghost:hover,.pill.light:hover{box-shadow:4px 4px 0 var(--ink)}
.scards{grid-template-columns:repeat(2,1fr)}.scard,.scard:nth-child(n){grid-column:span 1;flex-direction:column;min-height:280px}
.scard:nth-child(1),.scard:nth-child(4){background:var(--lime)}.scard:nth-child(2){background:var(--ink)}.scard:nth-child(3){background:var(--card)}
.scard:nth-child(2) h3,.scard:nth-child(2) p{color:var(--bg)}.scard:nth-child(2) .circ{background:var(--lime);color:var(--ink)}
.scard-body{padding:34px 34px 90px}.scard-body h3{font-size:clamp(1.8rem,3vw,2.4rem)}.scard-body p{font-size:16.5px;max-width:460px}
.scard:hover .circ{background:var(--ink);color:var(--lime);transform:rotate(-45deg)}.scard:nth-child(2):hover .circ{background:var(--bg);color:var(--ink)}
.who,.cta{grid-template-columns:1fr}
.who-txt{padding:70px 56px}.who h2.big{font-size:clamp(2.4rem,5.5vw,4.6rem)}.who h2 .u{color:var(--ink)}
.cta-txt{background:var(--lime);color:var(--ink);padding:70px 56px}.cta-txt h2{color:var(--ink);font-size:clamp(2.2rem,5vw,4rem);max-width:none}
.cta-txt .pill.light{background:var(--ink);color:var(--bg)}
.nb,.nb.t{background:var(--lime);color:var(--ink)}
.model:nth-child(1){background:var(--card)}.model:nth-child(2){background:var(--lime)}.model:nth-child(3){background:var(--ink);color:var(--bg)}.model:nth-child(3) h3,.model:nth-child(3) p{color:var(--bg)}.model:nth-child(3) .ico svg{stroke:var(--lime)}
.note{border-left-color:var(--lime)}.note{border-left-width:6px}
@media(max-width:900px){.who-txt,.cta-txt{padding:44px 26px}}
@media(max-width:620px){.scards{grid-template-columns:1fr}.scard{min-height:0}.hero{padding:44px 0 40px}.hero-txt h1{font-size:2.9rem}.hero.sub .hero-txt h1{font-size:2.5rem}}
@media(min-width:901px){.hero-txt{max-width:none;display:grid;grid-template-columns:1.25fr 1fr;column-gap:56px;align-items:end}
.hero-txt>*{grid-column:1}.hero-txt>.lead,.hero-txt>.ctas{grid-column:2}.hero-txt>.lead{grid-row:1/span 3;align-self:end;margin:0 0 .6em}.hero-txt>.ctas{grid-row:4;margin-top:0;align-self:start}.hero-txt>h1{grid-row:3;margin-bottom:0}.hero-txt>.stk-row{grid-row:1;justify-self:start}.hero-txt>.eyebrow{grid-row:2;justify-self:start}}
/* chat widget */
.bec{position:fixed;right:20px;bottom:20px;z-index:90;font-family:'DM Sans',system-ui,sans-serif}
.bec-fab{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:14px 22px;font:700 16px 'Bricolage Grotesque',sans-serif;box-shadow:var(--sh);cursor:pointer;transition:transform .2s,box-shadow .2s}
.bec-fab svg{width:22px;height:22px}.bec-fab:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:8px 8px 0 var(--ink)}
.bec.open .bec-fab{background:var(--ink);color:var(--lime)}
.bec-panel{position:absolute;right:0;bottom:74px;width:370px;max-width:calc(100vw - 32px);height:min(520px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--bg);border:2px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;animation:becIn .25s ease}
.bec-panel[hidden]{display:none}
@keyframes becIn{from{opacity:0;transform:translateY(12px) scale(.97)}}
.bec-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--ink);color:var(--bg);padding:16px 18px}
.bec-hd strong{display:block;font:800 1.2rem 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}.bec-hd small{color:#cfcfcf;font-size:13px}
.bec-x{width:38px;height:38px;border-radius:50%;border:2px solid var(--lime);background:var(--lime);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.bec-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.bec-m{max-width:85%;padding:11px 15px;border:2px solid var(--ink);border-radius:18px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.bec-bot{align-self:flex-start;background:var(--card);border-bottom-left-radius:6px}.bec-user{align-self:flex-end;background:var(--lime);border-bottom-right-radius:6px}
.bec-m a{font-weight:700}.bec-wait{opacity:.6}
.bec-form{display:flex;gap:8px;padding:12px;border-top:2px solid var(--ink);background:var(--card)}
.bec-form input{flex:1;min-width:0;border-radius:999px;padding:11px 16px;font-size:16px}
.bec-form button{width:46px;height:46px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--ink);color:var(--lime);font-size:20px;font-weight:800;cursor:pointer}
.bec-form :disabled{opacity:.5;cursor:not-allowed}
.bec-fine{margin:0;padding:8px 14px 12px;font-size:12px;color:var(--muted);background:var(--card)}
.bec-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:620px){.bec{right:14px;bottom:14px}.bec-fab{padding:13px 18px}
.bec-panel{position:fixed;left:10px;right:10px;bottom:84px;width:auto;max-width:none;height:min(70vh,calc(100vh - 110px))}}
html,body{overflow-x:clip}@supports not (overflow:clip){html,body{overflow-x:hidden}}
/* language switch */
.lang{display:inline-flex;border:2px solid var(--ink);border-radius:999px;padding:3px;background:var(--card);gap:2px;flex:none}
.lang button{font:700 13px 'DM Sans',sans-serif;letter-spacing:.04em;border:0;background:none;color:var(--ink);border-radius:999px;padding:6px 11px;cursor:pointer;transition:background .2s,transform .2s}
.lang button:hover{transform:translateY(-1px);background:#C6F43255}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--lime)}
.lang-nav{display:none}
.hdr .lang:not(.lang-nav){margin-left:6px}
@media(max-width:900px){.hdr .lang:not(.lang-nav){margin-left:auto}.burger{margin-left:10px}.nav .lang-nav{display:inline-flex;align-self:flex-start;margin:10px 0 4px 10px}.nav .lang-nav button{font-size:15px;padding:8px 16px}}
/* Thai typography: Latin keeps Bricolage/DM Sans; Thai glyphs fall back to Noto Sans Thai */
body{font-family:'DM Sans','Noto Sans Thai',system-ui,sans-serif}
h1,h2,h3,h4,.b1,.stk,.mq-in,.bec-fab,.bec-hd strong,.art-word{font-family:'Bricolage Grotesque','Noto Sans Thai',sans-serif}
.nav>a,.ddb,input,select,textarea,.btn,.pill,.lang button,.bec{font-family:'DM Sans','Noto Sans Thai',sans-serif}
html.lang-th body{line-height:1.75;word-break:normal;overflow-wrap:break-word;line-break:auto}
html.lang-th h1,html.lang-th h2,html.lang-th h3,html.lang-th h4{line-height:1.3;letter-spacing:-.01em}
html.lang-th .hero-txt h1{font-size:clamp(2.4rem,5.6vw,5rem)}html.lang-th .hero.sub .hero-txt h1{font-size:clamp(2.1rem,4.6vw,3.9rem)}
html.lang-th .who h2.big,html.lang-th .cta-txt h2{line-height:1.3}
html.lang-th .u{padding:.02em .14em;line-height:1.45}
html.lang-th .eyebrow{letter-spacing:.02em;text-transform:none;font-size:13.5px}
html.lang-th .stk{line-height:1.5}html.lang-th .lead{font-size:1.12rem}
html.lang-th .scard-body p,html.lang-th .bec-m{line-height:1.7}
.en-sub{display:block;font:600 .55em 'DM Sans',sans-serif;letter-spacing:0;opacity:.7;margin-top:.35em}
@media(max-width:620px){html.lang-th .hero-txt h1{font-size:2.3rem}html.lang-th .hero.sub .hero-txt h1{font-size:2rem}html.lang-th h2{font-size:1.8rem}}
/* chat language picker + header toggle */
.bec-lang{display:inline-flex;gap:2px;border:2px solid var(--lime);border-radius:999px;padding:2px;margin-left:auto;flex:none}
.bec-lang button{font:700 12px 'DM Sans',sans-serif;border:0;background:none;color:var(--bg);border-radius:999px;padding:5px 9px;cursor:pointer}
.bec-lang button[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.bec-lang button:hover{background:#C6F43233}.bec-lang button[aria-pressed="true"]:hover{background:var(--lime)}
.bec-picker{max-width:100%;text-align:left}
.bec-pick-q{display:block;font-weight:700;line-height:1.5;margin-bottom:10px;font-family:'DM Sans','Noto Sans Thai',sans-serif}
.bec-pick{display:flex;gap:8px;flex-wrap:wrap}
.bec-pick button{font:700 15px 'DM Sans','Noto Sans Thai',sans-serif;border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 20px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.bec-pick button:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.bec-pick button.sug{background:var(--lime);box-shadow:3px 3px 0 var(--ink)}
/* chat close card + lead mini-form */
.bec-close{max-width:100%}
.bec-close .bec-pick button.sug{background:var(--lime)}
.bec-lead{display:grid;gap:9px;max-width:100%;width:100%;align-self:stretch;white-space:normal;background:var(--card)}
.bec-lead-t{font:800 1.05rem 'Bricolage Grotesque','Noto Sans Thai',sans-serif;letter-spacing:-.01em}
.bec-lead label{display:grid;gap:4px;font-weight:700;font-size:13.5px}
.bec-lead input{padding:9px 12px;font-size:16px;border-radius:12px;border:2px solid var(--ink);background:var(--bg)}
.bec-lead input:focus{outline:3px solid var(--lime);outline-offset:1px}
.bec-consent{font-size:12px;color:var(--muted);line-height:1.45}
.bec-err{margin:0;font-size:13px;font-weight:700;color:#8a1c00;background:#fff1ec;border:2px solid var(--ink);border-radius:10px;padding:6px 10px}
.bec-lead .bec-pick button[disabled]{opacity:.6;cursor:wait}
.bec-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* contact form */
.form .chk-row{display:flex;gap:10px;align-items:center;font-weight:700}.form .chk-row input{width:20px;height:20px;accent-color:#121212}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .note.ok{border-left-color:var(--lime);background:#C6F4322e;padding:10px 14px;border-radius:10px}

/* expandable 'When you might need us' cards (details/summary: native tap + keyboard) */
.sits-hint{margin:14px 0 0;font-size:.95rem;color:var(--muted)}
.sit summary{display:block;list-style:none;cursor:pointer;padding:22px 24px;border-radius:18px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.sit summary::-webkit-details-marker{display:none}.sit summary::marker{content:''}
.sit summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sit-row{display:flex;gap:16px;align-items:flex-start}.sit-q{flex:1;font-weight:500;padding-top:3px}
.sit-ic{flex:none;position:relative;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:var(--bg);transition:transform .25s,background .2s}
.sit-ic::before,.sit-ic::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px}.sit-ic::after{transform:rotate(90deg)}
.sit[open] .sit-ic{transform:rotate(45deg);background:var(--lime)}.sit summary:hover .sit-ic{background:var(--lime)}
.sits li .sit-a{margin:0;padding:0 24px 22px 70px;font-weight:400;color:var(--muted);line-height:1.6}
.sit[open]{animation:sitIn .25s ease}@keyframes sitIn{from{opacity:.6}to{opacity:1}}
@media(max-width:620px){.sits li .sit-a{padding:0 20px 20px 20px}.sit summary{padding:20px}}
/* food safety legal section */
.legal{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.legal li{background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:22px 24px;box-shadow:var(--sh)}.legal h3{margin:0 0 8px;font-size:1.15rem}.legal p{margin:0;color:var(--muted)}
.legal-help{margin:24px 0 0;padding:18px 22px;border:2px solid var(--ink);border-radius:20px;background:var(--lime);max-width:900px}
@media(max-width:900px){.legal{grid-template-columns:1fr}}
.hero-txt .value{font-weight:700;font-size:1.08rem;margin:16px 0 0;max-width:560px}
.bec-lead-who{margin:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}

/* ===== Mobile typography pass (desktop >900px unchanged) ===== */
.nw{white-space:nowrap}
@media(max-width:900px){
 h1,h2,h3,.eyebrow,.stk,.btn,.pill,.sit-q,.legal h3,.bec-lead-t{text-wrap:balance}
 p,li,.lead,.sit-a,.bec-m{text-wrap:pretty}
 .lead,.prose p,.sit-a,.legal p,.scard-body p{max-width:62ch}
}
@media(max-width:600px){
 /* fluid display type: scales 360 -> 430 instead of one fixed size */
 h1,.hero-txt h1{font-size:clamp(2.2rem,10.4vw,2.9rem);line-height:1.02}
 .hero.sub .hero-txt h1{font-size:clamp(1.95rem,8.6vw,2.45rem);line-height:1.04}
 h2{font-size:clamp(1.7rem,7.6vw,2.05rem);line-height:1.04}
 .who h2.big{font-size:clamp(1.95rem,9vw,2.5rem)}
 .cta-txt h2{font-size:clamp(1.9rem,8.6vw,2.4rem)}
 h3{line-height:1.18}
 .lead{font-size:1.06rem;line-height:1.62}.hero-txt .value{font-size:1rem;line-height:1.5}
 .prose p{font-size:1.04rem}.big-note{font-size:1.15rem!important}
 /* pills/labels: wrap gracefully if they must, never overflow */
 .eyebrow{max-width:100%;border-radius:16px;line-height:1.35;padding:6px 12px;font-size:12px;letter-spacing:.06em;align-items:center}
 .eyebrow:before{flex:none}
 .btn,.pill{max-width:100%;justify-content:center;text-align:center;line-height:1.25}
 .btn{padding:14px 22px;font-size:15px}.pill{padding:11px 18px;font-size:14.5px}
 .btn svg,.pill svg{flex:none}
 .ctas{gap:10px}
 .stk{max-width:100%}
 .sit summary{padding:18px}.sits li .sit-a{padding:0 18px 18px 18px;font-size:15.5px}
 .sit-row{gap:12px}
 .legal li{padding:18px 20px}
 .ftr a:not(.brand){padding:6px 0}
 /* Thai: slightly smaller display sizes + roomier line height (no word-break:keep-all: that breaks Thai) */
 html.lang-th h1,html.lang-th .hero-txt h1{font-size:clamp(1.85rem,8.4vw,2.3rem);line-height:1.28}
 html.lang-th .hero.sub .hero-txt h1{font-size:clamp(1.65rem,7.4vw,2rem);line-height:1.3}
 html.lang-th h2{font-size:clamp(1.42rem,6.4vw,1.75rem);line-height:1.32}
 html.lang-th .who h2.big{font-size:clamp(1.6rem,7.4vw,2rem)}
 html.lang-th .cta-txt h2{font-size:clamp(1.55rem,7vw,1.95rem)}
 html.lang-th h3{line-height:1.35}
 html.lang-th .eyebrow{font-size:12.5px;letter-spacing:0}
 html.lang-th .lead{line-height:1.75}
}
/* chat: near full-screen on phones; height follows the visual viewport (keyboard-safe) */
@media(max-width:620px){
 .bec-panel{left:8px;right:8px;top:calc(8px + env(safe-area-inset-top,0px));bottom:auto;height:calc(100vh - 16px);height:calc(100dvh - 16px - env(safe-area-inset-top,0px));border-radius:22px;box-shadow:4px 4px 0 var(--ink)}
 .bec.open .bec-fab{display:none}
 .bec-hd{padding:12px 14px}.bec-hd small{font-size:12.5px}
 .bec-m{max-width:90%;font-size:15.5px;line-height:1.55}.bec-m.bec-lead{max-width:100%}
 .bec-log{padding:12px;overscroll-behavior:contain}
 .bec-fine{padding:6px 12px 10px}
}

.b1,.b2{white-space:nowrap}@media(max-width:380px){.b1{font-size:1.22rem}.b2{letter-spacing:.32em}.hdr .lang button{padding:6px 9px}}

/* stickers + pills on phones: stickers one line (JS scales font to fit), pills shrink-wrap */
@media(max-width:600px){
 .stk{white-space:nowrap;max-width:none}.stk.stk-wrap{white-space:normal;max-width:100%}
 .stk-row .stk,.stk{font-size:clamp(12.5px,3.9vw,15.5px);padding:7px 14px}
 .eyebrow{width:fit-content;max-width:100%;box-sizing:border-box}
 .who-txt,.cta-txt,.hero-txt,.who>*,.cta>*{min-width:0}
}