:root{--paper:#f7f8f2;--ink:#202723;--muted:#858d86;--green:#3eb995;--mint:#c4edda;--line:#dce1d8;--display:'Manrope','Noto Sans Thai',sans-serif;--body:'DM Sans','Noto Sans Thai',sans-serif;--thai:'Noto Sans Thai',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #08785b;outline-offset:5px}::selection{background:var(--mint);color:var(--ink)}.container{max-width:1280px;width:calc(100% - 112px);margin-inline:auto}.header{height:99px;border-bottom:1px solid var(--line);position:relative;z-index:20;background:var(--paper)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:35px}.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;font-family:var(--display);font-size:32px;letter-spacing:-1.6px;font-weight:800}.brand img{width:37px;height:37px}.brand-life{font-weight:500}.brand-dot{color:var(--green)}.navigation{display:flex;gap:30px;margin-left:auto;margin-right:50px;font-family:var(--thai);font-size:13px;font-weight:500}.navigation a{position:relative;transition:color .2s}.navigation a:after{position:absolute;content:'';height:2px;left:0;right:100%;bottom:-8px;background:var(--green);transition:right .2s}.navigation a:hover:after{right:0}.nav-contact{border:1px solid #89938b;border-radius:6px;padding:12px 17px;font-family:var(--thai);font-size:13px;display:flex;gap:26px;align-items:center}.nav-contact span{font-family:var(--body);font-size:21px;line-height:1}.nav-contact:hover{background:var(--ink);color:white}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:687px;gap:25px;padding-top:75px;padding-bottom:36px;align-items:start}.eyebrow{font-family:var(--body);display:flex;align-items:center;gap:9px;font-size:10px;font-weight:650;letter-spacing:1.7px}.status-dot{width:7px;height:7px;display:inline-block;background:var(--green);border-radius:50%;flex-shrink:0}.hero h1{font-family:var(--display);font-size:clamp(58px,6.6vw,91px);font-weight:650;line-height:1.12;letter-spacing:-5.7px;margin:28px 0 22px;white-space:nowrap}.life-word{position:relative}.life-word svg{position:absolute;left:0;width:100%;bottom:-4px;height:13px;color:var(--green)}.green-period{color:var(--green)}.hero-thai{font-family:var(--thai);font-size:23px;line-height:1.55;font-weight:500;letter-spacing:-.5px;margin:28px 0 12px}.hero-description{font-family:var(--thai);font-size:13px;line-height:1.95;color:#737b74;margin:0 0 27px}.hero-actions{display:flex;align-items:center;gap:23px}.button{display:inline-flex;align-items:center;justify-content:center;gap:32px;font-family:var(--thai);font-size:13px;font-weight:500;padding:16px 21px;border-radius:5px;transition:background .2s,transform .2s}.button-dark{background:var(--ink);color:#fff}.button-dark:hover{background:#116c53;transform:translateY(-2px)}.button span{font-size:21px;line-height:1;font-family:var(--body)}.text-link{display:inline-flex;gap:18px;align-items:center;font-family:var(--thai);font-weight:500;font-size:12px}.text-link span{font-size:20px;font-family:var(--body)}.text-link:hover{color:#08785b}.hero-bottom{display:flex;align-items:center;gap:10px;margin-top:39px;font-size:8px;letter-spacing:1.1px;color:#848c83}.tiny-line{width:25px;height:1px;background:var(--green)}
.hero-art{height:536px;position:relative;margin-top:-10px;isolation:isolate}.art-grid{position:absolute;inset:2px -16px 0 2px;z-index:-3;background-image:linear-gradient(to right,#7f998313 1px,transparent 1px),linear-gradient(to bottom,#7f998313 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse,#000 48%,transparent 73%)}.art-circle{position:absolute;top:75px;left:50px;width:400px;height:400px;border-radius:50%;background:#d0ebd5;z-index:-2}.art-orbit{position:absolute;top:38px;left:7px;width:485px;height:485px;border-radius:50%;border:1px solid #9abbaa50;z-index:-2}.art-label{position:absolute;right:10px;top:20px;font-size:8px;font-weight:600;letter-spacing:1.2px;display:flex;align-items:center;gap:8px}.device{padding:6px;background:#262d2a;border-radius:33px;border:1px solid #737c76;box-shadow:0 24px 40px -18px #172b294a,0 3px 5px #172b2930;position:relative}.device-screen{height:100%;border-radius:27px;overflow:hidden;position:relative;background:white}.device-screen img{width:100%;height:100%;object-fit:cover;object-position:top}.hero-device{position:absolute;width:192px;height:416px}.device-back{top:62px;right:7px;transform:rotate(11deg)}.device-front{top:93px;left:70px;transform:rotate(-11deg);width:205px;height:444px;z-index:2}.art-note{position:absolute;display:flex;align-items:center;gap:10px;z-index:4;border:1px solid #fff8;background:#ffffffda;border-radius:9px;backdrop-filter:blur(12px);box-shadow:0 12px 30px -15px #314f3e3b}.note-top{top:50px;left:0;padding:13px 15px;font-size:10px;line-height:1.65;transform:rotate(-4deg)}.note-top strong{font-weight:650}.note-icon{width:29px;height:29px;display:grid;place-items:center;background:#e7f6e7;color:#1b6145;border-radius:50%;font-size:19px}.note-bottom{bottom:24px;right:2px;padding:15px 20px;font-size:8px;letter-spacing:.5px;line-height:1.8;transform:rotate(4deg)}.note-bottom strong{font-size:14px;font-weight:600;letter-spacing:-.2px}.note-check{width:32px;height:32px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font-size:16px}.art-cross{position:absolute;bottom:33px;left:21px;color:#317a60;font-size:58px;line-height:1;font-weight:400;transform:rotate(5deg)}.art-caption{position:absolute;bottom:-21px;right:22px;font-size:7px;letter-spacing:1.6px;color:#7a867c}.capability-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.strip-inner{display:flex;align-items:center;justify-content:space-between;min-height:71px;gap:18px}.strip-inner>span:first-child{font-size:8px;letter-spacing:1.3px;color:#7b847b}.strip-inner>span:nth-child(2){display:flex;align-items:center;gap:24px;font-size:12px;font-weight:500}.strip-inner i{font-size:14px;color:var(--green);font-style:normal}.strip-inner>a{font-size:21px;border:1px solid var(--line);border-radius:50%;width:33px;height:33px;display:grid;place-items:center}
.section{padding-top:100px;padding-bottom:94px}.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:45px}.section-label{color:#667369;font-size:9px;margin-bottom:22px}.section-top h2,h2{font-family:var(--thai);font-weight:500;font-size:40px;letter-spacing:-1.6px;line-height:1.5;margin:0}.muted{color:var(--muted)}.section-intro{font-family:var(--thai);font-size:13px;line-height:1.9;color:#768076;max-width:350px;margin:0 0 4px}.work-toolbar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0;margin-top:39px;gap:15px}.work-toolbar>span{font-size:8px;font-weight:550;letter-spacing:1.2px;color:#747e75}.filters{display:flex;gap:5px}.filters button{border:0;background:transparent;font-size:11px;border-radius:50px;padding:8px 15px;transition:background .2s}.filters button:first-child{font-family:var(--thai)}.filters button.active{background:var(--ink);color:white}.filters button:not(.active):hover{background:#e5eadf}.filters sup{font-size:7px;margin-left:4px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 30px}.project[hidden]{display:none}.project{min-width:0}.project-visual{position:relative;width:100%;height:385px;border:0;display:block;overflow:hidden;isolation:isolate;text-align:left;border-radius:8px;padding:0}.project-visual:focus-visible{outline-offset:4px}.visual-kicker{position:absolute;top:25px;left:27px;z-index:5;font-size:8px;letter-spacing:1.4px;font-weight:550}.visual-bottom{position:absolute;bottom:22px;left:27px;font-size:7px;letter-spacing:1.6px;z-index:5}.project-open{position:absolute;right:20px;bottom:18px;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#ffffff70;font-size:21px;transition:transform .25s,background .25s;z-index:6}.project-visual:hover .project-open{transform:rotate(45deg);background:white}.project-visual .device{transition:transform .5s cubic-bezier(.22,.61,.36,1)}.bevfood-visual{background:#f0e2d5}.visual-outline{position:absolute;width:290px;height:290px;border:1px solid #d5bbae;border-radius:50%;top:67px;left:130px}.work-phone{position:absolute;width:166px;height:359px;padding:5px;border-radius:27px}.work-phone .device-screen{border-radius:21px}.phone-one{left:79px;top:78px;transform:rotate(-11deg);z-index:2}.phone-two{left:260px;top:57px;transform:rotate(10deg)}.bevfood-visual:hover .phone-one{transform:rotate(-7deg) translateY(-8px)}.bevfood-visual:hover .phone-two{transform:rotate(6deg) translateY(-8px)}.home-visual{background:#dfe8f1}.home-rings{position:absolute;left:28px;top:62px;width:260px;height:260px}.home-rings i{position:absolute;border:1px solid #93aec245;border-radius:50%;inset:0}.home-rings i:nth-child(2){inset:35px}.home-rings i:nth-child(3){inset:70px}.home-phone{right:91px;top:67px;transform:rotate(9deg);width:173px;height:375px;z-index:2}.home-visual:hover .home-phone{transform:rotate(5deg) translateY(-8px)}.home-connection{position:absolute;top:140px;left:67px;z-index:3}.home-connection span{display:grid;place-items:center;font-size:35px;color:#4c6a83;border:1px solid #7d9cb04d;width:65px;height:65px;border-radius:16px;background:#edf3f9c7;box-shadow:0 5px 10px #4063860c;backdrop-filter:blur(8px)}.home-connection span:last-child{font-size:31px;width:44px;height:44px;position:relative;margin-left:55px;transform:rotate(-8deg)}.home-connection>div{height:39px;width:64px;border-right:1px dashed #819aa8;border-bottom:1px dashed #819aa8;margin-left:32px;margin-bottom:0}.smart-note{position:absolute;top:82px;left:39px;display:flex;align-items:center;gap:8px;font-size:7px;letter-spacing:1px}.smart-note .status-dot{width:5px;height:5px;background:#749cb6}.project-info{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-top:19px}.project h3{font-family:var(--display);font-size:22px;font-weight:650;letter-spacing:-.8px;margin:0 0 6px}.project h3 button{font:inherit;border:0;background:transparent;padding:0;text-align:left}.project h3 span{font-size:17px;color:#5d6a5f;margin-left:4px}.project-info p{font-family:var(--thai);font-size:12px;color:#7a837a;margin:0;line-height:1.8}.project-tag{white-space:nowrap;font-size:8px;padding:6px 10px;border:1px solid var(--line);border-radius:30px;margin-top:3px;color:#657267}.aotga-visual{background:#d5e4e1}.browser-frame{position:absolute;width:84%;left:12%;top:84px;background:white;box-shadow:0 20px 35px -15px #1f454b45;border-radius:7px 7px 0 0;overflow:hidden;transform:rotate(-5deg);transition:transform .5s}.aotga-visual:hover .browser-frame{transform:rotate(-2deg) translateY(-5px)}.browser-bar{background:#f9faf8;height:22px;display:flex;align-items:center;gap:4px;padding:0 9px}.browser-bar>span{width:4px;height:4px;background:#ccd2cc;border-radius:50%}.browser-bar>div{margin-left:45px;border-radius:3px;background:#ebeeea;width:53%;text-align:center;font-size:6px;color:#859285;padding:2px}.browser-content{height:300px;overflow:hidden;background:#202e43}.aotga-screen{width:100%;height:auto;max-width:100%;object-position:top;object-fit:cover}.aotga-fallback{height:100%;position:relative;background:#183e48}.aotga-fallback[hidden]{display:none}.aotga-fallback>span{position:absolute;top:40%;left:8%;color:white;font-size:25px;line-height:1.3;font-weight:600}.oishi-visual{background:#e9e7f1}.oishi-orbit{position:absolute;left:7%;top:74px;width:300px;height:300px;border:1px solid #cbc5dd;border-radius:50%}.oishi-phone{left:77px;top:64px;transform:rotate(-9deg);width:175px;height:379px}.oishi-visual:hover .oishi-phone{transform:rotate(-5deg) translateY(-8px)}.oishi-note{position:absolute;top:157px;right:31px;width:180px;font-family:var(--display);font-size:21px;font-weight:550;line-height:1.4;letter-spacing:-.6px}.oishi-note em{font-style:normal;color:#817b9b}.work-footnote{font-family:var(--thai);color:#8a938a;font-size:9px;margin:25px 0 0;display:flex;gap:20px;justify-content:space-between}
.expertise-section{padding:90px 0 95px;background:#edf0e9;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d0d8ca;border-bottom:1px solid #d0d8ca;margin-top:50px}.expertise-card{padding:23px 25px 28px 0;position:relative;transition:background .2s}.expertise-card+.expertise-card{padding-left:25px;border-left:1px solid #d0d8ca}.service-number{display:flex;justify-content:space-between;color:#87947f;font-size:10px}.service-number>span{font-size:20px;color:#62735d;transition:transform .2s}.expertise-card:hover .service-number>span{transform:translate(3px,-3px)}.service-icon{width:47px;height:47px;margin:35px 0 24px;color:#4c6656;stroke:currentColor;stroke-width:1.3}.expertise-card h3{font-family:var(--display);font-size:24px;line-height:1.3;letter-spacing:-.6px;font-weight:550;margin:0 0 17px}.expertise-card p{font-family:var(--thai);font-size:12px;line-height:1.9;color:#727d6e;min-height:69px;margin:0}.service-keywords{display:block;font-size:7px;letter-spacing:1px;margin-top:26px;color:#788773}.approach-section{display:grid;grid-template-columns:1fr 1.15fr;gap:95px;padding-top:105px;padding-bottom:102px}.approach-intro h2{font-size:42px;line-height:1.5}.approach-intro>p{font-family:var(--thai);font-size:13px;line-height:1.9;color:#7c857a;margin:18px 0 22px}.approach-art{position:relative;margin-top:45px;height:118px;width:250px}.approach-art>span{position:absolute;width:80px;height:80px;top:0;border:1px solid #99bba1;border-radius:22px;transform:rotate(-18deg);background:#eef4eaaa}.approach-art>span:nth-child(2){left:62px;transform:rotate(7deg);background:#d5e9d3bb}.approach-art>span:nth-child(3){left:126px;transform:rotate(25deg);background:#afdabdbb}.approach-art>div{position:absolute;bottom:0;left:0;font-size:8px;letter-spacing:1.5px;color:#6b7f68;display:flex;gap:17px;align-items:center}.approach-art i{font-size:17px;font-style:normal}.steps{padding-top:4px}.steps details{border-top:1px solid var(--line);padding:25px 0}.steps details:last-child{border-bottom:1px solid var(--line)}.steps summary{display:flex;align-items:flex-start;gap:23px;list-style:none;cursor:pointer}.steps summary::-webkit-details-marker{display:none}.step-no{font-size:10px;color:#7f8b7d;margin-top:6px}.step-title{font-family:var(--display);font-size:24px;font-weight:550;letter-spacing:-.6px}.step-title>span{display:block;font-family:var(--thai);font-size:12px;font-weight:400;letter-spacing:0;margin-top:7px;color:#748071}.step-plus{margin-left:auto;font-size:25px;line-height:1.4;font-weight:400;color:#658166;transition:transform .2s}.steps details[open] .step-plus{transform:rotate(45deg)}.steps details>p{font-family:var(--thai);font-size:12px;line-height:1.95;color:#7a8377;max-width:420px;margin:16px 24px 0 39px}.about-section{background:#e5ede5;padding:74px 0 77px;border-top:1px solid #d4e0d1;border-bottom:1px solid #d4e0d1}.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:95px}.about-section h2{font-size:36px}.about-mark{display:flex;align-items:center;gap:25px;margin-top:49px}.about-mark img{width:100px;height:100px}.about-mark>span{font-family:var(--display);font-size:17px;line-height:1.5;letter-spacing:-.5px;color:#506858}.about-grid>div>p{font-family:var(--thai);font-size:13px;line-height:2;color:#6e7b6c;margin:21px 0 0;max-width:540px}.about-values{display:flex;gap:24px;margin-top:28px;font-family:var(--thai);font-size:11px}.about-values>span{display:flex;align-items:center;gap:8px}.about-values>span:before{content:'↗';font-family:var(--body);color:#208061}.contact-section{padding-top:100px;padding-bottom:94px;display:grid;grid-template-columns:1.4fr 1fr;gap:110px}.contact-heading h2{font-family:var(--display);font-size:49px;letter-spacing:-2.7px;line-height:1.25;font-weight:550}.contact-heading>p{font-family:var(--thai);color:#7b8478;font-size:13px;line-height:1.9;margin:24px 0}.contact-details{padding-top:30px}.contact-details>a,.line-contact{position:relative;display:flex;flex-direction:column;padding:21px 0 24px;border-bottom:1px solid var(--line);gap:11px}.contact-details>a>span,.line-contact>span{font-size:8px;color:#7f8c7a;letter-spacing:1.2px}.contact-details strong{font-family:var(--display);font-size:22px;letter-spacing:-.6px;font-weight:500}.contact-details i{position:absolute;right:0;top:42px;font-style:normal;font-size:23px}.contact-details a:hover{color:#0d7b58}.line-contact{flex-direction:row;align-items:flex-end;flex-wrap:wrap;justify-content:space-between;gap:11px}.line-contact>span{width:100%}.line-contact>button{border:0;background:transparent;color:#66775e;font-family:var(--thai);font-size:11px;padding:5px 0}.line-contact>button>span{margin-left:12px;font-family:var(--body);font-size:17px}.contact-details #copy-status{display:block;min-height:22px;margin-top:9px;font-family:var(--thai);font-size:11px;color:#237051}.footer{border-top:1px solid var(--line)}.footer-main{padding:32px 0;display:flex;align-items:center;justify-content:space-between}.footer-main .brand{font-size:27px}.footer-main>span{font-size:8px;letter-spacing:1.4px;color:#778173}.footer-main>a:last-child{font-family:var(--thai);font-size:10px;color:#697861;display:flex;gap:18px;align-items:center}.footer-main>a:last-child>span{font-size:18px}.footer-bottom{border-top:1px solid var(--line);padding:19px 0;display:flex;justify-content:space-between;color:#8b9387;font-size:8px;gap:20px}.footer-bottom>span:last-child{letter-spacing:1px}.skip-link{position:fixed;left:10px;top:-100px;padding:10px;background:var(--ink);color:white;z-index:100}.skip-link:focus{top:10px}.project-dialog{border:0;padding:0;width:min(690px,calc(100vw - 32px));max-height:85dvh;color:var(--ink);background:var(--paper);border-radius:10px;box-shadow:0 30px 80px #152f2560}.project-dialog::backdrop{background:#14231bdd;backdrop-filter:blur(7px)}.dialog-inner{padding:48px;position:relative}.dialog-close{position:absolute;right:19px;top:15px;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:16px}.project-dialog h2{font-family:var(--display);font-size:40px;letter-spacing:-1.5px;line-height:1.2;margin:10px 0 18px}.dialog-lead{font-family:var(--thai);font-size:20px;line-height:1.7;margin-bottom:15px}.dialog-body{font-family:var(--thai);font-size:13px;line-height:2;color:#74816f}.dialog-scope{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;margin:25px 0}.dialog-scope>span{font-size:9px;letter-spacing:1.2px;color:#7b8a74}.dialog-scope>p{font-size:13px;margin-bottom:0}.dialog-source{font-family:var(--thai);font-size:10px;color:#85917f;margin:20px 0}.project-dialog .text-link{display:flex;margin-top:19px}.reveal{animation:reveal .75s ease both}.hero-copy{animation:reveal .75s ease both}.hero-art{animation:reveal 1s .12s ease both}@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.hero h1{font-size:95px}.hero{min-height:735px;gap:50px;padding-top:85px}.hero-art{transform:scale(1.03);transform-origin:top left}.hero-copy{padding-top:6px}}
@media(max-width:1200px){.container{width:calc(100% - 72px)}.navigation{gap:21px;margin-right:15px}.header-inner{gap:20px}.hero{gap:10px;min-height:660px}.hero h1{font-size:6.6vw;letter-spacing:-4.8px}.hero-art{transform:scale(.88);transform-origin:top right;width:470px;margin-left:-55px}.hero-actions{gap:18px}.hero-actions .text-link{font-size:10px;gap:10px}.strip-inner>span:nth-child(2){gap:14px;font-size:10px}.project-visual{height:340px}.phone-one{left:50px}.phone-two{left:220px}.home-phone{right:50px}.oishi-phone{left:44px}.oishi-note{right:24px;width:150px;font-size:19px}.expertise-card h3{font-size:21px}.expertise-card p{font-size:11px;min-height:82px}.expertise-card+.expertise-card{padding-left:20px}.expertise-card{padding-right:20px}.service-keywords{font-size:6px}.approach-section,.about-grid{gap:70px}.contact-section{gap:70px}.contact-heading h2{font-size:43px}.project-info{flex-wrap:wrap}.project-tag{font-size:7px}.project-info p{font-size:11px}}
@media(max-width:950px){.navigation{gap:17px;margin-right:5px;font-size:11px}.nav-contact{font-size:11px;padding:10px 12px;gap:16px}.brand{font-size:28px}.brand img{width:32px;height:32px}.hero{grid-template-columns:1fr 1fr;min-height:620px;padding-top:63px}.hero h1{font-size:6.7vw;letter-spacing:-3.5px}.hero-thai{font-size:20px}.hero-description{font-size:11px}.hero-actions{align-items:flex-start;flex-direction:column;gap:15px}.hero-actions .button{font-size:11px;padding:14px 18px}.hero-actions .text-link{font-size:11px}.hero-bottom{font-size:6px;gap:6px;margin-top:26px;letter-spacing:.6px}.hero-art{transform:scale(.73);width:470px;margin-left:-120px;margin-top:15px}.strip-inner>span:first-child{font-size:6px;letter-spacing:1px}.strip-inner>span:nth-child(2){gap:10px;font-size:9px}.section{padding-top:75px;padding-bottom:72px}.section-top h2{font-size:33px}.section-intro{font-size:11px}.work-grid{gap:27px 24px}.project-visual{height:295px}.work-phone{width:137px;height:297px;border-radius:24px}.work-phone .device-screen{border-radius:18px}.phone-one{left:39px;top:68px}.phone-two{left:179px;top:53px}.home-phone{right:30px;top:57px;width:145px;height:314px}.home-rings{left:5px;width:220px;height:220px}.home-connection{left:35px;top:122px;transform:scale(.85);transform-origin:left top}.smart-note{left:25px;top:70px;font-size:6px}.visual-kicker{font-size:6px;left:21px;top:22px}.visual-bottom{font-size:5.7px;left:21px}.project-info h3{font-size:20px}.project-info{padding-top:15px}.project-info p{font-size:10px}.oishi-phone{left:38px;top:61px;width:141px;height:306px}.oishi-note{font-size:15px;width:124px;right:11px;top:137px}.oishi-orbit{width:250px;height:250px;left:2%}.browser-frame{top:65px}.expertise-section{padding:70px 0}.expertise-grid{grid-template-columns:repeat(2,1fr);border-bottom:0}.expertise-card{padding:25px 28px 27px 0;border-bottom:1px solid #d0d8ca}.expertise-card:nth-child(3){border-left:0;padding-left:0}.expertise-card:nth-child(even){padding-left:28px}.expertise-card p{min-height:50px;font-size:12px}.service-keywords{font-size:7px}.service-icon{margin-top:22px}.expertise-card h3{font-size:24px}.approach-section{gap:45px;grid-template-columns:1fr 1.15fr}.approach-intro h2{font-size:32px}.approach-intro>p{font-size:11px}.steps summary{gap:15px}.step-title{font-size:22px}.step-title>span{font-size:10px}.steps details>p{font-size:11px;margin-left:31px}.about-grid{gap:45px}.about-section h2{font-size:29px}.about-grid>div>p{font-size:11px}.about-mark{gap:15px;flex-wrap:wrap}.about-mark img{width:76px;height:76px}.about-mark>span{font-size:15px}.about-values{gap:13px;font-size:8px}.contact-section{gap:35px}.contact-heading h2{font-size:36px;letter-spacing:-2px}.contact-details strong{font-size:18px}}
@media(max-width:700px){html{scroll-padding-top:25px}.container{width:calc(100% - 40px)}.header{height:78px}.header-inner{gap:15px}.brand{font-size:28px}.brand img{width:32px;height:32px}.nav-contact{margin-left:auto;font-size:10px;border-color:#b8c2b1;padding:9px 10px;gap:12px}.nav-contact span{font-size:18px}.menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px 0 8px 7px;width:27px}.menu-toggle>span{height:1px;width:20px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-3px) rotate(-45deg)}.navigation{display:none;position:absolute;top:77px;left:0;right:0;gap:0;margin:0;flex-direction:column;padding:12px 20px 18px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13px;box-shadow:0 15px 20px #1b3a2310}.navigation.is-open{display:flex}.navigation a{padding:13px 0}.navigation a:after{display:none}.hero{padding-top:38px;padding-bottom:40px;grid-template-columns:1fr;gap:0;min-height:0}.hero .eyebrow{font-size:8px;letter-spacing:1.4px}.hero h1{font-size:clamp(48px,11.2vw,76px);letter-spacing:-3.3px;margin-top:25px;margin-bottom:20px;font-weight:650;line-height:1.12}.life-word svg{height:10px;bottom:-5px}.hero-thai{font-size:20px;line-height:1.65;margin-top:28px}.hero-description{font-size:12px;line-height:1.9}.hero-actions{flex-direction:row;align-items:center;gap:17px;flex-wrap:wrap}.hero-actions .button{padding:14px 16px;font-size:11px;gap:20px}.hero-actions .text-link{font-size:10px;gap:10px}.hero-bottom{margin-top:23px;font-size:6px;letter-spacing:.7px}.hero-art{width:100%;height:465px;transform:none;margin:40px auto 0;max-width:440px}.hero-device{width:154px;height:334px;border-radius:27px}.hero-device .device-screen{border-radius:21px}.device-front{left:calc(50% - 128px);top:94px;width:174px;height:377px}.device-back{right:calc(50% - 173px);top:56px;width:167px;height:362px}.art-circle{width:325px;height:325px;left:calc(50% - 162px);top:75px}.art-orbit{width:375px;height:375px;left:calc(50% - 187px);top:42px}.art-label{font-size:6px;right:5px;top:9px}.note-top{left:1px;top:43px;font-size:8px;padding:11px 12px}.note-icon{width:24px;height:24px;font-size:17px}.note-bottom{right:0;bottom:15px;font-size:6px;padding:12px 14px}.note-bottom strong{font-size:12px}.note-check{width:28px;height:28px;font-size:13px}.art-cross{font-size:47px;bottom:30px;left:1px}.art-caption{font-size:5.7px;bottom:-12px;right:10px}.strip-inner{min-height:86px;flex-wrap:wrap;gap:12px;padding:15px 0}.strip-inner>span:first-child{font-size:7px;width:90%;letter-spacing:1px;order:0}.strip-inner>span:nth-child(2){font-size:8px;gap:8px;order:2;flex-wrap:wrap}.strip-inner i{font-size:9px}.strip-inner>a{width:25px;height:25px;font-size:17px;position:absolute;right:20px}.section{padding-top:60px;padding-bottom:60px}.section-label{font-size:8px;letter-spacing:1.4px;margin-bottom:18px}.section-top{display:block;margin-bottom:27px}.section-top h2{font-size:31px;letter-spacing:-1.1px;line-height:1.55}.section-intro{font-size:11px;line-height:1.9;margin-top:22px;max-width:none}.work-toolbar{padding:17px 0;margin-top:27px;display:block}.work-toolbar>span{display:block;font-size:6px;letter-spacing:1px;margin-bottom:14px}.filters{gap:3px}.filters button{font-size:10px;padding:7px 15px}.work-grid{grid-template-columns:1fr;gap:30px}.project-visual{height:335px;border-radius:7px}.visual-kicker{font-size:7px;left:23px;top:23px}.visual-bottom{font-size:6px;left:23px;bottom:20px}.work-phone{width:153px;height:331px;padding:5px;border-radius:26px}.work-phone .device-screen{border-radius:20px}.phone-one{left:calc(50% - 135px);top:76px}.phone-two{left:calc(50% + 18px);top:61px}.home-phone{width:161px;height:349px;right:calc(50% - 141px);top:69px}.home-rings{width:255px;height:255px;left:calc(50% - 175px);top:67px}.home-connection{left:calc(50% - 132px);top:140px;transform:scale(.9)}.smart-note{left:29px;top:84px;font-size:7px}.project-info{justify-content:space-between;flex-wrap:nowrap;gap:8px}.project-info h3{font-size:20px}.project-info p{font-size:10px}.project-tag{font-size:6px;padding:5px 7px;margin-top:1px}.browser-frame{width:88%;left:10%;top:81px}.browser-content{height:270px}.oishi-phone{left:calc(50% - 134px);top:67px;width:156px;height:338px}.oishi-note{right:calc(50% - 158px);width:140px;font-size:17px;top:146px}.oishi-orbit{width:280px;height:280px;left:calc(50% - 155px);top:77px}.work-footnote{display:block;font-size:8px;line-height:2;margin-top:20px}.work-footnote span{display:block}.expertise-section{padding:59px 0}.expertise-grid{margin-top:32px}.expertise-card{padding:20px 15px 24px 0}.expertise-card+.expertise-card{padding-left:16px;padding-right:0}.expertise-card:nth-child(3){padding-left:0;padding-right:15px}.service-number{font-size:9px}.service-icon{width:40px;height:40px;margin:25px 0 21px}.expertise-card h3{font-size:20px;letter-spacing:-.7px;margin-bottom:14px}.expertise-card p{font-size:10px;line-height:1.9;min-height:76px}.service-keywords{font-size:5.5px;letter-spacing:.4px;line-height:1.8;margin-top:18px}.approach-section{display:block;padding-top:60px;padding-bottom:60px}.approach-intro h2{font-size:32px}.approach-intro>p{font-size:12px}.approach-art{display:none}.steps{margin-top:35px}.steps details{padding:23px 0}.step-title{font-size:24px}.step-title>span{font-size:11px;margin-top:5px}.step-no{font-size:9px}.steps details>p{font-size:11px;max-width:none;margin-right:15px}.about-section{padding:55px 0}.about-grid{display:flex;flex-direction:column;gap:30px}.about-grid>div:first-child{display:flex;flex-direction:column}.about-mark{margin-top:2px;gap:20px;flex-wrap:nowrap}.about-mark img{width:70px;height:70px}.about-mark>span{font-size:15px}.about-section h2{font-size:31px;line-height:1.6}.about-grid>div>p{font-size:12px;margin-top:18px;line-height:1.95}.about-values{font-size:9px;gap:14px;flex-wrap:wrap;line-height:1.8}.about-values>span{gap:6px}.contact-section{display:block;padding-top:60px;padding-bottom:55px}.contact-heading h2{font-size:clamp(31px,8vw,43px);letter-spacing:-1.9px;line-height:1.35}.contact-heading>p{font-size:12px;margin:22px 0}.contact-heading .button{font-size:11px;padding:14px 17px}.contact-details{padding-top:25px}.contact-details strong{font-size:20px}.contact-details>a,.line-contact{padding:20px 0 23px;gap:11px}.footer-main{padding:25px 0;flex-wrap:wrap;gap:20px}.footer-main .brand{font-size:25px}.footer-main .brand img{width:30px;height:30px}.footer-main>span{font-size:6px;letter-spacing:1px;order:2;width:100%}.footer-main>a:last-child{font-size:9px;margin-left:auto}.footer-bottom{font-size:7px;line-height:1.8;flex-wrap:wrap;gap:8px;padding:16px 0}.footer-bottom>span:last-child{font-size:6px;letter-spacing:.7px}.dialog-inner{padding:42px 25px 32px}.project-dialog h2{font-size:32px}.dialog-lead{font-size:17px}.dialog-body{font-size:12px}.dialog-scope>p{font-size:11px}.dialog-source{font-size:9px}.project-dialog .button{font-size:11px}.dialog-close{top:12px;right:12px}}
@media(max-width:360px){.hero-actions{gap:10px}.hero-actions .text-link{font-size:9px}.hero-device{transform:scale(.9) rotate(11deg)}.device-front{transform:scale(.9) rotate(-11deg);left:32px}.device-back{right:0}.art-note.note-top{font-size:7px}.hero-art{height:440px}.project-tag{display:none}.strip-inner>span:nth-child(2){font-size:7px;gap:6px}.oishi-note{right:15px;width:125px;font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Readable body copy on the warm neutral surfaces. */
.hero-description,.section-intro,.project-info p,.work-footnote,.expertise-card p,.approach-intro>p,.steps details>p,.about-grid>div>p,.contact-heading>p,.dialog-body,.dialog-source{color:#606c61}

/* Store artwork is presented as artwork, without an extra phone frame. */
.bevfood-visual .work-phone{padding:0;border:0;border-radius:10px;width:194px;height:355px;box-shadow:0 20px 32px -16px #5b48375c;background:transparent}
.bevfood-visual .device-screen{border-radius:10px}
.bevfood-visual .phone-one{left:58px;top:70px;transform:rotate(-9deg)}
.bevfood-visual .phone-two{left:282px;top:81px;transform:rotate(9deg)}
.bevfood-visual .phone-one img{object-fit:cover;object-position:center}
.bevfood-visual .phone-two img{object-fit:cover;object-position:center}
@media(max-width:1200px) and (min-width:701px){.bevfood-visual .work-phone{width:42%;height:320px}.bevfood-visual .phone-one{left:7%;top:65px}.bevfood-visual .phone-two{left:53%;top:80px}}
@media(max-width:950px) and (min-width:701px){.bevfood-visual .work-phone{height:285px}}
@media(max-width:700px){.bevfood-visual .work-phone{width:45%;height:310px}.bevfood-visual .phone-one{left:3%;top:66px}.bevfood-visual .phone-two{left:54%;top:81px}}

/* A full-width web case balances the two mobile product cases. */
.project[data-category="web"]{grid-column:1/-1}
.aotga-visual{height:420px}
.aotga-visual .browser-frame{width:72%;left:23%;top:70px;transform:rotate(-3deg)}
.aotga-visual .browser-content{height:415px}
.aotga-visual .visual-kicker{max-width:150px;line-height:1.8}
@media(max-width:700px){.aotga-visual{height:300px}.aotga-visual .browser-frame{width:88%;left:10%;top:71px}.aotga-visual .browser-content{height:300px}.aotga-visual .visual-kicker{max-width:none}}

@media(max-width:700px){.device-back{right:calc(50% - 157px)}}
@media(max-width:360px){.hero h1{font-size:42px}.device-back{right:0}.art-orbit{width:calc(100vw - 24px);height:calc(100vw - 24px);left:-8px}.art-circle{width:calc(100vw - 50px);height:calc(100vw - 50px);left:5px}}

@media(max-width:360px){.device-back{right:3px}}

/* Three equally presented contact channels. */
.brand>span{word-spacing:.16em}
.contact-section{align-items:center}
.contact-details{padding-top:0;min-width:0}
.contact-details>a.contact-channel{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:128px;margin:0;padding:20px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.contact-details .channel-label{font-family:var(--body);font-size:9px;font-weight:500;letter-spacing:1.3px;color:#66756a}
.contact-details .contact-channel strong{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-.6px;line-height:1.45;color:var(--ink)}
.contact-details .contact-channel>i{top:58px}
.contact-details>a.contact-channel-line{display:grid;grid-template-columns:minmax(0,1fr) 116px;align-items:center;gap:22px;padding:12px 0;min-height:140px}
.channel-copy{display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0}
.contact-details .channel-hint{font-family:var(--thai);font-size:10px;letter-spacing:0;line-height:1.7;color:#66756a}
.channel-hint>span{margin-left:7px;font-family:var(--body);font-size:15px}
.channel-qr{display:block;width:116px;height:116px;padding:7px;background:#fff;border:1px solid #e1e5dc;border-radius:6px}
.channel-qr img{display:block;width:100px;height:100px;max-width:none;object-fit:contain}
.contact-details .contact-channel:hover strong{color:#176b52}
@media(max-width:950px){.contact-details .contact-channel strong{font-size:19px}.contact-details>a.contact-channel-line{grid-template-columns:minmax(0,1fr) 100px;gap:14px}.channel-qr{width:100px;height:100px;padding:7px}.channel-qr img{width:84px;height:84px}.contact-details .channel-hint{font-size:9px}}
@media(max-width:700px){.contact-details{padding-top:25px}.contact-details>a.contact-channel{min-height:102px;padding:19px 0;gap:9px}.contact-details .contact-channel strong{font-size:20px}.contact-details .channel-label{font-size:9px}.contact-details .contact-channel>i{top:45px}.contact-details>a.contact-channel-line{grid-template-columns:minmax(0,1fr) 108px;gap:18px;min-height:135px;padding:13px 0}.channel-qr{width:108px;height:108px;padding:7px}.channel-qr img{width:92px;height:92px}.contact-details .channel-hint{font-size:10px}}
@media(max-width:360px){.contact-details>a.contact-channel-line{grid-template-columns:minmax(0,1fr) 100px;gap:12px}.channel-qr{width:100px;height:100px}.channel-qr img{width:84px;height:84px}.contact-details .contact-channel-line strong{font-size:18px}.contact-details .channel-hint{font-size:9px}}

/* Accepted warm-white isometric banner, integrated with the page navigation. */
.site-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:566px;gap:0}
.site-hero-copy{position:relative;z-index:2;min-width:0;padding:25px 0 39px}
.site-hero-eyebrow{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:600;letter-spacing:2px;color:#627366;margin:0 0 24px}
.site-hero-eyebrow:before{content:"";width:22px;height:1px;background:var(--green)}
.site-hero h1{font-family:var(--display);font-size:clamp(67px,6.25vw,92px);font-weight:600;line-height:1.12;letter-spacing:-5.5px;margin:0 0 30px}
.site-hero-first-line{white-space:nowrap}
.site-hero-accent{color:var(--green)}
.site-hero-tagline{font-family:var(--thai);font-size:22px;font-weight:450;line-height:1.7;letter-spacing:-.4px;margin:0 0 12px}
.site-hero-description{font-family:var(--thai);font-size:13px;line-height:1.95;color:#606c61;max-width:430px;margin:0}
.site-hero-actions{display:flex;align-items:center;gap:28px;margin-top:30px}
.site-hero-actions .button{font-size:12px;padding:14px 20px;gap:31px}
.site-hero-actions .text-link{font-size:12px;gap:19px}
.site-hero-visual{position:relative;z-index:1;width:calc(100% + 70px);height:auto;aspect-ratio:710/620;margin:-30px -40px 0 -30px;pointer-events:none}
.site-hero-visual img{display:block;width:100%;height:100%;object-fit:contain}
.site-hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper),transparent 12%,transparent 91%,var(--paper)),linear-gradient(180deg,var(--paper),transparent 10%,transparent 90%,var(--paper))}
@media(min-width:1500px){.site-hero{min-height:636px}.site-hero-copy{padding-bottom:45px}}
@media(max-width:1200px){.site-hero-visual{width:calc(100% + 50px);margin-left:-25px;margin-right:-25px}.site-hero h1{font-size:6.35vw;letter-spacing:-4px}.site-hero-tagline{font-size:20px}.site-hero-description{font-size:12px}}
@media(max-width:850px) and (min-width:701px){.site-hero h1{font-size:6.4vw;letter-spacing:-3px}.site-hero-tagline{font-size:18px}.site-hero-description{font-size:11px}.site-hero-actions{gap:20px}.site-hero-actions .button{font-size:11px;padding:13px 16px;gap:18px}.site-hero-actions .text-link{font-size:11px;gap:12px}.site-hero-copy{padding-bottom:25px}}
@media(max-width:700px){.site-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0}.site-hero-copy{padding:49px 0 0}.site-hero-eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:24px}.site-hero h1{font-size:clamp(43px,11.9vw,75px);letter-spacing:-3px;line-height:1.14;margin-bottom:26px}.site-hero-tagline{font-size:19px;line-height:1.65;letter-spacing:-.3px}.site-hero-description{font-size:12px;line-height:1.95;margin-top:13px;max-width:400px}.site-hero-actions{gap:24px;margin-top:26px}.site-hero-actions .button{font-size:11px;padding:14px 17px;gap:20px}.site-hero-actions .text-link{font-size:11px;gap:13px}.site-hero-visual{width:calc(100% + 30px);max-width:600px;height:auto;aspect-ratio:1;margin:5px 0 0;left:50%;transform:translateX(-50%)}.site-hero-visual img{height:auto;aspect-ratio:1}.site-hero-visual:after{background:linear-gradient(90deg,var(--paper),transparent 8%,transparent 92%,var(--paper)),linear-gradient(180deg,var(--paper),transparent 9%,transparent 92%,var(--paper))}}
@media(max-width:360px){.site-hero h1{font-size:40px;letter-spacing:-2.6px}.site-hero-tagline{font-size:17px}.site-hero-description{font-size:11px}.site-hero-actions{gap:18px}.site-hero-actions .button{font-size:10px;padding:13px 14px;gap:16px}.site-hero-actions .text-link{font-size:10px;gap:10px}}

/* Official wordmark colors from the supplied ITLIFE-03.png reference. */
:root{--wordmark-it:#aa333a;--wordmark-life:#0c846f}
.brand>span{color:var(--wordmark-it)}
.brand .brand-life{color:var(--wordmark-life)}