:root{--ink:#16181B;--soft:#5A5D63;--stone:#EEECE8;--paper:#FAF9F7;--gold:#C2A574;--line:#D9D5CD}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope','IBM Plex Sans Thai',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
html[lang=th] body{font-family:'IBM Plex Sans Thai','Manrope',system-ui,sans-serif}
a{color:inherit}
a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
img{display:block;max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
h1,h2,h3,h4{margin:0;font-family:'Cormorant Garamond','IBM Plex Sans Thai',Georgia,serif;font-weight:500}
html[lang=th] h1,html[lang=th] h2,html[lang=th] h3,html[lang=th] h4{font-family:'Cormorant Garamond','Noto Serif Thai',Georgia,serif}
.dot{display:inline-block;border-radius:50%;flex:none}
header{position:sticky;top:0;z-index:5;background:rgba(250,249,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding-top:20px;padding-bottom:20px}
.brand{text-decoration:none;flex-grow:1;display:flex;align-items:baseline;gap:14px}
.brand b{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;letter-spacing:.04em}
.brand span{font-size:13px;color:var(--soft);letter-spacing:.06em}
nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:14px}
nav a{text-decoration:none;padding:10px 0;color:var(--soft)}
nav a:hover{color:var(--ink)}
.lang{font-size:14px;text-decoration:none;color:var(--ink);padding:10px 2px;border-bottom:1px solid var(--gold)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:400;font-size:15px;padding:14px 26px;border-radius:999px;border:1px solid currentColor;transition:color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.7,.2,1);isolation:isolate}
/* champagne fill that rises from below on hover */
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--gold);transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn::after{content:'';width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover,.btn:focus-visible{color:var(--ink);border-color:var(--gold);transform:translateY(-2px)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover::after{transform:translateX(3px) rotate(45deg)}
.btn.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.solid:hover,.btn.solid:focus-visible{color:var(--ink);border-color:var(--gold)}
header .btn::after{display:none}
.hero{padding-top:88px}
.hero-top{display:flex;flex-wrap:wrap;gap:28px 72px;align-items:flex-end}
.hero h1{flex:1 1 680px;min-width:0;font-size:clamp(46px,7vw,92px);line-height:1;letter-spacing:-.01em}
html[lang=th] .hero h1{font-size:clamp(40px,5.6vw,76px);line-height:1.2}
.hero p{flex:1 1 320px;min-width:0;margin:0;font-size:18px;line-height:1.75;color:var(--soft)}
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:64px}
.type{position:relative;display:block;text-decoration:none;color:#fff;border-radius:2px;overflow:hidden}
.type img{width:100%;height:460px;object-fit:cover;opacity:.92;transition:transform .8s ease}
.type:hover img{transform:scale(1.03)}
.type-bar{display:flex;justify-content:space-between;align-items:baseline;padding:20px 22px;border-top:1px solid rgba(255,255,255,.35)}
.type-name{font-family:'Cormorant Garamond','Noto Serif Thai',serif;font-size:28px;font-weight:500}
.type-count{font-size:14px;color:#fff;opacity:.8}
section{scroll-margin-top:90px}
.luka{margin-top:120px;background:#6F4A56;color:#fff;display:flex;flex-wrap:wrap;border-radius:2px;overflow:hidden}
.luka-text{flex:1 1 380px;min-width:0;padding:64px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.kicker{font-size:14px;color:#F1D9A8;letter-spacing:.04em}
.luka h2{font-size:56px;line-height:1.02;margin:16px 0 22px}
.luka p{margin:0;font-size:17px;line-height:1.75;color:#F3E4EB}
.luka .btn{color:#fff;align-self:flex-start}
.luka-imgs{flex:2 1 640px;min-width:0;display:grid;grid-template-columns:3fr 2fr}
.luka-imgs img{width:100%;height:600px;object-fit:cover}
.block{padding-top:128px}
.head{display:flex;flex-wrap:wrap;gap:16px 48px;align-items:baseline;justify-content:space-between;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:22px}
.head h2{font-size:clamp(38px,5vw,60px);line-height:1.1}
.note{margin:0 0 28px;font-size:14px;color:var(--soft)}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--soft)}
.legend span{display:flex;align-items:center;gap:8px}
.districts{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px}
.district{background:var(--stone);padding:30px 32px;border-radius:2px}
.district h3{font-size:30px;margin-bottom:18px}
.district ul,.col ul{list-style:none;margin:0;padding:0}
.district li{position:relative;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);font-size:15px;padding-left:12px;margin:0 -12px;border-radius:2px;transition:background-color .35s ease}
.district li:hover,.district li:focus-within{background:color-mix(in srgb,var(--c) 9%,transparent)}
.district li a{flex:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px 11px 0;text-decoration:none}
/* gold hairline that draws in under the name */
.t{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;padding-bottom:2px;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
a:hover .t,a:focus-visible .t{background-size:100% 1px}
/* round arrow badge: outline at rest, fills with the property colour on hover */
.go{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);font-size:12px;color:var(--soft);background:#fff;transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s,color .3s,border-color .3s}
a:hover .go,a:focus-visible .go{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:#fff;transform:rotate(45deg) scale(1.08)}
.district .dot{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.district li:hover .dot{transform:scale(1.5)}
.pipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:12px}
.pipe{display:flex;flex-wrap:wrap;border:1px solid var(--ink);border-radius:2px;overflow:hidden;text-decoration:none}
.pipe img{flex:1 1 300px;min-width:0;height:340px;object-fit:cover}
.pipe-body{flex:1 1 320px;padding:36px;display:flex;flex-direction:column;gap:12px}
.pipe-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px}
.pipe h3{font-size:44px}
.stage{font-size:13px;border:1px solid var(--gold);color:#7A6038;padding:5px 12px;border-radius:999px}
.pipe p{margin:0;font-size:16px;line-height:1.75;color:var(--soft)}
.pipe .where{color:var(--ink)}
.pipe .more{margin-top:auto;font-size:15px;color:var(--ink);align-self:flex-start;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/100% 1px;padding-bottom:3px;transition:background-size .45s}
.pipe:hover .more{background-size:100% 2px}
.pipe{transition:box-shadow .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.pipe:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(22,24,27,.45)}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:12px}
.svc{padding:60px 56px;border-radius:2px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.svc h2{font-size:44px;line-height:1.1}
.svc p{margin:0;font-size:17px;line-height:1.75}
.careers{padding-top:128px;padding-bottom:128px;display:flex;flex-wrap:wrap;gap:24px 64px;align-items:flex-end;justify-content:space-between}
.careers h2{flex:1 1 600px;min-width:0;font-size:clamp(34px,4.4vw,54px);line-height:1.12}
footer{background:#121417;color:#BFC1C4}
.foot{padding:80px 40px 36px;display:flex;flex-direction:column;gap:56px}
.foot-top{display:flex;flex-wrap:wrap;gap:32px 72px;font-size:15px;line-height:1.9}
.foot-top b{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:34px;color:#fff;line-height:1.2}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px 40px;border-top:1px solid #2C2F34;padding-top:40px}
.col h4{display:flex;align-items:center;gap:10px;font-size:21px;color:#fff;margin-bottom:12px}
.col li{font-size:14px;line-height:1.95}
.col a{text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;padding-bottom:1px;transition:background-size .4s,color .3s}
.col a:hover,.col a:focus-visible{color:#fff;background-size:100% 1px}
.legal{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;color:#7D8086;border-top:1px solid #2C2F34;padding-top:24px}
.legal a{color:#BFC1C4}
/* Old City page */
.oc-hero{padding-top:72px}
.crumb{font-size:14px;color:var(--soft);text-decoration:none}
.oc-hero h1{font-size:clamp(56px,9vw,120px);line-height:1;margin:18px 0 22px}
.oc-hero p{max-width:640px;margin:0;font-size:19px;line-height:1.75;color:var(--soft)}
.oc-cover{margin-top:56px;width:100%;height:min(70vh,680px);object-fit:cover;border-radius:2px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:48px 72px;align-items:start}
.two p{margin:0;font-size:17px;line-height:1.8;color:var(--soft)}
.dist{list-style:none;margin:28px 0 0;padding:0}
.dist li{display:flex;gap:20px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);font-size:16px}
.dist b{flex:0 0 96px;font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500;color:var(--ink)}
.small{font-size:13px;color:var(--soft);margin-top:12px}
.map img{width:100%;border-radius:2px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px}
.gallery img{width:100%;height:420px;object-fit:cover;border-radius:2px}
.oc-cta{margin-top:128px;margin-bottom:128px;background:var(--ink);color:#fff;padding:64px 56px;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;border-radius:2px}
.oc-cta h2{font-size:clamp(34px,4.4vw,52px)}
.oc-cta .btn{color:#fff}
/* Property pages */
.pd-hero{padding-top:64px}
.pd-type{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--soft);text-decoration:none}
.pd-hero h1{font-size:clamp(48px,7.5vw,104px);line-height:1.02;margin:18px 0 0}
.pd-bar{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.pd-bar p{margin:0;font-size:15px;color:var(--soft)}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px}
.pd-cover{margin-top:40px;width:100%;height:min(72vh,720px);object-fit:cover;border-radius:2px;cursor:zoom-in}
.pd-body{font-size:17px;line-height:1.85;color:var(--soft);max-width:760px}
.pd-body p{margin:0 0 1em}.pd-body a{color:var(--ink)}
.pd-body img{height:auto;border-radius:2px}
.pd-body h1,.pd-body h2,.pd-body h3{color:var(--ink);margin:1.2em 0 .5em;font-size:30px}
.pd-body input[type=text],.pd-body input[type=email],.pd-body input[type=tel],.pd-body input[type=number],.pd-body select,.pd-body textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:12px 14px;margin:4px 0 14px}
.pd-body input:focus,.pd-body select:focus,.pd-body textarea:focus{outline:1px solid var(--gold);border-color:var(--gold)}
.pd-body input[type=submit],.pd-body button[type=submit]{font:inherit;font-size:15px;background:var(--ink);color:#fff;border:0;border-radius:2px;padding:14px 28px;cursor:pointer}
.pd-body .wpcf7-response-output{margin:12px 0 0;font-size:14px}
.pd-body .wpcf7-not-valid-tip{color:#9B3B3B;font-size:13px}
.pd-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.pd-grid button{all:unset;cursor:zoom-in;display:block;overflow:hidden;border-radius:2px;grid-column:span 4}
.pd-grid button:nth-child(5n+1){grid-column:span 8;grid-row:span 2}
.pd-grid img{width:100%;height:100%;min-height:260px;object-fit:cover;transition:transform .8s ease}
.pd-grid button:hover img{transform:scale(1.03)}
.pd-grid button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.pd-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.pd-plans button{all:unset;cursor:zoom-in;background:#fff;border:1px solid var(--line);padding:16px;border-radius:2px}
.pd-plans img{width:100%;height:320px;object-fit:contain}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.card{display:block;text-decoration:none;background:var(--stone);border-radius:2px;overflow:hidden}
.card img{width:100%;height:300px;object-fit:cover;transition:transform .8s ease}
.card:hover img{transform:scale(1.03)}
.card div{padding:22px 24px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card h3{font-size:26px;line-height:1.15}
.card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(22,24,27,.5)}
.card h3{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;transition:background-size .45s}
.card:hover h3{background-size:100% 1px}
.type{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.type:hover{transform:translateY(-4px)}
.type-name{background:linear-gradient(#fff,#fff) no-repeat 0 100%/0 1px;transition:background-size .45s}
.type:hover .type-name{background-size:100% 1px}
.pd-body a,.two a:not(.btn),.note a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/100% 1px;transition:background-size .35s}
.pd-body a:hover{background-size:100% 2px}
nav a{background:linear-gradient(var(--gold),var(--gold)) no-repeat 50% 100%/0 1px;transition:background-size .4s,color .3s}
nav a:hover,nav a:focus-visible{background-size:100% 1px}
.card span{font-size:13px;color:var(--soft);white-space:nowrap}
.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
.lb::backdrop{background:rgba(18,20,23,.92)}
.lb img{max-width:96vw;max-height:88vh;object-fit:contain;margin:auto}
.lb-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;font-size:14px;padding-top:12px}
.lb-nav button{all:unset;cursor:pointer;color:#fff;padding:8px 14px;border:1px solid rgba(255,255,255,.4);border-radius:2px}
@media (max-width:720px){.pd-grid{grid-template-columns:1fr 1fr}.pd-grid button,.pd-grid button:nth-child(5n+1){grid-column:span 2;grid-row:auto}.pd-grid img{min-height:220px}}
@media (max-width:720px){.wrap,.foot{padding-left:16px;padding-right:16px}.type img{height:320px}.luka-text,.svc,.pipe-body,.oc-cta{padding:36px 24px}.luka-imgs{grid-template-columns:1fr}.luka-imgs img{height:340px}.districts,.pipes,.services,.two,.gallery{grid-template-columns:1fr}.hero{padding-top:48px}.block{padding-top:88px}.gallery img{height:300px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.btn:hover,.card:hover,.type:hover,.pipe:hover{transform:none}}