@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap');
.project-nav-head{align-items:end}.project-nav-head h2{margin:0;font-size:clamp(1.65rem,3vw,2.8rem);line-height:1;letter-spacing:-.035em}.project-nav-head a{border-bottom:1px solid var(--ink);padding-bottom:4px;font-size:.78rem;font-weight:600}.project-links{grid-template-columns:repeat(3,1fr)!important;border-left:0!important;gap:16px}.project-links .project-card{min-height:400px;padding:0;border:0;position:relative;overflow:hidden;display:flex;align-items:end;background:#222;color:#fff;isolation:isolate}.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease;z-index:-2}.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%);z-index:-1}.project-card-copy{width:100%;display:flex;justify-content:space-between;align-items:end;gap:14px;padding:22px}.project-card-copy b{font-size:clamp(1.45rem,2.5vw,2.35rem);line-height:1;letter-spacing:-.04em}.project-card-copy small{max-width:105px;font-size:.68rem;font-weight:600;line-height:1.35;text-align:right;color:#fff}.project-links .project-card:hover{background:#222;color:#fff}.project-card:hover img{transform:scale(1.055);filter:brightness(.84)}@media(max-width:720px){.project-nav-head{align-items:start;flex-direction:column;gap:14px}.project-links{grid-template-columns:1fr!important;gap:11px}.project-links .project-card{min-height:280px}.project-card-copy{padding:18px}}
:root{--ink:#0d0d0d;--white:#fff;--line:#d9d7d5;--quiet:#66615e;--accent:#c7b9aa;--font:"Prompt",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);line-height:1.6}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.wrap{width:min(100% - 104px,1280px);margin:auto}.eyebrow{font:700 .68rem/1.35 var(--font);letter-spacing:.04em}.header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center}.header .wrap{display:flex;justify-content:space-between;align-items:center}.mark{display:block;width:43px;height:43px;overflow:hidden}.mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.23)}.back{font-size:.82rem;font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:3px}.hero{padding:72px 0 0}.hero-meta{display:flex;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line);padding-bottom:17px;font-size:.73rem;font-weight:600}.hero h1{max-width:940px;margin:35px 0 48px;font:700 clamp(3.3rem,7.3vw,7.3rem)/.92 var(--font);letter-spacing:-.025em}.lead{display:grid;grid-template-columns:1.15fr .85fr;border-top:1px solid var(--line)}.lead p{margin:0;padding:28px 55px 55px 0;font-size:1.15rem;line-height:1.65}.facts{border-left:1px solid var(--line);padding:22px 0 45px 45px}.facts div{border-bottom:1px solid var(--line);padding:11px 0}.facts span{display:block;font-size:.68rem;font-weight:700;color:var(--quiet)}.facts b{font-size:.9rem}.cover{min-height:650px;background:var(--accent);position:relative;overflow:hidden}.cover:before{content:"";position:absolute;inset:14%;border:1px solid rgba(255,255,255,.7);border-radius:50%}.cover:after{content:"รอใส่ภาพผลงานจริง";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.75rem;background:#fff;padding:8px 11px;white-space:nowrap}.story{padding:112px 0;display:grid;grid-template-columns:.58fr 1.42fr;gap:45px}.story h2{font-size:1rem;margin:0}.story p{max-width:720px;margin:0;font-size:clamp(1.5rem,3vw,2.75rem);line-height:1.42;letter-spacing:-.04em}.detail{padding:0 0 110px;border-top:1px solid var(--line)}.detail-head{display:grid;grid-template-columns:.58fr 1.42fr;gap:45px;padding:26px 0}.detail-head h2{margin:0;font-size:1rem}.detail-head p{margin:0;max-width:700px;font-size:1.08rem}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}.detail-grid article{min-height:240px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.detail-grid h3{font-size:1.2rem;margin:17px 0 9px}.detail-grid p{font-size:.88rem;margin:0;color:var(--quiet)}.process{padding:0 0 110px}.process-head{display:grid;grid-template-columns:.58fr 1.42fr;gap:45px;padding:26px 0;border-top:1px solid var(--line)}.process-head h2{margin:0;font-size:1rem}.process-head p{margin:0;max-width:700px;font-size:1.08rem}.steps{border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:100px 1fr .62fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}.step b{font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.05}.step p{margin:0;color:var(--quiet);font-size:.9rem}.system{padding:105px 0;background:#f0eeeb}.system .wrap{display:grid;grid-template-columns:.58fr 1.42fr;gap:45px}.system h2{margin:0;font-size:1rem}.system-copy h3{font-size:clamp(2rem,4vw,3.8rem);line-height:1.12;margin:0 0 24px}.system-copy p{max-width:620px;font-size:1.04rem;margin:0}.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}.system-tile{min-height:250px;padding:19px;background:#fff;display:flex;align-items:end;font-weight:600}.system-tile:nth-child(2){background:#191919;color:#fff}.system-tile:nth-child(3){background:#c9b9a9}.system-tile:nth-child(4){background:#dad7d2}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px}.image{min-height:420px;background:#ded9d3;position:relative}.image:nth-child(2){background:#bab0a5}.image:nth-child(3){grid-column:span 2;min-height:560px;background:#8c857e}.image span{position:absolute;bottom:15px;left:15px;background:#fff;padding:7px 9px;font-size:.68rem}.application{padding:105px 0}.application-head{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:16px}.application-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:17px}.application-grid div{min-height:300px;background:#d9d5cf;position:relative}.application-grid div:after{content:"ภาพการใช้งานจริง";position:absolute;left:14px;bottom:14px;background:#fff;padding:6px 8px;font-size:.65rem}.application-grid div:nth-child(1){grid-column:span 7;background:#b8aa9d}.application-grid div:nth-child(2){grid-column:span 5;background:#c4c8be}.application-grid div:nth-child(3){grid-column:span 4;background:#9c938b}.application-grid div:nth-child(4){grid-column:span 8;background:#d3c6b7}.deliverables{padding:100px 0;display:grid;grid-template-columns:.58fr 1.42fr;gap:45px}.deliverables h2{margin:0;font-size:1rem}.deliverables ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.deliverables li{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.03rem}.project-nav{padding:0 0 105px}.project-nav-head{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:15px}.project-links{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);margin-top:18px}.project-links a{min-height:108px;padding:17px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;font-weight:700;font-size:1.03rem;transition:background .2s,color .2s}.project-links a small{font-size:.67rem;font-weight:600;color:var(--quiet)}.project-links a:hover{background:var(--ink);color:var(--white)}.project-links a:hover small{color:#d0d0cd}.project-links a[aria-current="page"]{background:#e8e5e1;pointer-events:none}.next{background:#0d0d0d;color:#fff;padding:90px 0}.next h2{max-width:800px;margin:23px 0 45px;font-size:clamp(2.8rem,6vw,6.3rem);line-height:.98;letter-spacing:-.025em}.next a{display:inline-block;border-bottom:1px solid #fff;padding-bottom:6px;font-size:.9rem}.foot{padding:19px 0;color:#bbb;font-size:.7rem;display:flex;justify-content:space-between;gap:10px;border-top:1px solid #555}@media(max-width:720px){.wrap{width:min(100% - 34px,1280px)}.header{height:72px}.hero{padding-top:48px}.hero h1{font-size:clamp(2.85rem,12vw,4.8rem);margin:28px 0 36px}.lead,.story,.detail-head,.process-head,.system .wrap,.deliverables{grid-template-columns:1fr}.lead p{padding:23px 0 30px;font-size:1rem}.facts{border-left:0;border-top:1px solid var(--line);padding:15px 0 30px}.cover{min-height:390px}.story,.deliverables{padding:75px 0;gap:22px}.story p{font-size:1.45rem}.detail,.process{padding-bottom:75px}.detail-head,.process-head{gap:15px}.detail-grid{grid-template-columns:1fr}.detail-grid article{min-height:auto}.step{grid-template-columns:44px 1fr}.step p{grid-column:2}.system{padding:75px 0}.system-grid{grid-template-columns:1fr;margin-top:28px}.gallery{display:block}.image,.image:nth-child(3){min-height:280px;margin-bottom:11px}.application{padding:75px 0}.application-grid{grid-template-columns:1fr}.application-grid div,.application-grid div:nth-child(n){grid-column:span 1;min-height:250px}.project-nav{padding-bottom:75px}.project-links{grid-template-columns:repeat(2,1fr)}.project-links a{min-height:85px}.next{padding:65px 0}.foot{flex-wrap:wrap}}