:root{--ink:#303030;--paper:#f5f3ee;--muted:#8f9094}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,'Noto Sans Thai',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.nav{height:82px;position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:white}.brand{font-size:24px;font-weight:800;letter-spacing:-1.2px;line-height:.9}.brand span{display:block;font-size:9px;letter-spacing:4.6px;margin-top:8px;font-weight:500}.nav nav{display:flex;gap:32px;font-size:10px;letter-spacing:1.2px}.nav nav a:hover{opacity:.55}.menu{display:none;background:none;border:0;color:white}.hero{height:100svh;min-height:650px;position:relative;color:white;background:#252525;overflow:hidden}.hero>img,.statement>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero>img{animation:herozoom 1.8s ease-out both}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#0006,#0001 35%,#0009)}.hero-inner{position:absolute;left:5%;right:5%;bottom:10%;z-index:1}.eyebrow,.kicker,.section-label,.hero-index,.wide-caption,.statement-text>span{font-size:10px;letter-spacing:2px;font-weight:600}.eyebrow{display:flex;justify-content:space-between;margin-bottom:28px}.hero h1{font-size:clamp(64px,10.2vw,172px);line-height:.95;letter-spacing:-.085em;font-weight:600;margin:0}.hero h1 em,h2 i{font-weight:400;font-style:normal}.hero-foot{display:flex;justify-content:space-between;align-items:end;margin-top:32px}.hero-foot p{font-family:'Noto Sans Thai';font-size:15px;line-height:1.8;font-weight:300}.round{border:1px solid #fff8;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-size:25px}.hero-index{position:absolute;right:5%;bottom:24px;color:#fffa}.section{padding:140px 5%;display:grid;grid-template-columns:1fr 2fr;gap:7%}.section-label{padding-top:14px;color:#797b79}.section h2,.projects-head h2,.contact h2{font-size:clamp(48px,7.1vw,112px);line-height:1.02;letter-spacing:-.075em;font-weight:600;margin:0 0 60px}.kicker{margin:0 0 32px}.lead{font-size:clamp(21px,2.7vw,38px);line-height:1.5;font-weight:400;max-width:850px;font-family:'Noto Sans Thai'}.bodytext{font:300 16px/2 'Noto Sans Thai';max-width:680px;color:#676a68}.wide-image{height:75vh;min-height:480px;position:relative;overflow:hidden;background:#222}.wide-image img{width:100%;height:100%;object-fit:cover}.wide-caption{position:absolute;bottom:0;left:0;right:0;padding:25px 5%;display:flex;justify-content:space-between;color:white;background:linear-gradient(transparent,#0009)}.services{background:#292d2d;color:#f4f3ef}.services .section-label{color:#b3b6b5}.service-list{border-top:1px solid #ffffff40}.service{display:grid;grid-template-columns:55px 1fr 1fr;gap:12px;align-items:center;border-bottom:1px solid #ffffff40;padding:30px 0}.service span{font-size:13px;color:#aaa}.service h3{font-size:clamp(20px,2.1vw,31px);font-weight:500;letter-spacing:-1px;margin:0}.service p{font:300 13px/1.7 'Noto Sans Thai';color:#b9baba;margin:0}.projects-section{padding:130px 5%}.projects-head{display:flex;justify-content:space-between;align-items:end;gap:30px}.projects-head h2{margin:18px 0 50px}.projects-head p{font:300 12px/1.8 'Noto Sans Thai';color:#777;max-width:220px;margin-bottom:55px}.projects-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.project{border:0;padding:0;text-align:left;background:transparent;color:inherit;overflow:hidden}.project .photo{aspect-ratio:3/4;overflow:hidden;background:#ddd}.project img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.project:hover img{transform:scale(1.055)}.project .meta{display:flex;justify-content:space-between;gap:8px;margin:14px 0 6px;font-size:12px;font-weight:600}.project small{font-size:10px;color:#898989;letter-spacing:1px}.process{background:#e7e4dc}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.steps article{border-top:1px solid #999;padding-top:25px}.steps article span{font-size:10px;letter-spacing:1px}.steps h3{font:500 23px 'Noto Sans Thai';margin:35px 0 15px}.steps p{font:300 13px/1.9 'Noto Sans Thai';color:#686b69}.statement{height:75vh;min-height:500px;position:relative;color:white}.statement-text{position:absolute;bottom:11%;left:5%;z-index:1}.statement h2{font-size:clamp(50px,8vw,128px);line-height:1;letter-spacing:-.075em;margin:24px 0 0}.contact{background:#292d2d;color:#f6f4f0;padding:110px 5% 28px}.contact .section-label{color:#aeb2b1}.contact h2{margin:40px 0}.email{font-size:clamp(16px,2.5vw,36px);border-bottom:1px solid #aaa;padding-bottom:12px;display:inline-block;overflow-wrap:anywhere}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:110px 0}.contact-grid h3{font-size:11px;letter-spacing:2px}.contact-grid p{font:300 14px/2 'Noto Sans Thai';color:#c4c7c5}.contact footer{border-top:1px solid #ffffff44;padding-top:26px;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1px}dialog{width:min(950px,94vw);max-height:90vh;border:0;background:var(--paper);padding:28px;color:var(--ink)}dialog::backdrop{background:#101010dd}.close{position:sticky;top:0;float:right;border:0;background:var(--ink);color:white;border-radius:50%;width:40px;height:40px;z-index:2}#dialog-content h2{font-size:clamp(30px,5vw,65px);letter-spacing:-.06em}#dialog-content .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}#dialog-content img{width:100%;height:300px;object-fit:cover}.reveal{opacity:0;transform:translateY(35px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}@keyframes herozoom{from{transform:scale(1.07);opacity:.5}to{transform:scale(1);opacity:1}}@media(max-width:900px){.section{grid-template-columns:1fr;gap:35px;padding:85px 6%}.projects-grid{grid-template-columns:repeat(2,1fr)}.service{grid-template-columns:35px 1fr}.service p{grid-column:2}.nav{padding:0 6%}.nav nav{gap:14px}.hero-inner{left:6%;right:6%}}@media(max-width:650px){.nav{height:72px}.menu{display:block}.nav nav{display:none;position:absolute;top:72px;left:0;right:0;background:#303030;padding:25px 6%;flex-direction:column;gap:23px}.nav nav.open{display:flex}.hero{min-height:600px}.hero h1{font-size:clamp(52px,12vw,80px)}.eyebrow span{display:none}.hero-foot p{font-size:12px}.section h2,.projects-head h2,.contact h2{margin-bottom:35px}.projects-section{padding:85px 6%}.projects-grid{gap:12px}.projects-head{display:block}.projects-head p{margin-bottom:25px}.project .meta{font-size:10px}.steps{grid-template-columns:1fr}.wide-image{height:50vh;min-height:340px}.wide-caption span{display:none}.statement{height:60vh}.contact{padding:85px 6% 25px}.contact-grid{grid-template-columns:1fr;margin:65px 0}.contact footer{flex-wrap:wrap;font-size:9px}#dialog-content .gallery{grid-template-columns:1fr}#dialog-content img{height:auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
/* Hero typography refinement — position the headline on the clear timber wall,
   preserving the original photograph and avoiding the bed/furniture. */
.hero-inner{top:23%;bottom:auto;left:7%;right:7%;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .eyebrow{width:100%;margin-bottom:26px;text-align:left}
.hero h1{font-size:clamp(48px,6.6vw,106px);line-height:1.01;letter-spacing:-.075em;max-width:1200px;text-wrap:balance;text-shadow:0 2px 20px #0005}
.hero .hero-foot{position:absolute;top:calc(77svh - 23svh);left:-2.3%;right:-2.3%;width:auto;align-items:end;text-align:left;margin-top:0}
.hero .shade{background:linear-gradient(180deg,#0007 0%,#0003 23%,#0001 43%,#0000 62%,#0008 100%)}
@media(max-width:900px){.hero-inner{left:6%;right:6%;top:24%}.hero h1{font-size:clamp(44px,7.2vw,75px)}.hero .hero-foot{left:0;right:0;top:calc(76svh - 24svh)}}
@media(max-width:650px){.hero{min-height:600px}.hero>img{object-position:50% 50%}.hero-inner{top:24%;left:6%;right:6%}.hero .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:18px}.hero h1{font-size:clamp(39px,10.4vw,60px);letter-spacing:-.075em;line-height:1.05}.hero .hero-foot{top:calc(77svh - 24svh);left:0;right:0}.hero-foot p{font-size:12px;max-width:76%}.hero-index{font-size:8px}}

/* SIWAPAT v3 — identity-driven dark architectural palette */
:root{--ink:#262827;--paper:#eae9e5;--muted:#777a7b;--graphite:#303030;--silver:#a3a4a8}
body{font-weight:500}
.nav{height:94px;background:linear-gradient(180deg,rgba(18,19,19,.75),transparent)}
.nav .brand{display:flex;align-items:center;width:clamp(165px,19vw,245px);flex:none}
.nav .brand img{display:block;width:100%;height:auto;max-height:66px}
.nav nav a{font-size:11px;font-weight:700;letter-spacing:1.25px}
.nav nav .nav-line{border:1px solid #c9c9c9a8;padding:10px 16px;transition:background .25s,color .25s}
.nav nav .nav-line:hover{background:#f5f5f3;color:#252525;opacity:1}
.hero .shade{background:linear-gradient(180deg,#0a0b0bcc 0%,#0a0b0b55 30%,#0a0b0b00 55%,#0a0b0baf 100%)}
.hero h1{font-weight:700;text-shadow:0 3px 22px #0009}
.hero h1 em{font-weight:500}
.hero-foot p{font-weight:500;font-size:clamp(14px,1.25vw,17px);line-height:1.85;text-shadow:0 1px 8px #000c}
.eyebrow,.kicker,.section-label,.hero-index,.wide-caption,.statement-text>span{font-weight:700}
.section-label{color:#626566}
.lead{font-weight:500}
.bodytext{font-weight:500;color:#454a49;font-size:16px;line-height:2}
.services,.contact{background:#242625}
.services .section-label,.contact .section-label{color:#bcbec0}
.service h3{font-weight:700}
.service p{font-weight:500;font-size:14px;color:#e0e0df}
.projects-section{background:#e5e4e0}
.projects-head p{font-weight:500;font-size:13px;color:#4e5251}
.project small{color:#5b5e5d;font-weight:700}
.process{background:#d0d0cc}
.steps article{border-top-color:#7c7e7b}
.steps p{font-weight:500;font-size:14px;color:#3e4341}
.process-photo{width:100%;position:relative;margin:-12px 0 60px;max-height:490px;overflow:hidden;background:#242625}
.process-photo img{width:100%;height:490px;object-fit:cover;object-position:center 40%;display:block}
.process-photo p{position:absolute;left:22px;bottom:18px;color:#fff;background:#171918c9;padding:12px 16px;font:700 10px Manrope,sans-serif;letter-spacing:1.5px}
.contact-grid p{font-weight:500;color:#e0e0df}
.line-contact{display:flex;align-items:center;gap:22px;margin-top:32px}
.line-cta{display:inline-flex;align-items:center;gap:42px;border:1px solid #b6b7b6;padding:18px 23px;font:700 15px 'Noto Sans Thai',sans-serif;transition:background .2s,color .2s}
.line-cta:hover{background:#f3f3f0;color:#242625}
.line-cta span{font-size:22px}
.line-contact img{width:100px;height:100px;object-fit:contain;background:#fff;padding:5px}
@media(max-width:900px){.nav{height:82px}.nav .brand{width:170px}.nav nav{gap:12px}.nav nav a{font-size:9px}}
@media(max-width:650px){.nav{height:74px}.nav .brand{width:158px}.nav nav{top:74px;background:#242625}.nav nav a{font-size:12px}.hero h1{font-weight:700}.hero-foot p{font-size:13px}.bodytext{font-size:15px}.process-photo{margin:0 0 35px}.process-photo img{height:350px}.line-contact{align-items:flex-start;flex-direction:column}.line-contact img{width:112px;height:112px}}

/* SIWAPAT refinement — readable editorial layout, original hero photography retained */
.hero-inner{top:22%;left:7%;right:7%}
.hero h1{font-size:clamp(48px,6.25vw,104px);max-width:1080px;line-height:1.04;letter-spacing:-.065em}
.hero .hero-foot{top:calc(76svh - 22svh)}
.hero .eyebrow{color:#f5f3ee}
.hero-foot p{font-weight:600}
.bodytext,.service p,.steps p,.contact-grid p{font-weight:500}
.project:focus-visible,.nav a:focus-visible,.line-cta:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(max-width:900px){.hero-inner{top:23%}.hero .hero-foot{top:calc(76svh - 23svh)}}
@media(max-width:650px){
 .hero{height:100svh;min-height:620px}
 .hero>img{object-position:52% center}
 .hero-inner{top:22%;left:6%;right:6%}
 .hero h1{font-size:clamp(39px,10vw,58px);line-height:1.07;letter-spacing:-.065em;text-wrap:balance}
 .hero .hero-foot{top:calc(78svh - 22svh)}
 .hero-foot p{font-size:13px;line-height:1.8;font-weight:600}
 .hero .shade{background:linear-gradient(180deg,#101111d9 0%,#10111170 34%,#10111118 57%,#101111d0 100%)}
 .section h2,.projects-head h2,.contact h2{overflow-wrap:break-word}
}

/* SIWAPAT | Mobile editorial hero — left-aligned, restrained typography */
@media (max-width:650px) {
  .hero { height:100svh; min-height:620px; }
  .hero > img { object-position:52% center; }
  .hero-inner {
    position:absolute; top:20%; bottom:auto;
    left:6%; right:6%; width:auto;
    display:block; text-align:left; align-items:initial;
  }
  .hero .eyebrow {
    display:block; width:auto; margin:0 0 22px;
    font-size:9px; letter-spacing:.15em; line-height:1.5;
    text-align:left; font-weight:700;
  }
  .hero .eyebrow span { display:none; }
  .hero h1 {
    max-width:100%; margin:0;
    font-size:clamp(38px,9.3vw,56px);
    line-height:1.08; letter-spacing:-.065em;
    font-weight:700; text-align:left;
    text-wrap:initial; overflow-wrap:normal;
    text-shadow:0 2px 16px rgba(0,0,0,.42);
  }
  .hero h1 em { font-weight:500; }
  .hero .hero-foot {
    position:absolute;
    top:calc(73svh - 20svh);
    left:0; right:0; width:100%; margin:0;
    display:flex; justify-content:space-between;
    align-items:flex-end; gap:12px; text-align:left;
  }
  .hero-foot p {
    max-width:calc(100% - 76px); margin:0;
    font-size:13px; line-height:1.85; font-weight:600;
  }
  .hero .round { flex:0 0 52px; width:52px; height:52px; }
  .hero-index { right:6%; bottom:20px; }
  .hero .shade { background:linear-gradient(180deg,rgba(12,12,12,.77) 0%,rgba(12,12,12,.34) 37%,rgba(12,12,12,.08) 57%,rgba(12,12,12,.78) 100%); }
}
@media(max-width:370px){.hero h1{font-size:clamp(34px,9vw,42px)}.hero-foot p{font-size:12px}}
/* SIWAPAT — Mobile Editorial V4 */
@media (max-width: 767px) {

  /* Headline: Editorial Typography */
  .hero h1 {
    text-align: left;
    letter-spacing: -0.045em;
    line-height: 1.06;
    font-weight: 600;
    text-wrap: balance;
  }

  /* Thai Description */
  .hero .hero-description {
    position: relative;
    transform: translateY(-28px);
    font-weight: 500;
    line-height: 1.65;
  }

  /* Mobile Navigation */
  .menu-toggle {
    font-size: 13px;
    letter-spacing: 0.08em;
    font-weight: 500;
  }

  /* Hero Arrow */
  .hero-arrow {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 50%;
    box-shadow: none;
  }
}/* SIWAPAT — Mobile Editorial V4.1 */
@media (max-width: 650px) {

  /* Editorial Headline */
  .hero h1 {
    text-align: left;
    letter-spacing: -0.045em;
    line-height: 1.08;
    font-weight: 600;
  }

  /* Thai Description */
  .hero .hero-foot {
    transform: translateY(-35px);
  }

  .hero .hero-foot p {
    font-weight: 600;
    line-height: 1.65;
    font-size: 14px;
  }

  /* Navigation */
  .menu {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  /* Circular Arrow */
  .hero .round {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: none;
  }/* MOBILE HERO — EDITORIAL LAYOUT */
@media (max-width: 650px) {

  .hero-inner {
    top: 18% !important;
    left: 6% !important;
    right: 6% !important;
  }

  .hero h1 {
    margin-bottom: 24px !important;
    text-align: left !important;
  }

  .hero .hero-description {
    position: static !important;
    transform: none !important;
    margin-top: 0 !important;
    max-width: 320px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
  }

  .hero .hero-foot {
    top: auto !important;
    bottom: 12% !important;
  }

}
}

/* SIWAPAT — Mobile Editorial Hero */
@media (max-width: 650px) {

  .hero .hero-inner {
    top: 22% !important;
    left: 6% !important;
    right: 6% !important;
    text-align: left !important;
  }

  .hero h1 {
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.055em;
    margin-bottom: 24px;
    text-align: left;
  }

  .hero .hero-foot {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: block;
    margin-top: 0;
  }

  .hero .hero-foot p {
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    max-width: 320px;
    margin: 0;
  }

  .hero .hero-foot .round {
    display: none;
  }

}

/* SIWAPAT — Mobile Editorial Sections */
@media (max-width: 650px) {
  .section,
  .services,
  .projects-section,
  .process,
  .contact {
    padding-left: 6%;
    padding-right: 6%;
  }

  .section-label {
    font-size: 10px;
    letter-spacing: .16em;
    line-height: 1.6;
  }

  .section h2,
  .projects-head h2,
  .process h2,
  .contact h2 {
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.12;
    letter-spacing: -.045em;
    text-align: left;
    overflow-wrap: break-word;
  }

  .service-list .service h3,
  .steps h3 {
    line-height: 1.25;
    letter-spacing: -.02em;
  }

  .service-list .service p,
  .steps p,
  .projects-head p,
  .contact-grid p {
    line-height: 1.8;
    overflow-wrap: break-word;
  }

  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact .email {
    overflow-wrap: anywhere;
  }
}

/* =========================================
   SIWAPAT — MOBILE FINAL POLISH
   Selected Work / Approach / Contact
   Desktop remains unchanged
========================================= */

@media screen and (max-width: 650px) {

  /* 03 — SELECTED PROJECTS */
  .projects-head {
    margin-bottom: 28px;
  }

  .projects-head p {
    line-height: 1.75;
  }

  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .projects-grid .project {
    min-width: 0;
  }

  /* 04 — OUR APPROACH */
  .process .steps article {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .process .steps h3 {
    margin-bottom: 12px;
  }

  .process .steps p {
    line-height: 1.7;
  }

  /* 05 — CONTACT */
  .contact .email {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .contact .line-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .contact .line-contact img {
    width: 110px;
    height: 110px;
    object-fit: contain;
  }

  .contact-grid {
    margin-top: 55px;
    row-gap: 36px;
  }

  .contact-grid p {
    line-height: 1.75;
  }

}