:root{--blue:#3d36d8;--orange:#ff9736;--ink:#111;--paper:#fff;--line:#d8d8d8;--muted:#666}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans Thai",sans-serif;font-size:16px;line-height:1.55}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}.shell{width:min(100% - 40px,1440px);margin:auto}.site-head{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:.78rem;font-weight:700;letter-spacing:.14em}.brand img{width:48px;height:58px;object-fit:contain}.nav{display:flex;gap:34px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.intro{min-height:68vh;display:grid;grid-template-columns:1.45fr .55fr;gap:6vw;align-items:center;padding:8vh 0}.eyebrow{color:var(--blue);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase}.intro h1{font-size:clamp(3.1rem,8vw,8.8rem);line-height:.83;letter-spacing:-.07em;margin:.25em 0}.intro h1 span{color:var(--orange)}.intro-copy{max-width:520px;font-size:clamp(1.05rem,1.45vw,1.4rem)}.intro-side{align-self:end;padding-bottom:9vh}.marker{width:54px;height:54px;border-radius:50%;background:var(--orange);margin-bottom:26px}.project-section{border-top:1px solid var(--line);padding:34px 0 100px}.section-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase}.project-card{display:grid;grid-template-columns:1fr 1.45fr;min-height:520px;background:var(--blue);color:#fff;overflow:hidden}.project-symbol{padding:clamp(30px,5vw,76px);display:flex;flex-direction:column;justify-content:space-between}.project-symbol strong{font-size:clamp(5rem,13vw,12rem);line-height:.8;letter-spacing:-.1em}.project-meta{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}.project-image{position:relative;overflow:hidden}.project-image img{height:100%;object-fit:cover;transition:transform .7s ease}.project-card:hover .project-image img{transform:scale(1.025)}.project-image:after{content:"View project  ↗";position:absolute;right:24px;bottom:24px;background:var(--orange);color:#111;padding:12px 16px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.about{display:grid;grid-template-columns:1fr 1fr;gap:10vw;padding:110px 0;border-top:1px solid var(--line)}.about h2{font-size:clamp(2.7rem,5vw,5.5rem);line-height:.95;letter-spacing:-.055em;margin:0}.about p{font-size:1.15rem;margin:0;max-width:610px}.footer{border-top:1px solid var(--line);padding:30px 0 42px;display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.project-head{padding:60px 0 50px}.back{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase}.project-title{display:grid;grid-template-columns:1.25fr .75fr;gap:6vw;align-items:end;margin-top:85px}.project-title h1{font-size:clamp(3.3rem,8vw,8rem);letter-spacing:-.065em;line-height:.87;margin:0}.project-title h1 span{color:var(--orange)}.facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:18px}.fact small{display:block;color:var(--muted);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase}.fact strong{font-size:.95rem;font-weight:500}.hero-project{height:min(76vw,860px);object-fit:cover}.story{display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;padding:100px 0}.story h2{font-size:clamp(2rem,4vw,4rem);line-height:1;margin:0}.story-copy{max-width:760px}.story-copy p{font-size:1.1rem;margin-top:0}.points{display:grid;gap:20px;margin-top:42px}.point{display:grid;grid-template-columns:130px 1fr;border-top:1px solid var(--line);padding-top:18px}.point b{color:var(--blue)}.keywords{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}.keywords span{border:1px solid var(--blue);color:var(--blue);border-radius:100px;padding:8px 15px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding-bottom:100px}.gallery figure{margin:0;grid-column:span 6}.gallery figure.wide{grid-column:span 12}.gallery img{height:100%;min-height:380px;object-fit:cover}.gallery figcaption{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;color:var(--muted)}@media(max-width:800px){.shell{width:min(100% - 24px,1440px)}.site-head{height:78px}.brand span{display:none}.nav{gap:17px;font-size:.66rem}.intro{grid-template-columns:1fr;min-height:auto;padding:72px 0}.intro-side{padding:0}.project-card{grid-template-columns:1fr;min-height:auto}.project-symbol{min-height:300px}.project-image{height:420px}.about,.story,.project-title{grid-template-columns:1fr}.about{padding:72px 0;gap:36px}.project-title{margin-top:52px;gap:42px}.hero-project{height:68vh}.story{padding:72px 0;gap:40px}.point{grid-template-columns:1fr;gap:8px}.gallery{gap:8px}.gallery figure{grid-column:span 12}.gallery img{min-height:0}.footer{gap:20px;flex-direction:column}}

.gallery .project-drawing img{height:auto;min-height:0;object-fit:contain}

.project-card+.project-card{margin-top:24px}.timber-card{background:var(--orange);color:var(--ink)}.timber-card .project-image:after{background:var(--blue);color:white}.timber-card .project-symbol strong{font-size:clamp(4rem,10vw,9rem)}.timber-project .gallery img,.timber-hero{height:auto;min-height:0;object-fit:contain}.timber-project .gallery{row-gap:32px}.english-copy{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}

/* Project index: quiet typography and paired project labels / photographs. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.portfolio-index .site-head{height:88px;border:0;width:min(100% - 64px,1120px)}
.portfolio-index .brand img{width:32px;height:40px}.portfolio-index .brand span{font-size:14px;letter-spacing:.04em}.portfolio-index .nav{gap:54px;font-size:14px;letter-spacing:.03em}.portfolio-index .nav a:hover{color:var(--blue)}
.project-list{width:min(100% - 64px,940px);margin:30px auto 100px;display:grid;gap:36px}
.project-row{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
.project-label{text-align:right;padding-top:0}.project-icon{display:inline-flex;width:42px;height:42px;background:var(--blue);color:white;align-items:center;justify-content:center;font-size:17px;letter-spacing:-1px;font-weight:700;margin-bottom:16px}.office-icon{background:var(--orange);color:#111}
.project-label h2{font-size:16px;line-height:1.4;font-weight:400;margin:0 0 5px}.project-label p{font-size:14px;line-height:1.5;color:#666;text-transform:uppercase;margin:0 0 5px}.project-label small{display:block;font-size:14px;color:#666}.project-row>img{width:100%;height:auto}.project-row:hover h2{color:var(--blue)}a:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.portfolio-index .about{width:min(100% - 64px,940px);grid-template-columns:250px minmax(0,1fr);gap:34px;padding:48px 0 64px}.portfolio-index .about h2{font-size:16px;line-height:1.5;font-weight:400;letter-spacing:0;text-align:right}.portfolio-index .about p{font-size:16px;line-height:1.85}.portfolio-index .footer{font-size:14px;letter-spacing:.02em;width:min(100% - 64px,1120px)}
@media(max-width:800px){.portfolio-index .site-head{width:calc(100% - 32px);height:76px}.portfolio-index .nav{gap:20px}.project-list{width:calc(100% - 32px);margin-top:24px;gap:40px}.project-row{grid-template-columns:180px minmax(0,1fr);gap:22px}.portfolio-index .about{width:calc(100% - 32px);grid-template-columns:180px minmax(0,1fr);gap:22px}.portfolio-index .footer{width:calc(100% - 32px)}}
@media(max-width:560px){.project-row{grid-template-columns:1fr;gap:16px}.project-label{text-align:left;display:grid;grid-template-columns:42px 1fr;column-gap:14px}.project-icon{grid-row:1/4;margin:0}.project-label h2,.project-label p,.project-label small{grid-column:2}.portfolio-index .about{grid-template-columns:1fr;gap:16px}.portfolio-index .about h2{text-align:left}.portfolio-index .nav{gap:16px}.project-list{margin-bottom:64px}}

.amz-project .gallery img,.amz-hero{height:auto;min-height:0;object-fit:contain}.amz-project .gallery{row-gap:32px}.amz-project .points{margin-top:0}.amz-icon{font-size:14px;letter-spacing:-.5px}

.portfolio-index .contact{width:min(100% - 64px,940px);display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;border-top:1px solid var(--line);padding:48px 0 64px}.contact h2{font-size:16px;font-weight:400;text-align:right;margin:0}.contact address{font-style:normal;font-size:16px}.contact address div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;margin-bottom:14px}.contact address div>span:first-child{color:#666}.contact a{overflow-wrap:anywhere}.contact a:hover{color:var(--blue)}@media(max-width:800px){.portfolio-index .contact{width:calc(100% - 32px);grid-template-columns:180px minmax(0,1fr);gap:22px}.contact address div{grid-template-columns:1fr;gap:4px}}@media(max-width:560px){.portfolio-index .contact{grid-template-columns:1fr;gap:20px}.contact h2{text-align:left}}

/* Shared masthead with the studio's original statement. */
.site-head.shell,.portfolio-index .site-head{height:auto;min-height:180px;padding-top:28px;padding-bottom:28px;align-items:flex-start;gap:32px}
.site-head .brand{align-items:center;gap:22px;min-width:0}.site-head .brand img,.portfolio-index .brand img{width:60px;height:74px;flex-shrink:0}
.site-head .brand .brand-message{display:flex;flex-direction:column;gap:12px}.site-head .brand .brand-name{display:block;font-size:14px;line-height:1.2;letter-spacing:.12em;font-weight:400}
.site-head .brand .brand-tagline{display:block;font-size:clamp(40px,5.2vw,72px);font-weight:700;line-height:.92;letter-spacing:-.055em}.site-head .brand .people-word{display:inline;color:var(--orange);font-size:inherit;letter-spacing:inherit}.site-head .nav{padding-top:8px}
@media(max-width:800px){.site-head.shell,.portfolio-index .site-head{min-height:160px;gap:24px;flex-wrap:wrap}.site-head .brand img,.portfolio-index .brand img{width:44px;height:54px}.site-head .brand{gap:16px}.site-head .brand .brand-name{font-size:14px}.site-head .nav{font-size:14px;gap:20px}}
@media(max-width:560px){.site-head.shell,.portfolio-index .site-head{padding-top:24px;padding-bottom:24px;gap:26px}.site-head .brand{width:100%}.site-head .nav{padding:0}.site-head .brand .brand-tagline{font-size:48px}}

.site-head .brand{--tag-size:clamp(40px,5.2vw,72px)}.site-head .brand img,.portfolio-index .brand img{height:calc(var(--tag-size)*1.84);width:calc(var(--tag-size)*1.5)}
.project-list{max-width:820px}.project-row{grid-template-columns:230px minmax(0,1fr);gap:30px}.project-thumbnail{display:block;aspect-ratio:16/9;overflow:hidden;background:#f4f4f4}.project-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.65,.3,1)}
@media(hover:hover){.project-row:hover .project-thumbnail img{transform:scale(1.065)}}.project-row:focus-visible .project-thumbnail img{transform:scale(1.065)}
body{isolation:isolate}.orange-orb{position:fixed;top:0;left:0;width:46px;height:46px;border-radius:50%;background:var(--orange);opacity:0;pointer-events:none;z-index:-1;will-change:transform}.site-head{position:relative}
@media(max-width:800px){.project-row{grid-template-columns:180px minmax(0,1fr);gap:22px}.orange-orb{width:30px;height:30px}}
@media(max-width:560px){.site-head .brand{--tag-size:48px}.project-row{grid-template-columns:1fr;gap:16px}}
@media(prefers-reduced-motion:reduce){.orange-orb{display:none}.project-thumbnail img{transition:none}.project-row:hover .project-thumbnail img,.project-row:focus-visible .project-thumbnail img{transform:none}}
.orange-orb{z-index:3;background:#ff9a33;will-change:transform;transform-origin:center}.logo-dot-mask{position:fixed;border-radius:50%;background:white;pointer-events:none;z-index:2;display:none}@media(prefers-reduced-motion:reduce){.logo-dot-mask,.orange-orb{display:none!important}}

body{--motion-rail:48px;padding-left:var(--motion-rail)}.site-head .brand img,.portfolio-index .brand img{height:calc(var(--tag-size)*2.208);width:calc(var(--tag-size)*1.8)}@media(max-width:560px){body{--motion-rail:32px}.site-head .brand .brand-tagline{font-size:clamp(32px,9vw,48px)}.site-head .brand{--tag-size:clamp(32px,9vw,48px)}}
/* Center each project file in its equal 16:9 frame. */
body{padding-left:0}.project-list{margin-inline:auto}.project-row>.project-thumbnail{justify-self:center}.project-thumbnail img{object-position:50% 50%}

/* Final scale tuning */
.site-head .brand .brand-tagline{font-size:clamp(34px,4.42vw,61px)}
.site-head .brand{--tag-size:clamp(34px,4.42vw,61px)}
.project-list{max-width:738px}
.project-row{max-width:738px;margin-inline:auto}
@media(max-width:560px){.site-head .brand .brand-tagline{font-size:clamp(27px,7.65vw,41px)}.site-head .brand{--tag-size:clamp(27px,7.65vw,41px)}}

@media(min-width:801px){.portfolio-index .project-row{transform:translateX(-7.5vw)}}
@media(min-width:561px) and (max-width:800px){.portfolio-index .project-row{transform:translateX(-4vw)}}
/* Centered project column matching the reference layout. */
.portfolio-index .project-list{max-width:738px;margin-left:auto;margin-right:auto;transform:none}
.portfolio-index .project-row{transform:none!important}
@media(max-width:800px){.portfolio-index .project-list{max-width:calc(100% - 32px);margin-left:auto;margin-right:auto}.portfolio-index .project-row{transform:none!important}}

.logo-jelly{animation:logoJelly 3.3s cubic-bezier(.18,.8,.28,1) both;transform-origin:23.5% 7.1%}@keyframes logoJelly{0%{transform:scale(1,1)}8%{transform:scale(1.24,.76)}18%{transform:scale(.91,1.10)}30%{transform:scale(1.10,.93)}44%{transform:scale(.96,1.04)}60%{transform:scale(1.035,.98)}78%{transform:scale(.988,1.012)}100%{transform:scale(1,1)}}
/* Reference spacing: a full-width rule, then a quiet gap before centered projects. */
.portfolio-index .site-head{width:calc(100% - 160px);max-width:none;border-bottom:1px solid #202020;padding-bottom:54px}
.portfolio-index .project-list{margin-top:108px}
@media(max-width:800px){.portfolio-index .site-head{width:calc(100% - 40px);padding-bottom:36px}.portfolio-index .project-list{margin-top:64px}}
@media(prefers-reduced-motion:reduce){.portfolio-index .site-head{border-bottom-color:#202020}}
/* Enlarge the complete project frame without cropping further into the image. */
.project-thumbnail{transform:scale(1);transform-origin:center;transition:transform .35s ease;position:relative;z-index:0}
.project-thumbnail img{transition:none}
.project-row:hover .project-thumbnail img,.project-row:focus-visible .project-thumbnail img{transform:none}
@media(hover:hover){.project-thumbnail:hover{transform:scale(1.10);z-index:1}}
.project-row:focus-visible .project-thumbnail{transform:scale(1.10);z-index:1}
@media(prefers-reduced-motion:reduce){.project-thumbnail{transition:none}}
/* Scale each project as one unit, including its label and photograph. */
.portfolio-index .project-row{transform:scale(1)!important;transform-origin:center;transition:transform .35s ease;position:relative}
.portfolio-index .project-thumbnail,.portfolio-index .project-row:hover .project-thumbnail,.portfolio-index .project-row:focus-visible .project-thumbnail{transform:none;transition:none}
@media(hover:hover){.portfolio-index .project-row:hover{transform:scale(1.08)!important;z-index:1}}
.portfolio-index .project-row:focus-visible{transform:scale(1.08)!important;z-index:1}
@media(prefers-reduced-motion:reduce){.portfolio-index .project-row{transition:none}}
/* Consistent project badges across the portfolio. */
.project-label .project-icon{background:var(--blue);color:#fff}