/* =========================================================================
   PAA — Olive Frame
   กรอบเขียวเข้ม ภาพเต็มจอ ตัวอักษรใหญ่สีเหลืองอ่อน เนื้อหาบนพื้นครีม
   ========================================================================= */
:root{
  --outer:#1B201B;
  --bg:#F2EEE2;
  --surface:#FAF7EF;
  --panel:#E8E3D3;
  --ink:#1F2620;
  --muted:#5C635A;
  --line:#CFC8B5;
  --line-soft:#E1DBCA;
  --accent:#2B382D;
  --accent-ink:#F2EEE2;
  --accent-soft:#E1E5D5;
  --sage:#6F7D68;
  --brick:#94643F;
  --brick-soft:#F1E3D4;
  --frame:#E8E3D3;
  --frame-line:#BDB6A2;
  --ok:#3D6A44;
  --ok-soft:#E0EADB;
  --focus:#2B382D;
  --sun:#EEE29E;

  --sans:'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SF Mono', Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pad:56px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:24px}
body{margin:0; background:var(--outer); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; line-height:1.25; text-wrap:balance; font-weight:500}
p{margin:0}
a{color:inherit}
b, strong{font-weight:500}
img{max-width:100%}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.muted{color:var(--muted)}
[hidden]{display:none !important}
.frame{max-width:1280px; margin:0 auto; background:var(--bg)}

/* ---------- atoms ---------- */
.kicker, .eyebrow{margin:0; font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.display-md{font-weight:500; letter-spacing:-0.01em; font-size:clamp(28px, 3.4vw, 44px); line-height:1.22; margin:10px 0 0}
.link-line{display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:inherit}
.link-line::after{content:''; width:36px; height:1px; background:currentColor; transition:width .25s var(--ease)}
.link-line:hover::after{width:56px}
.btn-quiet{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); background:var(--panel); transition:background-color .2s var(--ease)}
.btn-quiet:hover{background:var(--line-soft)}
.cta{display:inline-flex; align-items:stretch; min-height:48px; text-decoration:none; font-size:14px; color:#fff; background:var(--outer)}
.cta span{display:flex; align-items:center; padding:0 18px}
.cta b{display:flex; align-items:center; justify-content:center; width:48px; background:var(--sun); color:var(--outer); font-weight:400; font-size:18px; transition:width .2s var(--ease)}
.cta:hover b{width:58px}
.row-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:36px; flex-wrap:wrap}
.row-note{max-width:440px; font-size:14px; color:var(--muted)}
.section{padding:96px var(--pad); border-top:1px solid var(--line-soft)}

/* buttons (แบบประเมิน) */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px;
  font:400 15px/1 var(--sans); letter-spacing:.03em; text-decoration:none; border:1px solid var(--ink);
  background:var(--surface); color:var(--ink); cursor:pointer; transition:background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease)}
.btn:hover{background:var(--panel)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--outer); border-color:var(--outer); color:#fff}
.btn-ghost{border-color:var(--line)}
.btn-lg{min-height:52px; padding:0 26px; font-size:16px}
.btn-sm{min-height:38px; padding:0 14px; font-size:14px}
.btn[disabled]{opacity:.4; cursor:not-allowed}

