:root{ --navy:#12315F; --blue:#1E6FE0; --blue-light:#EAF1FC; --green:#16A34A; --green-light:#DCFCE7; --ink:#1B2536; --sub:#556376; --muted:#8598B4; --border:#E4E9F2; --bg:#F7F9FC; --line:#06C755; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:'IBM Plex Sans Thai','Sarabun',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink); background:#fff; line-height:1.6; } .wrap{max-width:1120px;margin:0 auto;padding:0 20px} a{color:inherit} img{max-width:100%;display:block} /* scroll-reveal (progressive enhancement — content stays fully visible if JS never runs; app.js adds .js to first, only then do elements start hidden until scrolled into view) */ [data-reveal]{transition:opacity .6s ease,transform .6s ease} .js [data-reveal]{opacity:0;transform:translateY(18px)} .js [data-reveal].in{opacity:1;transform:none} /* header */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)} .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none} .brand-logo{width:34px;height:34px;object-fit:contain} .brand-name{font-size:18px;font-weight:700;color:var(--navy)} .header-nav{display:flex;gap:26px;flex:1;justify-content:center} .header-nav a{font-size:13.5px;font-weight:600;color:var(--sub);text-decoration:none} .header-nav a:hover{color:var(--navy)} .header-cta{font-size:13.5px;font-weight:700;color:#fff;background:var(--navy);padding:9px 18px;border-radius:9px;text-decoration:none;flex:none;white-space:nowrap} /* hero */ .hero{background:linear-gradient(180deg,#0E2A52 0%,#12315F 60%,#173A72 100%);color:#fff;padding:76px 0 84px;overflow:hidden} .hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center} .hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#DCFCE7;font-size:13px;font-weight:600;padding:7px 16px;border-radius:30px;margin-bottom:22px} .hero h1{font-size:clamp(28px,3.6vw,44px);font-weight:700;line-height:1.28;margin:0 0 18px} .hero-sub{font-size:15.5px;color:#C7D3E8;max-width:520px;margin:0 0 30px} .hero-btn{display:inline-block;background:#fff;color:var(--navy);font-weight:700;font-size:15px;padding:14px 30px;border-radius:11px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.2)} .hero-art{display:flex;justify-content:center} .survey-svg{width:100%;max-width:340px} /* animated survey graphic: plot outline draws in, corner pins pulse in sequence, a scan line sweeps across */ .plot-fill{fill:rgba(255,255,255,.06)} .plot-outline{ fill:none;stroke:#7CF0B2;stroke-width:2.5;stroke-linejoin:round; stroke-dasharray:900;stroke-dashoffset:900; animation:draw-plot 2.6s ease forwards .3s; } .pin{fill:#7CF0B2;opacity:0;transform-origin:center;animation:pin-pop .5s ease forwards;animation-delay:2.4s} .pin:nth-child(2){animation-delay:2.6s} .pin:nth-child(3){animation-delay:2.8s} .pin:nth-child(4){animation-delay:3s} .pin:nth-child(5){animation-delay:3.2s} .scan-line{stroke:rgba(124,240,178,.55);stroke-width:2;animation:scan-sweep 4.5s ease-in-out infinite;animation-delay:3.6s} @keyframes draw-plot{to{stroke-dashoffset:0}} @keyframes pin-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}} @keyframes scan-sweep{0%{transform:translateX(0)}50%{transform:translateX(280px)}100%{transform:translateX(0)}} @media (prefers-reduced-motion:reduce){ .plot-outline{animation:none;stroke-dashoffset:0} .pin{animation:none;opacity:1} .scan-line{animation:none;opacity:0} } /* section shared */ .section-title{font-size:26px;font-weight:700;color:var(--navy);text-align:center;margin:0 0 8px} .section-title.light{color:#fff} .section-sub{font-size:14.5px;color:var(--sub);text-align:center;max-width:560px;margin:0 auto 36px} .section-sub.light{color:#C7D3E8} /* listings */ .listings{padding:72px 0} .listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px} .listing-loading,.listing-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:50px 20px;background:var(--bg);border-radius:14px;border:1px solid var(--border)} .card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s;opacity:0;transform:translateY(14px);animation:card-in .5s ease forwards} .card:hover{box-shadow:0 14px 34px rgba(18,49,95,.12);transform:translateY(-2px)} @keyframes card-in{to{opacity:1;transform:none}} .card-photo{width:100%;height:190px;object-fit:cover;background:var(--bg)} .card-photo-empty{width:100%;height:190px;background:linear-gradient(135deg,#EAF1FC,#F7F9FC);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px} .card-body{padding:18px} .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px} .card-type{font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-light);padding:4px 10px;border-radius:20px;white-space:nowrap} .card-verified{font-size:10.5px;font-weight:700;color:var(--green);background:var(--green-light);padding:4px 10px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px} .card-parcel{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.5} .card-blurb{font-size:13px;color:var(--sub);margin-bottom:12px;line-height:1.6} .card-price{font-size:17px;font-weight:700;color:var(--navy)} .card-price.tbd{font-size:13px;font-weight:600;color:var(--muted)} /* why */ .why{background:var(--bg);padding:64px 0} .why-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;text-align:center} .why-icon{font-size:30px;margin-bottom:10px} .why-title{font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:8px} .why-text{font-size:13px;color:var(--sub);line-height:1.7} /* knowledge */ .knowledge{padding:72px 0} .knowledge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:26px} .k-card{border:1px solid var(--border);border-radius:14px;padding:20px;background:#fff} .k-icon{font-size:24px;margin-bottom:10px} .k-title{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.5} .k-text{font-size:12.5px;color:var(--sub);line-height:1.75} .k-resources{text-align:center;font-size:13px;color:var(--sub);margin-bottom:14px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center} .k-resources-label{font-weight:600;color:var(--navy)} .k-resources a{color:var(--blue);font-weight:600;text-decoration:none} .k-resources a:hover{text-decoration:underline} .k-disclaimer{font-size:11px;color:var(--muted);text-align:center;max-width:640px;margin:0 auto;line-height:1.7} /* contact */ .contact{background:var(--navy);padding:72px 0 60px;text-align:center} .contact-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px} .contact-btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;padding:14px 26px;border-radius:11px;text-decoration:none;transition:transform .15s} .contact-btn:hover{transform:translateY(-2px)} .contact-btn.line{background:var(--line);color:#fff} .contact-btn.tel{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)} .contact-meta{font-size:13px;color:#AEC0DC;line-height:1.9} /* footer */ .site-footer{padding:26px 0;text-align:center;font-size:12.5px;color:var(--muted)} @media (max-width:860px){ .header-nav{display:none} .hero-inner{grid-template-columns:1fr;text-align:center} .hero-sub{margin-left:auto;margin-right:auto} .hero-art{order:-1;max-width:260px;margin:0 auto} } @media (max-width:640px){ .hero{padding:56px 0 60px} .listings{padding:52px 0} .why{padding:48px 0} .knowledge{padding:52px 0} .contact{padding:56px 0 44px} }