:root{
  --bg:#f2f1ed;
  --paper:#f6f5f1;
  --ink:#171713;
  --muted:#6f706b;
  --line:rgba(23,23,19,.19);
  --soft:rgba(23,23,19,.06);
  --accent:#a59f91;
  --pad:clamp(18px,2.35vw,42px);
  --display:clamp(56px,9.2vw,154px);
  --headline:clamp(36px,5.7vw,96px);
  --subhead:clamp(24px,3.2vw,52px);
  --body:clamp(16px,1.18vw,21px);
  --tiny:11px;
  --ease:cubic-bezier(.2,.72,.22,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,"Noto Sans Thai",sans-serif;font-weight:400;letter-spacing:-.015em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
::selection{background:#1a1a17;color:#fff}
body.is-locked{overflow:hidden}
.page{min-height:100vh;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
body.ready .page{opacity:1;transform:none}
.container{padding-left:var(--pad);padding-right:var(--pad)}
.kicker{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.14em}
.muted{color:var(--muted)}
.rule{border-top:1px solid var(--line)}

/* HEADER */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;padding:16px var(--pad) 12px;mix-blend-mode:difference;color:#fff;pointer-events:none}
.site-header *{pointer-events:auto}
.brand{justify-self:center;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.nav-col{display:flex;gap:18px;align-items:center;font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.13em;white-space:nowrap}
.nav-col.right{justify-self:end}
.nav-link{position:relative}
.nav-link:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .35s var(--ease)}
.nav-link:hover:after,.nav-link.active:after{right:0}
.icon-btn{border:0;background:none;padding:0;cursor:pointer;text-transform:uppercase;font-size:10px;letter-spacing:.13em;color:inherit}
.mobile-only{display:none}

/* OVERLAYS */
.overlay{position:fixed;inset:0;z-index:80;background:#171713;color:#f2f1ed;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;overflow:auto}
.overlay.open{opacity:1;visibility:visible}
.overlay-top{display:flex;justify-content:space-between;align-items:flex-start;padding:18px var(--pad)}
.overlay-close{border:0;background:none;color:inherit;padding:0;cursor:pointer;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.menu-grid{min-height:calc(100vh - 56px);display:grid;grid-template-columns:1.45fr .55fr;gap:40px;padding:7vh var(--pad) var(--pad)}
.menu-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.25)}
.menu-list a{font-size:clamp(44px,7.4vw,118px);line-height:.92;letter-spacing:-.06em;border-bottom:1px solid rgba(255,255,255,.25);padding:.12em 0 .17em;transition:padding-left .35s var(--ease),opacity .35s}
.menu-list a:hover{padding-left:.4em;opacity:.58}
.menu-meta{display:flex;flex-direction:column;justify-content:flex-end;gap:28px;font-size:12px;line-height:1.5;color:#c9c6bd}
.search-box{max-width:1280px;margin:12vh auto 0;padding:0 var(--pad)}
.search-box label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px;color:#aaa79f}
.search-input{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.42);background:transparent;color:#fff;font-size:clamp(40px,6vw,94px);letter-spacing:-.05em;outline:0;padding:0 0 14px}
.search-results{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.search-result{border-top:1px solid rgba(255,255,255,.22);padding-top:12px}
.search-result small{display:block;color:#8f8d87;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}

/* HERO */
.hero{position:relative;min-height:100svh;background:#111;overflow:hidden;color:#fff}
.hero-media{position:absolute;inset:0}
.hero-media img{transform:scale(1.03);filter:saturate(.78) contrast(.98);transition:transform 1.6s var(--ease)}
body.ready .hero-media img{transform:scale(1)}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18) 58%,rgba(0,0,0,.45))}
.hero-copy{position:relative;z-index:2;min-height:100svh;padding:18vh var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:flex-end}
.hero-title{font-size:var(--display);line-height:.78;letter-spacing:-.078em;font-weight:400;margin:0;max-width:12ch}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line span{display:block;transform:translateY(110%);transition:transform .95s var(--ease)}
body.ready .hero-title .line:nth-child(1) span{transition-delay:.16s;transform:none}
body.ready .hero-title .line:nth-child(2) span{transition-delay:.26s;transform:none}
.hero-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:28px;margin-top:7vh;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.hero-bottom .scroll-note{justify-self:end}

/* STATEMENT */
.statement{padding:16vh var(--pad) 12vh;display:grid;grid-template-columns:minmax(120px,.55fr) 2.45fr;gap:40px}
.statement-text{font-size:clamp(42px,6.7vw,108px);line-height:.96;letter-spacing:-.06em;margin:0;max-width:16ch}
.statement-side{font-size:12px;line-height:1.55;max-width:24ch;align-self:start;padding-top:.5em}

/* PROJECT GRID */
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;padding:0 var(--pad) 18px;border-bottom:1px solid var(--line)}
.section-head h2{font-size:clamp(34px,4.3vw,72px);line-height:.95;letter-spacing:-.055em;font-weight:400;margin:0}
.section-head .meta{justify-self:end;text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.project-stack{padding:0 var(--pad)}
.project-row{display:grid;grid-template-columns:.72fr 2.28fr;gap:24px;padding:28px 0 36px;border-bottom:1px solid var(--line)}
.project-meta{display:flex;flex-direction:column;justify-content:space-between;min-height:210px}
.project-meta h3{font-size:clamp(28px,3.5vw,54px);line-height:.96;letter-spacing:-.05em;font-weight:400;margin:0;max-width:8ch}
.project-meta .sub{font-size:10px;text-transform:uppercase;letter-spacing:.12em;line-height:1.5;color:var(--muted)}
.project-image{height:min(70vw,820px);max-height:78vh;overflow:hidden;background:#ddd;position:relative}
.project-image img{transition:transform .8s var(--ease),filter .8s var(--ease);filter:saturate(.8)}
.project-row:hover .project-image img{transform:scale(1.025);filter:saturate(1)}
.project-index{position:absolute;left:14px;top:14px;background:rgba(242,241,237,.92);padding:6px 8px;font-size:10px;letter-spacing:.12em}
.view-all{display:flex;justify-content:space-between;align-items:center;padding:28px var(--pad) 90px;font-size:clamp(26px,3vw,48px);letter-spacing:-.04em}
.view-all span:last-child{font-size:12px;text-transform:uppercase;letter-spacing:.12em}

/* PRACTICE */
.dark-block{background:#181814;color:#f0eee8}
.practice{padding:12vh var(--pad)}
.practice-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:7vw;border-top:1px solid rgba(255,255,255,.25);padding-top:26px}
.practice h2{font-size:clamp(44px,7vw,110px);line-height:.88;letter-spacing:-.065em;font-weight:400;margin:0}
.practice-copy{display:grid;grid-template-columns:1fr 1fr;gap:40px;font-size:var(--body);line-height:1.48}
.practice-copy p{margin:0}
.practice-list{margin-top:12vh;border-top:1px solid rgba(255,255,255,.25)}
.practice-line{display:grid;grid-template-columns:80px 1fr auto;gap:22px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.practice-line .num{font-size:10px;letter-spacing:.12em;color:#8b8982}
.practice-line .title{font-size:clamp(23px,2.2vw,38px);letter-spacing:-.035em}
.practice-line .desc{font-size:12px;color:#aaa79f;max-width:34ch;text-align:right}

/* JOURNAL */
.journal{padding:12vh var(--pad)}
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 20px;margin-top:40px}
.journal-card{border-top:1px solid var(--line);padding-top:12px;min-height:310px;display:flex;flex-direction:column}
.journal-card .cat{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.journal-card h3{font-size:clamp(26px,2.6vw,42px);line-height:1.02;letter-spacing:-.047em;font-weight:400;margin:44px 0 18px}
.journal-card p{font-size:13px;line-height:1.45;color:var(--muted);max-width:38ch;margin:0 0 auto}
.journal-card .date{margin-top:36px;font-size:10px;text-transform:uppercase;letter-spacing:.12em}

/* CONTACT FOOTER */
.contact-band{padding:11vh var(--pad) 18px;border-top:1px solid var(--line)}
.contact-band .label{font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.contact-band .email{display:block;font-size:clamp(42px,8.5vw,138px);line-height:.9;letter-spacing:-.07em;margin:2vh 0 8vh;overflow-wrap:anywhere}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:30px;border-top:1px solid var(--line);padding-top:18px;font-size:11px;line-height:1.55}
.footer-grid .right{text-align:right}
.footer-grid a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.7px}

/* INNER PAGES */
.inner-hero{padding:24vh var(--pad) 8vh;min-height:66vh;display:flex;flex-direction:column;justify-content:flex-end}
.inner-hero .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:24px}
.inner-hero h1{font-size:var(--display);line-height:.8;letter-spacing:-.074em;font-weight:400;margin:0;max-width:11ch}
.inner-hero p{font-size:var(--body);line-height:1.45;max-width:42ch;margin:36px 0 0 33%}
.inner-media{height:72vh;min-height:520px;margin:0 var(--pad);overflow:hidden}
.inner-media img{filter:saturate(.78)}

/* SERVICES */
.services-list{padding:0 var(--pad) 12vh}
.service-item{border-top:1px solid var(--line)}
.service-head{width:100%;display:grid;grid-template-columns:85px 1fr auto;gap:22px;align-items:center;text-align:left;border:0;background:none;padding:22px 0;cursor:pointer}
.service-head .n{font-size:10px;letter-spacing:.14em;color:var(--muted)}
.service-head .t{font-size:clamp(30px,4vw,66px);letter-spacing:-.055em}
.service-head .plus{font-size:22px;font-weight:300;transition:transform .35s var(--ease)}
.service-item.open .plus{transform:rotate(45deg)}
.service-body{display:grid;grid-template-columns:85px 1fr 1fr;gap:22px;max-height:0;overflow:hidden;opacity:0;transition:max-height .65s var(--ease),opacity .4s var(--ease),padding .5s var(--ease)}
.service-item.open .service-body{max-height:700px;opacity:1;padding:0 0 42px}
.service-body p{font-size:16px;line-height:1.55;margin:0;max-width:44ch}
.service-body ul{margin:0;padding:0;list-style:none;font-size:12px;line-height:1.8;text-transform:uppercase;letter-spacing:.08em}

/* PROJECTS PAGE */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--pad) 28px}
.filter-btn{border:1px solid var(--line);border-radius:99px;background:transparent;padding:8px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.filter-btn.active,.filter-btn:hover{background:var(--ink);color:var(--paper)}
.projects-grid{padding:0 var(--pad) 12vh;display:grid;grid-template-columns:repeat(12,1fr);gap:40px 16px}
.project-card{grid-column:span 6}
.project-card.wide{grid-column:span 8}.project-card.narrow{grid-column:span 4}
.project-card .img{aspect-ratio:4/3;overflow:hidden;background:#ddd}.project-card.tall .img{aspect-ratio:3/4}
.project-card img{transition:transform .7s var(--ease);filter:saturate(.82)}
.project-card:hover img{transform:scale(1.025)}
.project-card .info{display:flex;justify-content:space-between;gap:16px;padding-top:10px;border-top:1px solid var(--line);margin-top:10px}
.project-card h3{font-size:20px;font-weight:400;letter-spacing:-.03em;margin:0}.project-card small{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:9px;text-align:right}
.hidden-card{display:none}

/* PROJECT DETAIL */
.project-detail-head{padding:24vh var(--pad) 5vh;display:grid;grid-template-columns:1.4fr .6fr;gap:50px;align-items:end}
.project-detail-head h1{font-size:clamp(58px,10vw,160px);line-height:.8;letter-spacing:-.078em;font-weight:400;margin:0}
.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;line-height:1.55}
.project-facts b{display:block;color:var(--muted);font-weight:400;margin-bottom:6px}
.project-gallery{padding:0 var(--pad) 12vh;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.project-gallery figure{margin:0;overflow:hidden}.project-gallery figure:nth-child(1){grid-column:1/-1;aspect-ratio:16/8}.project-gallery figure:nth-child(2){grid-column:1/8;aspect-ratio:4/5}.project-gallery figure:nth-child(3){grid-column:8/-1;aspect-ratio:4/5}.project-gallery figure:nth-child(4){grid-column:3/11;aspect-ratio:16/10}
.project-story{padding:4vh var(--pad) 12vh;display:grid;grid-template-columns:.7fr 1.3fr;gap:5vw;border-top:1px solid var(--line)}
.project-story h2{font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.05em;font-weight:400;margin:0}.project-story p{font-size:clamp(18px,1.5vw,25px);line-height:1.5;max-width:50ch;margin:0}

/* JOURNAL PAGE */
.journal-controls{padding:0 var(--pad) 30px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}.journal-search{border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 0;outline:0;font-size:16px;width:min(520px,100%)}
.article-list{padding:0 var(--pad) 12vh}.article-row{display:grid;grid-template-columns:1.1fr 2fr .5fr;gap:28px;border-top:1px solid var(--line);padding:18px 0 44px}.article-row .cat{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.article-row h2{font-size:clamp(30px,4vw,62px);line-height:.98;letter-spacing:-.052em;font-weight:400;margin:0}.article-row .date{text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.1em}

/* CONTACT PAGE */
.contact-page{padding:24vh var(--pad) 8vh;min-height:100vh}.contact-page h1{font-size:var(--display);line-height:.8;letter-spacing:-.075em;font-weight:400;margin:0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;margin-top:12vh;border-top:1px solid var(--line);padding-top:22px}.contact-grid h2{font-size:clamp(28px,3vw,48px);font-weight:400;letter-spacing:-.04em;margin:0 0 30px}.contact-grid p,.contact-grid a{font-size:16px;line-height:1.55}.contact-form{display:grid;gap:14px}.field{display:grid;gap:6px}.field label{font-size:9px;text-transform:uppercase;letter-spacing:.12em}.field input,.field textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 0;outline:0}.field textarea{min-height:110px;resize:vertical}.submit{margin-top:18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:13px 18px;border-radius:99px;width:max-content;cursor:pointer;text-transform:uppercase;font-size:10px;letter-spacing:.12em}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.in{opacity:1;transform:none}

@media (max-width: 980px){
  .desktop-only{display:none!important}.mobile-only{display:inline-flex}
  .site-header{grid-template-columns:1fr auto 1fr}.site-header .brand{font-size:11px}.site-header .left-mobile{justify-self:start}.site-header .right-mobile{justify-self:end}
  .statement{grid-template-columns:1fr;gap:42px}.statement-side{max-width:36ch}.statement-text{max-width:14ch}
  .project-row{grid-template-columns:1fr}.project-meta{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}.project-meta .sub{text-align:right}.project-image{height:65svh}
  .practice-grid{grid-template-columns:1fr}.practice-copy{grid-template-columns:1fr}.practice-line{grid-template-columns:50px 1fr}.practice-line .desc{grid-column:2;text-align:left}
  .journal-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid .right{grid-column:1/-1;text-align:left}
  .inner-hero p{margin-left:0}.inner-media{height:62vh;min-height:420px}
  .projects-grid{grid-template-columns:1fr 1fr}.project-card,.project-card.wide,.project-card.narrow{grid-column:auto}.project-card.tall .img,.project-card .img{aspect-ratio:4/3}
  .project-detail-head{grid-template-columns:1fr}.project-facts{max-width:520px}.project-story{grid-template-columns:1fr}
  .article-row{grid-template-columns:1fr}.article-row .date{text-align:left}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  :root{--pad:16px}
  .hero-copy{padding-top:22vh}.hero-title{font-size:clamp(58px,18vw,94px);line-height:.8}.hero-bottom{grid-template-columns:1fr 1fr}.hero-bottom > :nth-child(2){display:none}
  .menu-grid{grid-template-columns:1fr}.menu-meta{padding-top:40px}.menu-list a{font-size:clamp(42px,14vw,74px)}
  .search-results{grid-template-columns:1fr}
  .statement{padding-top:11vh}.statement-text{font-size:clamp(40px,13vw,70px)}
  .section-head{grid-template-columns:1fr}.section-head .meta{justify-self:start;text-align:left}
  .project-meta{grid-template-columns:1fr}.project-meta .sub{text-align:left}.project-image{height:54svh;min-height:360px}
  .practice-line{grid-template-columns:36px 1fr}.journal-grid{grid-template-columns:1fr}
  .contact-band{padding-top:8vh}.footer-grid{grid-template-columns:1fr}.footer-grid .right{grid-column:auto}
  .inner-hero{padding-top:22vh}.inner-hero h1{font-size:clamp(58px,18vw,100px)}.inner-media{margin:0;height:56vh;min-height:360px}
  .service-head{grid-template-columns:44px 1fr auto}.service-body{grid-template-columns:44px 1fr}.service-body>*:last-child{grid-column:2}
  .projects-grid{grid-template-columns:1fr}.project-card,.project-card.wide,.project-card.narrow{grid-column:auto}.filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:18px}
  .project-detail-head{padding-top:22vh}.project-detail-head h1{font-size:clamp(62px,19vw,104px)}.project-gallery{padding-left:0;padding-right:0;gap:6px}.project-gallery figure:nth-child(n){grid-column:1/-1;aspect-ratio:4/3}.project-story{padding-top:8vh}
  .journal-controls{grid-template-columns:1fr}.article-row{padding-bottom:34px}
  .contact-page{padding-top:22vh}.contact-page h1{font-size:clamp(62px,19vw,108px)}
}