/* ---------- nav ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px; padding:0 var(--pad); background:var(--outer); color:var(--bg)}
.wordmark{font-weight:500; font-size:14px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:inherit; white-space:nowrap}
.wordmark i{font-style:normal; font-weight:200; margin:0 .3em; opacity:.6}
.wordmark span{font-weight:300}
.nav-links{display:flex; gap:32px}
.nav-links a{font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; opacity:.75}
.nav-links a:hover{opacity:1}
.nav-cta{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap; background:var(--sun); color:var(--outer); transition:background-color .2s var(--ease)}
.nav-cta:hover{background:#F6EDB6}

/* ---------- hero ---------- */
.hero{position:relative; height:min(86vh, 760px); min-height:560px; overflow:hidden; color:#fff}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(20,26,20,.7) 0%, rgba(20,26,20,.25) 45%, rgba(20,26,20,0) 70%)}
.hero::after{content:''; position:absolute; z-index:1; top:0; bottom:0; right:0; width:30%; background:rgba(28,33,28,.42); backdrop-filter:blur(2px)}
.hero-inner{position:relative; z-index:2; height:100%; max-width:70%; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--pad)}
.hero-inner .kicker{color:rgba(255,255,255,.88)}
.hero h1{font-weight:600; font-size:clamp(44px, 6.6vw, 92px); line-height:1.1; color:var(--sun); margin:14px 0}
.hero-sub{margin:0 0 28px; font-size:16px; max-width:30em}
.hero-sub span{white-space:nowrap}
.hero-card{position:absolute; z-index:3; top:0; right:0; bottom:0; width:30%; padding:120px 32px 32px; display:flex; flex-direction:column}
.hero-card::before{content:'Design · Build'; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding-bottom:12px; margin-bottom:auto; border-bottom:1px solid rgba(255,255,255,.6)}
.hc-badge{align-self:flex-start; margin:24px 0 14px; padding:4px 12px; font-size:12px; font-weight:500; letter-spacing:.08em; background:var(--sun); color:var(--outer)}
.hc-title{font-size:clamp(24px, 2.4vw, 32px); font-weight:500; line-height:1.25; color:#fff}
.hc-text{margin:8px 0 22px; font-size:15px; color:rgba(255,255,255,.85)}

/* ปุ่มประเมินหลัก: สีเหลืองเด่นที่สุดในหน้า */
.cta-hot{min-height:62px; width:100%; justify-content:space-between; background:var(--sun); color:var(--outer); font-size:17px; font-weight:500; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:background-color .2s var(--ease), transform .2s var(--ease)}
.cta-hot span{padding:0 22px}
.cta-hot b{width:62px; background:var(--outer); color:var(--sun); font-size:22px}
.cta-hot:hover{background:#F6EDB6; transform:translateY(-2px)}
.cta-hot:hover b{width:72px}
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(238,226,158,.55), 0 10px 30px rgba(0,0,0,.25)} 70%{box-shadow:0 0 0 14px rgba(238,226,158,0), 0 10px 30px rgba(0,0,0,.25)} 100%{box-shadow:0 0 0 0 rgba(238,226,158,0), 0 10px 30px rgba(0,0,0,.25)}}
.hero .cta-hot{animation:ctaPulse 2.4s var(--ease) 1.2s 3}

/* ---------- intro ---------- */
.intro{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:48px; align-items:center; padding:96px var(--pad)}
.intro .display-md{margin:0}
.intro-text p{margin:0 0 24px; font-size:15px; line-height:1.75; color:var(--muted)}
.intro-text .intro-lead{margin-bottom:16px; font-size:18px; line-height:1.6; color:var(--ink)}
.intro-photo{margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--frame)}

/* โลโก้พาร์ทเนอร์ */
.partners{grid-column:1 / -1; padding-top:32px; border-top:1px solid var(--line-soft)}
.partner-logos{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:16px}
.partner-logos li, .partner-logos a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-decoration:none; color:var(--muted)}
.partner-logos li{min-height:150px; padding:20px 16px; background:var(--surface); border:1px solid var(--line-soft)}
.partner-logos img{display:block; max-width:100%; max-height:84px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.85; transition:filter .25s var(--ease), opacity .25s var(--ease)}
.partner-logos li:hover img{filter:none; opacity:1}
.partner-role{font-size:13px; letter-spacing:.04em; text-align:center}
@media (max-width:560px){.partner-logos{grid-template-columns:repeat(2, 1fr); gap:12px} .partner-logos li:last-child:nth-child(odd){grid-column:1 / -1}}
.intro-photo img{display:block; width:100%; height:100%; object-fit:cover}

