@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap";
:root{--ink:#1b2221;--deep:#192220;--paper:#f8f7f3;--white:#fff;--sand:#eae6dd;--gold:#a88b64;--muted:#7d8783;--line:#e5e4df;--font:"Noto Sans Thai","DM Sans",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;margin:0;font-size:15px;line-height:1.7}img{max-width:100%;display:block}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}.shell{width:min(1320px,100% - 112px);margin:auto}.skip-link{z-index:999;background:#fff;padding:12px;position:absolute;top:-200px}.skip-link:focus{top:12px}.site-header{background:var(--paper);z-index:10;border-bottom:1px solid #ecebe5;position:sticky;top:0}.nav-wrap{justify-content:space-between;align-items:center;width:min(1460px,100% - 112px);height:90px;margin:auto;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-mark{border:1.8px solid var(--deep);place-items:center;width:48px;height:48px;display:grid;position:relative}.brand-mark span{letter-spacing:-3px;font:700 20px DM Sans,sans-serif;transform:translate(-2px)}.brand-mark i{background:var(--paper);font:600 9px DM Sans,sans-serif;position:absolute;bottom:2px;right:3px}.brand-copy{flex-direction:column;line-height:1.2;display:flex}.brand-copy strong{letter-spacing:.13em;font:700 15px DM Sans,sans-serif}.brand-copy small{letter-spacing:.18em;color:#7b807b;margin-top:6px;font:500 9px DM Sans,sans-serif}.main-nav{align-items:center;gap:44px;display:flex}.main-nav a{color:#474e49;font-size:13px;transition:color .25s}.main-nav a:hover{color:var(--gold)}.main-nav .nav-contact{background:var(--deep);color:#fff;padding:13px 20px}.nav-contact span{margin-left:18px;font-size:17px}.mobile-toggle{display:none}.hero{background:#f1efe9;position:relative;overflow:hidden}.hero-grid{grid-template-columns:48% 52%;min-height:690px;display:grid}.hero-copy{flex-direction:column;align-items:flex-start;padding:90px 48px 75px 0;display:flex}.eyebrow,.section-number{font:600 11px "DM Sans",var(--font),sans-serif;letter-spacing:.2em}.eyebrow{color:#887456;align-items:center;gap:13px;display:flex}.eyebrow-line{border-top:1px solid #a89a82;width:36px}.hero h1{letter-spacing:-.07em;margin:55px 0 30px;font:500 clamp(54px,5.8vw,90px)/1.05 DM Sans,sans-serif}.hero h1 em{color:#aa9677;font-style:normal}.hero-lead{margin:0 0 7px;font-size:24px;font-weight:500}.hero-desc{color:#737973;max-width:455px;font-size:15px;line-height:2}.hero-buttons{align-items:center;gap:29px;margin-top:26px;display:flex}.btn{justify-content:space-between;align-items:center;gap:33px;padding:16px 25px;font-size:13px;font-weight:500;transition:all .2s;display:inline-flex}.btn-dark{background:var(--deep);color:#fff}.btn-dark:hover{background:#354640}.btn span{font-size:20px;line-height:1}.text-link{border-bottom:1px solid #9d9e96;padding:8px 0;font-size:13px}.text-link span{padding-left:12px}.hero-meta{letter-spacing:.14em;color:#9f9c95;align-items:baseline;gap:12px;margin-top:auto;padding-top:45px;font:600 10px DM Sans,sans-serif;display:flex}.hero-meta strong{color:var(--deep);letter-spacing:-.05em;font-size:33px}.hero-visual{height:690px;position:relative;overflow:hidden}.hero-visual>img{object-fit:cover;object-position:center;filter:saturate(.8);width:100%;height:100%}.hero-image-tag{color:#25312c;background:#e9e6dc;flex-direction:column;gap:3px;width:min(290px,63%);padding:19px 28px;display:flex;position:absolute;bottom:0;right:0}.hero-image-tag span{letter-spacing:.17em;color:#7b827b;font:500 9px DM Sans,sans-serif}.hero-image-tag strong{letter-spacing:.04em;font:600 14px DM Sans,sans-serif}.hero-side-label{writing-mode:vertical-rl;color:#e4e5e2;letter-spacing:.15em;font:500 9px DM Sans,sans-serif;position:absolute;top:60%;right:10px}.section-number{color:var(--gold)}.section-number span{color:#beb6a9;padding:0 9px}.intro{padding:105px 0 115px}.intro-body{grid-template-columns:1.2fr 1fr;align-items:end;gap:95px;margin-top:34px;display:grid}.intro h2,.section-head h2,.approach h2{letter-spacing:-.05em;margin:0;font-size:clamp(32px,3.4vw,52px);font-weight:500;line-height:1.45}.intro h2 span{color:#9b958c}.intro-body>div:last-child{max-width:540px}.intro-body p{font-size:15px}.intro-body .muted{color:#747c75;line-height:2}.underlined{border-bottom:1px solid #606860;justify-content:space-between;gap:90px;margin-top:11px;padding:11px 0;font-size:13px;display:inline-flex}.portfolio{background:#eeece6;padding:104px 0 120px}.section-head{justify-content:space-between;align-items:flex-end;gap:30px;margin-top:29px;display:flex}.section-head h2 span{color:#9a9690;margin-left:.3em}.section-head p{color:#7e837d;margin:13px 0 0;font-size:13px}.count-caption{color:#8c918a;align-items:center;gap:12px;display:flex}.count-caption strong{letter-spacing:-.06em;color:var(--ink);font:400 58px DM Sans,sans-serif}.count-caption span{max-width:75px;font-size:12px;line-height:1.5}.filter-bar{border-bottom:1px solid #d7d5cd;flex-wrap:wrap;gap:6px;margin:48px 0 34px;padding-bottom:17px;display:flex}.filter{color:#777d75;white-space:nowrap;background:0 0;border:0;padding:9px 16px;font-size:12px;transition:all .25s}.filter.active,.filter:hover{background:var(--deep);color:#fff}.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px;display:grid}.project-card{text-align:left;background:0 0;border:0;min-width:0;padding:0;display:block}.project-photo{aspect-ratio:1.26;background:#dbd7cb;display:block;position:relative;overflow:hidden}.project-photo img{object-fit:cover;filter:saturate(.81);width:100%;height:100%;transition:transform .7s cubic-bezier(.18,.72,.2,1)}.project-card:hover .project-photo img{transform:scale(1.055)}.photo-placeholder{color:#a7a39b;background:linear-gradient(125deg,#e9e6dc,#d8d6ce);flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100%;display:flex}.photo-placeholder>span{letter-spacing:-.08em;color:#bab5ab;font:500 44px DM Sans,sans-serif}.photo-placeholder small{font-size:12px}.project-index{z-index:2;color:#49504b;background:#f6f6f1;padding:4px 9px;font:600 10px DM Sans,sans-serif;position:absolute;top:16px;left:16px}.project-info{justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 0 3px;display:flex}.project-info h3{margin:0 0 4px;font-size:17px;font-weight:500;line-height:1.45}.project-info p{color:#8e958d;margin:0;font-size:11px}.project-arrow{font:400 24px/1 DM Sans,sans-serif;transition:transform .2s}.project-card:hover .project-arrow{transform:translate(3px,-3px)}.portfolio-footnote{color:#999991;padding-top:35px;font-size:11px}.quote-band{color:#fff;background:#a98f70;padding:67px 0}.quote-band .shell{justify-content:space-between;align-items:center;gap:70px;display:flex}.quote-band span{letter-spacing:.17em;white-space:nowrap;font:500 11px DM Sans,sans-serif}.quote-band p{max-width:710px;margin:0;font-size:clamp(17px,2.3vw,27px);font-weight:300;line-height:1.7}.approach{padding:111px 0 135px}.approach-main{grid-template-columns:1.1fr 1fr;gap:100px;margin-top:37px;display:grid}.approach h2 em{color:#aa9677;font-style:normal}.approach-list{flex-direction:column;display:flex}.approach-list>div{border-top:1px solid #d7d8d1;gap:35px;padding:19px 0 22px;display:flex}.approach-list>div:last-child{border-bottom:1px solid #d7d8d1}.approach-list>div>span{color:var(--gold);padding-top:3px;font:500 11px DM Sans,sans-serif}.approach-list strong{font-size:15px;font-weight:500}.approach-list p{color:#8f958e;margin:5px 0 0;font-size:12px}.contact{background:var(--deep);color:#fff;padding:100px 0 110px}.contact-content{grid-template-columns:1fr 1fr;gap:130px;display:grid}.section-number.light{color:#c2a889}.contact h2{letter-spacing:-.05em;margin:33px 0 22px;font-size:clamp(39px,4vw,63px);font-weight:500;line-height:1.33}.contact h2 em{color:#ac9375;font-style:normal}.contact-content>div>p{color:#b1bbb4;font-size:14px}.contact-card{border-top:1px solid #4d5a52;padding-top:26px}.contact-card h3{margin:0 0 6px;font-size:19px;font-weight:500}.contact-card>p{color:#a7afa7;margin:0 0 30px;font-size:12px;line-height:1.9}.contact-placeholder{border-top:1px solid #3e4b44;justify-content:space-between;gap:15px;padding:17px 0;display:flex}.contact-placeholder span{letter-spacing:.13em;color:#a9967a;font:500 10px DM Sans,sans-serif}.contact-placeholder strong{color:#c8d0c9;font-size:12px;font-weight:400}footer{color:#fff;background:#111816;padding:32px 0}.foot-grid{justify-content:space-between;align-items:center;display:flex}.foot-grid>div{flex-direction:column;gap:7px;display:flex}.foot-grid strong{letter-spacing:.12em;font:700 15px DM Sans,sans-serif}.foot-grid strong span{color:#b49a75}.foot-grid small{color:#87938b;font-size:10px}.footer-right{text-align:right}.footer-right a{font-size:12px}.modal{z-index:99;justify-content:center;align-items:center;padding:24px;display:none;position:fixed;inset:0}.modal.open{display:flex}.modal-backdrop{background:#0a0f0dd6;position:absolute;inset:0}.modal-panel{z-index:1;background:#f7f6f1;flex-direction:column;width:min(1010px,100%);max-height:94vh;padding:22px 28px;display:flex;position:relative}.modal-heading{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px;display:flex}.modal-heading span{letter-spacing:.17em;color:#aa8f6f;font:500 10px DM Sans,sans-serif}.modal-heading h2{margin:3px 0 0;font-size:25px;font-weight:500}.close-modal{background:0 0;border:0;padding:2px 5px;font-size:22px}.modal-photo-wrap{background:#dddcd6;justify-content:center;align-items:center;min-height:300px;max-height:72vh;display:flex;position:relative;overflow:hidden}.modal-photo-wrap img{object-fit:contain;width:auto;max-width:100%;max-height:min(67vh,730px)}.photo-arrow{z-index:2;background:#f8f7f3f0;border:0;width:43px;height:48px;font-size:23px;position:absolute;top:50%;transform:translateY(-50%)}.photo-arrow:first-child{left:0}.photo-arrow:last-child{right:0}.photo-arrow:disabled{opacity:.3;cursor:default}.modal-bottom{color:#8d938c;justify-content:space-between;gap:10px;padding-top:15px;font-size:11px;display:flex}body.modal-open{overflow:hidden}@media (max-width:1100px){.shell,.nav-wrap{width:calc(100% - 64px)}.hero-grid{grid-template-columns:50% 50%}.hero h1{font-size:clamp(45px,5.7vw,65px)}.hero-copy{padding-right:30px}.hero-visual,.hero-grid{height:630px;min-height:630px}.main-nav{gap:22px}.contact-content,.intro-body,.approach-main{gap:55px}}@media (max-width:760px){.shell,.nav-wrap{width:calc(100% - 36px)}.nav-wrap{height:72px}.brand-mark{width:40px;height:40px}.brand-copy strong{font-size:12px}.brand-copy small{font-size:8px}.mobile-toggle{background:0 0;border:0;flex-direction:column;gap:6px;padding:10px;display:flex}.mobile-toggle span{background:var(--ink);width:23px;height:2px}.main-nav{background:var(--paper);border-bottom:1px solid var(--line);padding:20px;display:none;position:absolute;top:72px;left:0;right:0;box-shadow:0 16px 20px #0000000f}.main-nav.open{flex-direction:column;align-items:stretch;gap:5px;display:flex}.main-nav a{padding:12px 10px}.hero-grid{flex-direction:column;height:auto;display:flex}.hero-copy{min-height:530px;padding:65px 0 45px}.hero h1{margin:45px 0 26px;font-size:58px}.hero-lead{font-size:19px}.hero-desc{font-size:13px}.hero-meta{margin-top:36px;padding-top:15px}.hero-visual{height:405px;min-height:405px;margin:0 -18px}.hero-side-label{display:none}.intro,.approach{padding:74px 0}.intro-body,.approach-main{flex-direction:column;gap:25px;margin-top:27px;display:flex}.intro h2,.section-head h2,.approach h2{font-size:33px}.portfolio{padding:75px 0 85px}.section-head{margin-top:25px}.section-head p{font-size:12px}.count-caption{display:none}.filter-bar{scrollbar-width:none;flex-wrap:nowrap;margin:30px -18px;padding:0 18px 15px;overflow-x:auto}.filter-bar::-webkit-scrollbar{display:none}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 14px}.project-photo{aspect-ratio:1}.project-info h3{font-size:14px}.project-info p{font-size:10px}.project-index{font-size:9px;top:8px;left:8px}.quote-band{padding:45px 0}.quote-band .shell{flex-direction:column;align-items:flex-start;gap:14px;display:flex}.quote-band p{font-size:19px}.approach-list{width:100%}.contact{padding:70px 0}.contact-content{flex-direction:column;gap:35px;display:flex}.contact h2{font-size:46px}.foot-grid{align-items:flex-start;gap:25px}.footer-right a{font-size:10px}.modal{padding:9px}.modal-panel{max-height:95vh;padding:14px}.modal-heading h2{font-size:18px}.modal-photo-wrap{min-height:220px}.modal-bottom{font-size:9px}}@media (max-width:420px){.hero h1{font-size:49px}.project-grid{grid-template-columns:1fr 1fr}.hero-copy{min-height:540px}.hero-buttons{gap:17px}.btn{gap:12px;padding:14px 17px}.project-info h3{font-size:13px}.project-arrow{font-size:20px}}.project-entry{min-width:0}.project-card{width:100%}.project-card:disabled{cursor:default}.project-card:disabled .project-arrow{opacity:.35}.project-photo>img{inset:0;position:absolute!important}.project-info{width:100%}.project-info>span:first-child{flex-direction:column;display:flex}.project-title{font-size:17px;font-weight:500;line-height:1.45}.project-info small{color:#8e958d;margin-top:3px;font-size:11px}.project-detail-link{color:#737b73;text-underline-offset:4px;margin:4px 0 0;font-size:11px;text-decoration:underline;display:inline-block}.project-detail-link:hover{color:#1b2221}.accent-dot{color:#a88b64}.contact-placeholder a{color:#f3efe7;overflow-wrap:anywhere;text-underline-offset:3px;font-size:13px;text-decoration:underline}.modal-backdrop{cursor:pointer;border:0}.gallery-full-image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:min(67vh,730px)}.detail-page{min-height:75vh;padding:45px 0 115px}.detail-breadcrumb{color:#777f79;font-size:12px}.detail-breadcrumb a{text-underline-offset:4px;text-decoration:underline}.detail-breadcrumb span{color:#b2b7b0;padding:0 10px}.detail-heading{margin:55px 0}.detail-heading h1{letter-spacing:-.035em;margin:20px 0;font-size:clamp(36px,5.5vw,75px);font-weight:500;line-height:1.16}.detail-heading>p:last-child{color:#7d867e}.detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 25px;display:grid}.detail-gallery figure{margin:0}.detail-gallery img{aspect-ratio:1.33;object-fit:cover;background:#e3dfd5;width:100%;height:auto}.detail-gallery figcaption{color:#969b94;padding-top:9px;font-size:11px}.detail-empty{text-align:center;color:#96988f;background:#e9e6df;padding:100px 20px}.detail-return{border-bottom:1px solid #9faaa0;margin-top:66px;padding:9px 0;font-size:13px;display:inline-block}.not-found{min-height:65vh;padding:120px 0}.not-found h1{margin-bottom:32px;font-size:clamp(32px,5vw,58px);font-weight:500}@media (max-width:760px){.project-title{font-size:14px}.project-info small{font-size:10px}.detail-gallery{grid-template-columns:1fr;gap:25px}.detail-heading{margin:35px 0}.detail-page{padding-top:28px}.detail-breadcrumb span{padding:0 5px}}@media (max-width:420px){.project-title{font-size:13px}}.gallery-total{color:#818a82;margin:0 0 22px;font-size:13px}.gallery-load-more{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:42px 0;display:flex}.gallery-load-more p{color:#7e877e;margin:0;font-size:12px}.contact-intro>p:last-child{color:#aab7ad;max-width:390px;margin-top:20px;font-size:13px;line-height:1.95}.contact-line{border-top:1px solid #3e4b44;grid-template-columns:176px minmax(0,1fr);align-items:center;gap:24px;margin-top:14px;padding-top:28px;display:grid}.contact-qr{aspect-ratio:1;background:#fff;border-radius:9px;padding:7px;transition:transform .2s;display:block}.contact-qr:hover{transform:translateY(-2px)}.contact-qr img{object-fit:contain;image-rendering:auto;border-radius:5px;width:100%;height:100%}.contact-line-copy{min-width:0}.contact-line-eyebrow{color:#cbb28d;letter-spacing:.18em;margin:0 0 10px;font:600 10px DM Sans,sans-serif;display:block}.contact-line-copy strong{color:#fff;font-size:16px;font-weight:500;line-height:1.5;display:block}.contact-line-copy p{color:#aebbb0;margin:8px 0 20px;font-size:12px;line-height:1.8}.contact-line-button{color:#152218;background:#a9d9aa;justify-content:space-between;align-items:center;gap:24px;padding:12px 18px;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s;display:inline-flex}.contact-line-button:hover{background:#c6eac7}.contact-line-button span{font-size:17px}.footer-contact-links{flex-wrap:wrap;gap:8px 20px;margin-top:8px;display:flex}.footer-contact-links a{color:#c4d1c7;overflow-wrap:anywhere;text-underline-offset:3px;font-size:11px;text-decoration:underline}.footer-contact-links a:hover{color:#fff}@media (max-width:1100px){.contact-line{grid-template-columns:145px minmax(0,1fr);gap:18px}}@media (max-width:760px){.contact-line{grid-template-columns:152px minmax(0,1fr);gap:20px}.footer-contact-links{max-width:350px}}@media (max-width:470px){.contact-line{grid-template-columns:1fr;justify-items:start}.contact-qr{width:190px;max-width:100%}.contact-line-copy{width:100%}.contact-placeholder{flex-direction:column;gap:5px}.contact-placeholder a{max-width:100%}}.drive-alert{color:#533d13;background:#fff5db;border:1px solid #e9cd91;border-radius:12px;margin-top:22px;padding:16px 22px;line-height:1.7}.drive-alert strong{margin-bottom:4px;font-size:1rem;display:block}.drive-alert a{font-weight:600;text-decoration:underline}.drive-image-error{color:#6b5c51;text-align:center;background:#f1ede8;border:1px dashed #cdbeb1;flex-direction:column;justify-content:center;align-items:center;min-height:220px;padding:30px 12px;display:flex}.drive-status-page{min-height:72vh;padding-top:90px;padding-bottom:70px}.drive-status-page h1{margin:14px 0;font-size:clamp(2rem,4vw,3.2rem)}.drive-status-page table{border-collapse:collapse;text-align:left;width:100%;margin-top:26px}.drive-status-page th,.drive-status-page td{border-bottom:1px solid #ddd;padding:12px 10px}.drive-status-page th{letter-spacing:.02em;font-size:.85rem}.drive-status-page p{line-height:1.7}.drive-status-page .state-ok{color:#267246;font-weight:700}.drive-status-page .state-error{color:#9f351f;font-weight:700}.project-gallery-photo img{width:100%;height:auto;display:block}.drive-hero-placeholder{text-align:center;color:#e6ebe3;letter-spacing:.12em;background:#303b33;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;min-height:420px;font-size:clamp(20px,2.5vw,30px);display:flex}.drive-hero-placeholder small{letter-spacing:normal;font-size:12px}
