:root{
  --deep:#0d2b2b; --deep2:#143c3b; --ivory:#faf7f1; --sand:#efe6d6; --gold:#b98f45; --gold-l:#e4c88f;
  --ink:#1b2626; --muted:#66706f; --line:rgba(27,38,38,.12);
  --serif:'Noto Serif Thai',serif; --en:'Cormorant Garamond',serif; --sans:'IBM Plex Sans Thai',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}   /* กันรูปที่มี width/height ใน HTML ถูกยืดเมื่อหดตามจอ */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.35;margin:0}
a{color:inherit;text-decoration:none}
.nb{white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:110px 0}
.kicker{font-family:var(--en);font-style:italic;font-size:1.35rem;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:36px;height:1px;background:currentColor}
.center{text-align:center}
.center .kicker{justify-content:center}
.center .kicker::after{content:"";width:36px;height:1px;background:currentColor}
h2{font-size:clamp(1.75rem,3.3vw,2.6rem)}
.lead{color:var(--muted);font-size:1.08rem;max-width:640px;margin:18px 0 0;font-weight:300}
.center .lead{margin:18px auto 0}
.head{margin-bottom:64px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:2px;font:500 1rem var(--sans);border:1px solid transparent;transition:.25s}
.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{background:#a37b35}
.btn-outline{border-color:rgba(255,255,255,.6);color:#fff}.btn-outline:hover{background:#fff;color:var(--deep)}
.ic{width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);flex:none}
.ic svg{width:26px;height:26px}

.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* nav */
nav{position:fixed;inset:0 0 auto;z-index:20;transition:background .35s,padding .35s;padding:22px 0;color:#fff}
nav.solid{background:rgba(13,43,43,.96);backdrop-filter:blur(8px);padding:12px 0}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--en);font-size:1.6rem;line-height:1}
.logo img{height:44px;width:auto;transition:height .35s}
nav.solid .logo img{height:36px}
.logo small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;opacity:.75;margin-top:5px;text-transform:uppercase;white-space:nowrap}
.menu{display:flex;gap:28px;font-size:.95rem}
.menu a{opacity:.85}.menu a:hover{opacity:1}
.right{display:flex;align-items:center;gap:30px}
.lang{display:flex;border:1px solid rgba(255,255,255,.4);border-radius:99px;font-size:.82rem;overflow:hidden;flex:none}
.lang a,.lang b{padding:4px 12px;font-weight:500}
.lang b{background:var(--gold);color:#fff}
.lang a{opacity:.85}.lang a:hover{opacity:1;background:rgba(255,255,255,.12)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--deep)}
.hero .wrap{padding-top:130px}   /* กันหัวข้อชนแถบเมนูบนจอเตี้ย */
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero picture img{animation:zoom 18s ease-out both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,28,28,.85) 0%,rgba(8,28,28,.5) 55%,rgba(8,28,28,.15) 100%),linear-gradient(0deg,rgba(8,28,28,.8) 0%,rgba(8,28,28,0) 50%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:100px}
.hero .kicker{color:var(--gold-l)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.8rem);line-height:1.25;max-width:820px}
.hero .sub{font-size:1.15rem;font-weight:300;opacity:.92;max-width:600px;margin:22px 0 34px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.badges span{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);padding:7px 16px;border-radius:99px;font-size:.88rem}

/* stats */
.stats{padding:64px 0;border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:4px 18px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.3vw,2.9rem);color:var(--deep);line-height:1.15;white-space:nowrap;margin-bottom:8px}
.stat b em{font-style:normal;font-size:.5em;color:var(--gold);margin-left:4px}
.stat > span{display:block;color:var(--muted);text-wrap:balance}   /* เฉพาะคำอธิบาย — ห้ามโดน span ตัวเลขอัตโนมัติ (data-years/data-count) */