/* ---------- works (แถบภาพเลื่อนได้) ---------- */
.works-sec{padding:8px var(--pad) 96px}
.works{list-style:none; margin:0; padding:0 0 12px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px, 34%); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin}
.works li{scroll-snap-align:start; margin:0}
.work-card{position:relative; display:block; width:100%; padding:0; border:0; background:var(--frame); cursor:zoom-in; overflow:hidden}
.work-card img{display:block; width:100%; aspect-ratio:3/4; height:auto; object-fit:cover; transition:transform .6s var(--ease)}
.work-card:hover img{transform:scale(1.04)}
.work-zoom{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font:400 12px var(--sans); letter-spacing:.06em; background:rgba(27,32,27,.78); color:#fff}
.work-zoom::before{content:''; width:12px; height:12px; border:1.5px solid currentColor; border-radius:50%; box-shadow:4px 4px 0 -2.5px currentColor}
.work-card:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

/* ---------- lightbox ---------- */
.lightbox{width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(14,17,14,.96); color:#fff; overflow:hidden}
.lightbox[open]{display:grid; grid-template-rows:auto 1fr auto}
.lightbox::backdrop{background:rgba(14,17,14,.9)}
html.lb-open{overflow:hidden}
.lb-top{display:flex; align-items:center; gap:16px; padding:16px 24px}
.lb-head{flex:1; min-width:0}
.lb-head span{font-size:17px; font-weight:500}
.lb-head small{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.lb-count{font-size:13px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums}
.lb-close{width:44px; height:44px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:16px; cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.1)}
.lb-stage{margin:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 88px; touch-action:pan-y; user-select:none}
.lb-stage img{display:block; max-width:100%; max-height:calc(100vh - 220px); object-fit:contain; transition:opacity .25s var(--ease)}
.lb-stage img.is-loading{opacity:.3}
.lb-stage figcaption{margin-top:10px; font-size:13px; color:rgba(255,255,255,.75); text-align:center}
.lb-stage figcaption:empty{display:none}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border:1px solid rgba(255,255,255,.3); background:rgba(14,17,14,.5); color:#fff; font-size:22px; cursor:pointer}
.lb-nav:hover{background:var(--sun); color:var(--outer); border-color:var(--sun)}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-bottom{padding:12px 24px 20px; display:flex; flex-direction:column; align-items:center; gap:12px}
.lb-desc{max-width:720px; font-size:14px; line-height:1.6; color:rgba(255,255,255,.8); text-align:center}
.lb-desc:empty{display:none}
.lb-thumbs{display:flex; gap:8px; overflow-x:auto; max-width:100%; padding-bottom:4px}
.lb-thumbs:empty{display:none}
.lb-thumbs button{flex:none; width:72px; height:52px; padding:0; border:2px solid transparent; background:none; cursor:pointer; opacity:.55}
.lb-thumbs button.is-current{border-color:var(--sun); opacity:1}
.lb-thumbs button:hover{opacity:1}
.lb-thumbs img{display:block; width:100%; height:100%; object-fit:cover}

/* ---------- ปุ่มประเมินลอย (มือถือ) ---------- */
.sticky-cta{display:none}
.wcap{display:grid; grid-template-columns:40px 1fr; column-gap:8px; padding-top:12px; font-size:14px}
.wnum{color:var(--muted)}
.wtitle{font-weight:400; letter-spacing:.04em}
.wmeta{grid-column:2; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* ---------- statement ---------- */
.statement{position:relative; overflow:hidden; color:#fff; min-height:640px; display:flex; align-items:flex-end}
.statement > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.statement::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(22,28,22,.88), rgba(22,28,22,.5) 60%, rgba(22,28,22,.38))}
.st-inner{position:relative; z-index:2; width:100%; padding:96px var(--pad) 64px 18%}
.statement .kicker{color:rgba(255,255,255,.8)}
.st-quote{margin:18px 0 56px; max-width:20em; font-weight:500; font-size:clamp(28px, 3.6vw, 48px); line-height:1.25; color:var(--sun)}
.st-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin:0}
.st-stats div{display:flex; flex-direction:column; gap:6px}
.st-stats dt{font-weight:200; font-size:clamp(36px, 4vw, 56px); line-height:1}
.st-stats dd{margin:0; font-size:13.5px; line-height:1.5; opacity:.9}

/* ---------- price menu ---------- */
.tier-table{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.tier-row{display:grid; grid-template-columns:240px 1fr 240px; gap:36px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line)}
.tier-row:last-child{border-bottom-color:var(--ink)}
.tier-photo{margin:0; aspect-ratio:3/2; background:var(--frame)}
.tier-photo img{display:block; width:100%; height:100%; object-fit:cover}
.tier-photo .ph{display:flex; align-items:center; justify-content:center; height:100%; font-size:12px; color:var(--muted)}
.tier-num{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage)}
.tier-name{font-weight:500; font-size:21px; margin-top:6px}
.tier-desc{font-size:14px; color:var(--muted); margin-top:8px; max-width:34em; line-height:1.6}
.tier-price{text-align:right}
.tier-price strong{display:block; font-size:24px; font-weight:500; color:var(--brick); font-variant-numeric:tabular-nums; line-height:1.3}
.tier-price span{display:block; font-size:13px; color:var(--muted)}
.tier-price .ref{font-size:15px}
.price-why{margin-top:20px; font-size:13.5px; color:var(--muted); max-width:760px}

/* ---------- estimator ---------- */
.estimate-sec{background:var(--panel)}
.estimator{display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:24px; align-items:start}
.wizard{background:var(--surface); border:1px solid var(--line); min-width:0}
.summary{position:sticky; top:24px; background:var(--surface); border:1px solid var(--line); padding:20px}

.progress{list-style:none; margin:0; padding:0 28px; display:grid; grid-template-columns:repeat(7, 1fr); border-bottom:1px solid var(--line-soft)}
.progress li{position:relative; padding:14px 0 12px; font-size:12px; letter-spacing:.04em; color:var(--muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.progress li::after{content:''; position:absolute; left:2px; right:2px; bottom:0; height:3px; background:var(--line-soft)}
.progress li.done{color:var(--ink)}
.progress li.done::after{background:var(--accent)}
.progress li.current{color:var(--ink); font-weight:500}
.progress li.current::after{background:var(--brick)}
.progress .pnum{margin-right:4px}

.step-body{padding:32px 28px 8px; min-height:360px}
.step-kicker{font-size:12px; letter-spacing:.14em; color:var(--sage)}
.step-title{font-size:28px; font-weight:500; margin:4px 0 6px}
.step-help{color:var(--muted); font-size:14px; margin-bottom:24px}
.step-actions{display:flex; justify-content:space-between; gap:12px; padding:20px 28px 28px; border-top:1px solid var(--line-soft)}
.step-reset{position:relative; height:0; z-index:1}
.step-reset .reset-btn{position:absolute; top:25px; right:28px}
.step-reset[hidden]{display:none}
.reset-btn{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 2px; border:0; background:none; font:inherit; font-size:13px; color:var(--muted); cursor:pointer; transition:color .2s var(--ease)}
.reset-btn:hover, .reset-btn:focus-visible{color:var(--ink); text-decoration:underline}
.reset-btn.is-armed{color:var(--brick); font-weight:500}

.field{margin-bottom:22px}
.field > label, .field > .label{display:block; font-size:14px; font-weight:500; margin-bottom:8px}
.field .hint{font-size:13px; color:var(--muted); margin-top:6px}
.field .error{font-size:13px; color:var(--brick); margin-top:6px}
.input, select.input{width:100%; min-height:46px; padding:10px 12px; font:300 16px var(--sans); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:0; transition:border-color .15s var(--ease)}
.input:hover{border-color:var(--muted)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.input[aria-invalid="true"]{border-color:var(--brick)}
.input-suffix{position:relative}
.input-suffix .input{padding-right:64px}
.input-suffix span{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--muted); pointer-events:none}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.check{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; min-height:44px}
.check input{width:18px; height:18px; accent-color:var(--accent); margin:0}

.choices{display:grid; gap:10px}
.choices.cols-2{grid-template-columns:repeat(2, 1fr)}
.choices.cols-3{grid-template-columns:repeat(3, 1fr)}
.choices.cols-4{grid-template-columns:repeat(4, 1fr)}
.choice{position:relative; display:block; cursor:pointer}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice-box{display:flex; flex-direction:column; gap:2px; min-height:52px; height:100%; padding:12px 14px; border:1px solid var(--line); background:var(--surface); transition:border-color .15s var(--ease), background-color .15s var(--ease)}
.choice:hover .choice-box{border-color:var(--muted)}
.choice input:checked + .choice-box{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent)}
.choice input:focus-visible + .choice-box{outline:2px solid var(--focus); outline-offset:2px}
.choice.is-disabled .choice-box{opacity:.45; cursor:not-allowed}
.choice-title{font-weight:400; font-size:15px}
.choice-sub{font-size:13px; color:var(--muted)}
.choice-center .choice-box{align-items:center; justify-content:center; text-align:center}
.choice-tier .choice-box{display:grid; grid-template-columns:96px 1fr auto; align-items:center; column-gap:16px; padding:10px 14px 10px 10px}
.choice-tier .tnum{font-size:24px; color:var(--accent); text-align:center}
.choice-tier .tthumb{display:block; width:96px; height:72px; object-fit:cover; background:var(--frame)}
.choice-tier .tlevel{display:block; font-size:12px; letter-spacing:.1em; color:var(--sage)}
.choice-tier .tprice{text-align:right; font-weight:500; color:var(--brick); font-size:14px; white-space:nowrap; font-variant-numeric:tabular-nums}
.choice-style .choice-box{align-items:center; text-align:center; padding:16px 10px 12px}
.choice-style svg{width:88px; height:60px; margin-bottom:6px}
.choice-style svg .s-ink{stroke:var(--ink); fill:none}
.choice-style svg .s-acc{stroke:var(--accent); fill:var(--accent-soft)}
.choice-style svg .s-ground{stroke:var(--muted)}
.choice-style svg .s-fill{fill:var(--ink)}

/* style photo cards: คลิกเลือกได้หลายภาพ */
.choice-photo .choice-box{padding:0; overflow:hidden; gap:0}
.cp-img{position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--frame)}
.cp-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease), filter .25s var(--ease)}
.choice-photo:hover .cp-img img{transform:scale(1.05)}
.choice-photo .choice-title{display:block; padding:10px 12px 12px; text-align:center}
.cp-check{position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.85); color:transparent; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25); transition:background-color .15s var(--ease), color .15s var(--ease)}
.choice-photo input:checked + .choice-box{box-shadow:inset 0 0 0 2px var(--accent), 0 6px 18px rgba(27,32,27,.18)}
.choice-photo input:checked + .choice-box .cp-check{background:var(--accent); color:var(--sun)}
.choice-photo input:checked + .choice-box .cp-img img{filter:saturate(1.08)}
.choice-photo input:not(:checked) + .choice-box .cp-img::after{content:''; position:absolute; inset:0; background:rgba(242,238,226,0); transition:background-color .2s var(--ease)}