/* 3 roles */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.role{background:#fff;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line)}
.role img{width:100%;aspect-ratio:4/3;object-fit:cover}
.role .b{padding:30px 30px 34px;display:flex;flex-direction:column;flex:1}
.role .n{font-family:var(--en);font-style:italic;color:var(--gold);font-size:1.2rem}
.role h3{font-size:1.4rem;margin:2px 0 12px}
.role p{color:var(--muted);font-weight:300;margin:0 0 22px;flex:1}
.role .link{color:var(--deep);font-weight:500;border-bottom:1px solid var(--gold);align-self:flex-start;padding-bottom:2px}
.role .link:hover{color:var(--gold)}
.role.main{background:var(--deep);color:#fff}
.role.main p{color:rgba(255,255,255,.75)}
.role.main .n{color:var(--gold-l)}
.role.main .link{color:var(--gold-l)}

/* why */
.why{background:#fff}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.why-item{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:28px 0;border-top:1px solid var(--line)}
.why-item h3{font-size:1.18rem;margin-bottom:6px}
.why-item p{margin:0;color:var(--muted);font-weight:300}

/* services */
.svc{background:var(--deep);color:#fff}
.svc .kicker{color:var(--gold-l)}
.svc .lead{color:rgba(255,255,255,.7)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc-col{border:1px solid rgba(255,255,255,.14);padding:34px 30px}
.svc-col .ic{border-color:var(--gold-l);color:var(--gold-l);margin-bottom:20px}
.svc-col h3{font-size:1.3rem;margin-bottom:14px}
.svc-col ul{list-style:none;margin:0;padding:0}
.svc-col li{padding:9px 0 9px 26px;border-top:1px solid rgba(255,255,255,.1);position:relative;font-weight:300}
.svc-col li::before{content:"";position:absolute;left:2px;top:1.15em;width:10px;height:5px;border-left:1.5px solid var(--gold-l);border-bottom:1.5px solid var(--gold-l);transform:rotate(-45deg)}

/* report */
.report{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}
.report ul{list-style:none;padding:0;margin:28px 0 0}
.report li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.report li b{color:var(--gold);font-family:var(--en);font-size:1.3rem;line-height:1.4;min-width:26px}
.report-img{margin:0;position:relative;max-width:560px;width:100%;justify-self:center}   /* รูปต้นฉบับ 555px ไม่ขยายเกินจนเบลอ */
.report-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;box-shadow:0 30px 60px -30px rgba(13,43,43,.45)}
.report-img::after{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--gold);z-index:-1}

/* portfolio */
.port{background:var(--sand)}
.villas{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.villa{background:#fff;grid-column:span 2;display:flex;flex-direction:column}
.villa:nth-child(4),.villa:nth-child(5){grid-column:span 3}
.villa{position:relative}
.villa .own{position:absolute;top:14px;left:14px;z-index:1;background:var(--deep);color:var(--gold-l);font-size:.8rem;font-weight:500;padding:5px 12px;border-radius:99px}
.villa img{width:100%;aspect-ratio:16/10;object-fit:cover}
.villa:nth-child(4) img,.villa:nth-child(5) img{aspect-ratio:16/8}
.villa .b{padding:22px 24px 26px}
.villa small{font-family:var(--en);font-style:italic;color:var(--gold);font-size:1.05rem}
.villa h3{font-size:1.12rem;margin:2px 0 8px;font-family:var(--sans);font-weight:600}
.villa p{margin:0;color:var(--muted);font-weight:300;font-size:.95rem}
.port .more{text-align:center;margin-top:46px}
.port .more a{color:var(--deep);border-bottom:1px solid var(--gold);padding-bottom:2px;font-weight:500}

/* band */
.band{position:relative;padding:150px 0;color:#fff;text-align:center;background:var(--deep) center/cover;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:rgba(8,28,28,.58)}
.band .wrap{position:relative;max-width:900px}
.band blockquote{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.6}
.band blockquote::before{content:"“";display:block;font-family:var(--en);font-size:5rem;line-height:.6;color:var(--gold-l);margin-bottom:18px}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:28px;left:10%;right:10%;height:1px;background:var(--gold)}
.step{text-align:center;padding:0 14px;position:relative}
.step .num{width:56px;height:56px;border-radius:50%;background:var(--ivory);border:1px solid var(--gold);display:grid;place-items:center;margin:0 auto 20px;font-family:var(--en);font-size:1.6rem;color:var(--gold)}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{margin:0;color:var(--muted);font-weight:300;font-size:.95rem}

/* founders */
.founders{background:#fff}
.fd{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.fd-img{position:relative}
.fd-img img{width:100%;aspect-ratio:5/6;object-fit:cover}
.fd-img::after{content:"";position:absolute;inset:26px -26px -26px 26px;border:1px solid var(--gold);z-index:-1}
.fd p{color:var(--muted);font-weight:300;font-size:1.05rem}
.people{margin-top:30px;display:grid;gap:14px}
.person{border-left:2px solid var(--gold);padding:4px 0 4px 18px}
.person b{display:block;font-family:var(--en);font-size:1.45rem;font-weight:500;color:var(--deep);line-height:1.3}
.person span{color:var(--muted);font-size:.95rem}

/* academy */
.acad{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;background:var(--deep);color:#fff}
.acad img{width:100%;height:100%;object-fit:cover;min-height:420px}
.acad .b{padding:80px 70px;display:flex;flex-direction:column;justify-content:center}
.acad .kicker{color:var(--gold-l)}
.acad p{color:rgba(255,255,255,.75);font-weight:300;margin:18px 0 30px}
.acad .btn{align-self:flex-start}

/* faq */
.faq{max-width:840px;margin:0 auto}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--serif);font-size:1.12rem;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-family:var(--en);font-size:2rem;color:var(--gold);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--muted);font-weight:300}

/* closing */
.close{position:relative;padding:150px 0;text-align:center;color:#fff;background:var(--deep) center/cover}
.close::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,28,28,.85),rgba(8,28,28,.55))}
.close .wrap{position:relative;max-width:760px}
.close .kicker{color:var(--gold-l)}
.close p{opacity:.85;font-weight:300;font-size:1.1rem;margin:20px 0 0}
.close .ref{display:inline-block;margin-top:34px;border:1px solid var(--gold-l);color:var(--gold-l);padding:14px 30px;font-weight:500}

footer{background:#081c1c;color:rgba(255,255,255,.6);padding:40px 0;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .links{display:flex;gap:24px;flex-wrap:wrap}
footer a:hover{color:var(--gold-l)}

@media (max-width:980px){
  .menu{display:none}
  .roles,.svc-grid{grid-template-columns:1fr}
  .role{display:grid;grid-template-columns:1fr 1.3fr}
  .role img{height:100%;aspect-ratio:auto}
  .why-grid{grid-template-columns:1fr}
  .report,.fd{grid-template-columns:1fr;gap:56px}
  .villas{grid-template-columns:1fr 1fr}
  .villa,.villa:nth-child(4),.villa:nth-child(5){grid-column:span 1}
  .villa:nth-child(5){grid-column:span 2}
  .villa:nth-child(4) img,.villa:nth-child(5) img{aspect-ratio:16/10}
  .steps{grid-template-columns:1fr;gap:28px;max-width:520px;margin:0 auto}
  .steps::before{top:28px;bottom:28px;left:28px;right:auto;width:1px;height:auto}
  .step{display:grid;grid-template-columns:56px 1fr;gap:20px;text-align:left;padding:0}
  .step .num{margin:0}
  .acad{grid-template-columns:1fr}
  .acad img{min-height:280px;max-height:360px}
  .acad .b{padding:56px 28px}
}
@media (max-width:760px){
  section{padding:80px 0}
  .wrap{padding:0 22px}
  .head{margin-bottom:44px}
  .hero .wrap{padding-bottom:70px}
  .hero .sub{font-size:1.02rem}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:34px 0}
  .stat:nth-child(3){border-left:0}
  .role{display:flex}
  .role img{aspect-ratio:16/9;height:auto}
  .villas{grid-template-columns:1fr}
  .villa:nth-child(5){grid-column:span 1}
  .report-img::after{inset:14px -10px -14px 10px}
  .fd-img::after{inset:16px -12px -16px 12px}
  .band,.close{padding:110px 0}
}
@media print{
  nav,.scroll-cue{display:none}
  .js .rv{opacity:1;transform:none}
  .hero{min-height:auto;padding-top:160px}
  section{padding:50px 0;break-inside:avoid}
}