/* map pin */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.map-tools{display:grid; grid-template-columns:auto 1fr; gap:10px; margin-bottom:10px}
.map-tools .btn{white-space:nowrap}
.land-map{position:relative; height:320px; border:1px solid var(--line); background:var(--panel); z-index:0}
.map-loading{display:flex; align-items:center; justify-content:center; height:100%; margin:0; padding:16px; font-size:14px; color:var(--muted); text-align:center}
.gps-readout{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:10px 0 0; font-size:14px}
.gps-readout b{font-weight:500; font-variant-numeric:tabular-nums}
.gps-readout a{color:var(--accent); font-weight:500}
#gpsHere.is-busy{opacity:1; cursor:progress}
#gpsHere.is-busy svg{animation:gpsSpin 1s linear infinite}
@keyframes gpsSpin{to{transform:rotate(360deg)}}
.gps-hint{color:var(--brick)}
#gpsAcc:empty{display:none}
.link-btn{border:0; background:none; padding:0; font:inherit; color:var(--brick); text-decoration:underline; cursor:pointer; min-height:32px}

/* phone links */
.nav-tel{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 4px; font-size:14px; text-decoration:none; color:var(--bg); white-space:nowrap}
.nav-tel:hover{color:var(--sun)}
.hc-tel{display:block; margin-top:14px; font-size:14px; color:#fff; text-decoration:none}
.hc-tel b{font-weight:500; color:var(--sun); text-decoration:underline; text-underline-offset:3px}
.brief-tel{background:transparent; color:var(--accent-ink); border-color:rgba(242,238,226,.5)}
.brief-tel:hover{background:rgba(242,238,226,.12)}

.rooms-group h4{margin:18px 0 4px; font-size:12px; font-weight:400; letter-spacing:.14em; color:var(--sage)}
.room-row{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; min-height:52px; border-bottom:1px solid var(--line-soft)}
.room-name{font-size:15px}
.room-area{font-size:12px; color:var(--muted); white-space:nowrap}
.stepper{display:flex; align-items:center; border:1px solid var(--line)}
.stepper button{width:40px; height:40px; border:0; background:transparent; color:var(--ink); font:400 20px/1 var(--sans); cursor:pointer}
.stepper button:hover{background:var(--panel)}
.stepper button:disabled{color:var(--line); cursor:not-allowed; background:transparent}
.stepper output{min-width:32px; text-align:center; font-weight:500; font-variant-numeric:tabular-nums}
.room-sub{padding:4px 0 10px; border-bottom:1px solid var(--line-soft)}
.room-sub .check{min-height:36px; font-size:13.5px; color:var(--muted)}
.area-live{display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; padding:14px 16px; background:var(--panel)}
.area-live strong{font-size:22px; font-weight:500}

.range{width:100%; accent-color:var(--accent); height:28px}
.range-value{font-size:30px; font-weight:500; margin:4px 0; font-variant-numeric:tabular-nums}
.range-scale{display:flex; justify-content:space-between; font-size:12px; color:var(--muted)}

.summary h3{font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding-bottom:10px; border-bottom:1px solid var(--ink)}
.summary dl{margin:0}
.summary .srow{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:14px}
.summary dt{color:var(--muted)}
.summary dd{margin:0; text-align:right; font-weight:400}
.summary .sbig{margin-top:16px; padding:14px; background:var(--panel)}
.summary .sbig span{display:block; font-size:12px; color:var(--muted)}
.summary .sbig strong{font-size:22px; font-weight:500}
.summary .snote{font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.5}

.figures{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:20px 0}
.figure{background:var(--surface); padding:18px}
.figure .ftag{font-size:13px; color:var(--muted)}
.figure .fnum{font-size:clamp(20px, 2.4vw, 26px); font-weight:500; line-height:1.25; margin:6px 0 2px; font-variant-numeric:tabular-nums}
.figure .funit{font-size:12.5px; color:var(--muted)}
.figure.total{background:var(--accent); color:var(--accent-ink)}
.figure.total .ftag, .figure.total .funit{color:rgba(242,238,226,.75)}
.figure.total .fnum{color:var(--sun)}
.budget-meter{margin:8px 0 24px}
.bm-title{font-weight:500; font-size:15px}
.bm-track{position:relative; height:44px; margin:16px 0 30px; background:var(--panel)}
.bm-range{position:absolute; top:10px; bottom:10px; background:var(--accent)}
.bm-mark{position:absolute; top:0; bottom:0; width:2px; background:var(--brick)}
.bm-mark span{position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px; font-size:12px; color:var(--brick); white-space:nowrap; font-weight:500}
.verdict{padding:14px 16px; font-size:14.5px; line-height:1.6}
.verdict.ok{background:var(--ok-soft)}
.verdict.low{background:var(--brick-soft)}
.verdict.high{background:var(--accent-soft)}
.breakdown .srow{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:14px}
.breakdown .srow span:first-child{color:var(--muted)}
.next-step{margin-top:20px; padding:16px 18px; background:var(--accent-soft)}
.next-step p:last-child{margin-top:4px; font-size:14.5px}
.disclaimer{margin-top:20px; font-size:13px; color:var(--muted); line-height:1.6; padding-top:14px; border-top:1px solid var(--line-soft)}
.result-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.sent-status{font-size:13px; margin-top:8px; color:var(--muted)}
.step-body > *{animation:stepIn .22s var(--ease) both}
@keyframes stepIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---------- process ---------- */
.phases{display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line)}
.phase-col{padding:32px 32px 8px 0}
.phase-col + .phase-col{padding-left:32px; border-left:1px solid var(--line)}
.numeral{display:block; font-weight:200; font-size:clamp(56px, 6vw, 84px); line-height:1; letter-spacing:-0.02em}
.phase-col h3{margin:22px 0 10px; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase}
.phase-col p{margin:0 0 18px; font-size:14.5px; line-height:1.65; color:var(--muted); max-width:24em}
.phase-col ol{margin:0; padding:0 0 0 18px; font-size:13.5px; line-height:1.9}
.phase-col ol li::marker{color:var(--muted)}
.phase-col em{font-style:normal; font-size:11px; letter-spacing:.1em; padding:1px 8px; margin-left:6px; background:var(--accent); color:var(--accent-ink)}
.change-line{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; margin-top:48px; font-size:12px; letter-spacing:.06em; color:var(--muted)}
.change-line i{height:2px; background:linear-gradient(to right, var(--line), var(--brick))}

/* ---------- brief ---------- */
.brief{display:grid; grid-template-columns:1fr 1fr; min-height:620px; background:var(--accent); color:var(--accent-ink)}
.brief-photo{margin:0; overflow:hidden; background:var(--frame)}
.brief-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:70% center}
.brief-body{padding:96px 64px; display:flex; flex-direction:column; justify-content:center}
.brief .kicker{color:rgba(242,238,226,.75)}
.brief .display-md{color:var(--sun)}
.brief-body > p:not(.kicker){margin-top:20px; font-size:15px; line-height:1.75; color:rgba(242,238,226,.8); max-width:30em}
.brief-topics{list-style:none; margin:28px 0 36px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.brief-topics li{font-size:13px; padding:6px 14px; border:1px solid rgba(242,238,226,.3); letter-spacing:.04em}
#briefCta{display:flex; flex-wrap:wrap; gap:12px}
#briefCta .btn{background:transparent; color:var(--accent-ink); border-color:rgba(242,238,226,.5)}

/* ---------- footer ---------- */
.footer{display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; align-items:start; padding:48px var(--pad) 56px; background:var(--outer); color:var(--bg)}
.foot-small{margin-top:10px; font-size:12px; letter-spacing:.04em; color:rgba(242,238,226,.6); line-height:1.6}
.foot-quote{text-align:center; font-size:18px; color:rgba(242,238,226,.65)}
.foot-right{text-align:right}
.foot-right .foot-small{max-width:360px; margin-left:auto}
.footer-contact{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.footer-contact .btn{background:transparent; color:var(--bg); border-color:rgba(242,238,226,.35)}

/* ---------- responsive ---------- */
@media (max-width: 1024px){
  :root{--pad:32px}
  .nav-links{display:none}
  .intro{grid-template-columns:1fr 1fr}
  .intro-photo{grid-column:1 / -1}
  .st-inner{padding:72px var(--pad) 48px}
  .tier-row{grid-template-columns:180px 1fr; row-gap:10px}
  .tier-price{grid-column:2; text-align:left}
  .estimator{grid-template-columns:1fr}
  .summary{position:static}
  .brief-body{padding:64px 40px}
}
@media (max-width: 720px){
  :root{--pad:16px}
  .section, .intro{padding:56px var(--pad)}
  .works-sec{padding-bottom:56px}
  .nav{height:56px}
  .wordmark span{display:none}
  .hero{min-height:620px}
  .hero::before{background:linear-gradient(to top, rgba(20,26,20,.82) 0%, rgba(20,26,20,.5) 55%, rgba(20,26,20,.1) 80%)}
  .hero::after{display:none}
  .hero-inner{max-width:none; padding:32px var(--pad) 150px}
  .hero-card{top:auto; left:var(--pad); right:var(--pad); bottom:var(--pad); width:auto; padding:0; display:block}
  .hero-card::before, .hc-title, .hc-text{display:none}
  .hc-badge{margin:0 0 10px}
  .nav-cta{min-height:36px; padding:0 12px; font-size:13px}
  .nav-tel-text{display:none}
  .nav-tel{padding:0 8px}
  .map-tools{grid-template-columns:1fr}
  .land-map{height:260px}
  .sticky-cta{position:fixed; z-index:40; left:12px; right:12px; bottom:12px; display:flex; align-items:stretch; justify-content:space-between; min-height:56px;
    text-decoration:none; background:var(--sun); color:var(--outer); font-size:16px; font-weight:500; box-shadow:0 10px 30px rgba(0,0,0,.3);
    transform:translateY(140%); transition:transform .3s var(--ease)}
  .sticky-cta.is-visible{transform:none}
  .sticky-cta span{display:flex; align-items:center; padding:0 18px}
  .sticky-cta b{display:flex; align-items:center; justify-content:center; width:56px; background:var(--outer); color:var(--sun); font-size:20px; font-weight:400}
  .lb-top{padding:10px 12px}
  .lb-stage{padding:0 8px}
  .lb-stage img{max-height:calc(100vh - 230px)}
  .lb-nav{top:auto; bottom:84px; transform:none; width:48px; height:48px}
  .lb-prev{left:12px}
  .lb-next{right:12px}
  .lb-bottom{padding:12px 12px 16px}
  .intro{grid-template-columns:1fr; gap:24px}
  .works{grid-auto-columns:78%}
  .st-inner{padding:56px var(--pad) 40px}
  .st-stats{grid-template-columns:1fr 1fr; gap:28px 16px}
  .tier-row{grid-template-columns:1fr}
  .tier-price{grid-column:1}
  .progress{padding:0 12px}
  .progress li .plabel{display:none}
  .step-body{padding:24px 16px 4px}
  .step-actions{padding:16px}
  .step-reset .reset-btn{top:17px; right:16px}
  .step-actions .btn{flex:1}
  .row2{grid-template-columns:1fr}
  .choices.cols-3, .choices.cols-4{grid-template-columns:repeat(2, 1fr)}
  .choice-tier .choice-box{grid-template-columns:72px 1fr; row-gap:4px; column-gap:12px}
  .choice-tier .tthumb{width:72px; height:56px}
  .choice-tier .tprice{grid-column:2; text-align:left}
  .room-area{display:none}
  .figures{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr; border-top:0}
  .phase-col, .phase-col + .phase-col{padding:28px 0 8px; border-left:0; border-top:1px solid var(--line)}
  .change-line{grid-template-columns:1fr; gap:6px}
  .brief{grid-template-columns:1fr}
  .brief-photo{aspect-ratio:4/3}
  .brief-body{padding:48px var(--pad)}
  .footer{grid-template-columns:1fr}
  .foot-quote, .foot-right{text-align:left}
  .foot-right .foot-small{margin-left:0}
  .footer-contact{justify-content:flex-start}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .step-body > *, .hero .cta-hot, #gpsHere.is-busy svg{animation:none}
  *{transition:none !important}
}

/* print: เฉพาะผลประเมิน */
@media print{
  body{background:#fff}
  .nav, .hero, .intro, .works-sec, .statement, #prices, #process, .brief, .footer, .summary, .progress, .step-actions, .step-reset, .result-cta, .estimate-sec .row-head, .sticky-cta, .lightbox{display:none !important}
  .estimate-sec{background:none; padding:0; border:0}
  .wizard{border:0}
}