:root {
  --navy:#082b4b;
  --green:#278e60;
  --green-bright:#38ba7d;
  --orange:#f28b35;
  --ink:#14202a;
  --muted:#6d7882;
  --line:#dce4e4;
  --deep:#17122f;
  --deep-2:#251a47;
  --white:#fff;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-width:320px; }
body { margin:0; background:var(--deep); color:var(--ink); font-family:"IBM Plex Sans Thai",sans-serif; font-size:16px; line-height:1.55; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.site-header { position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(8,43,75,.08); background:rgba(255,255,255,.96); backdrop-filter:blur(18px); }
.nav-shell { width:min(1180px,calc(100% - 40px)); min-height:76px; margin:0 auto; display:flex; align-items:center; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:11px; margin-right:auto; }
.brand-mark { width:42px; height:42px; flex:0 0 42px; overflow:hidden; border-radius:13px; background:#c9edf3; box-shadow:0 8px 22px rgba(8,43,75,.18); }
.brand-mark img { width:100%; height:100%; object-fit:cover; transform:scale(1.42); }
.brand b { display:block; color:var(--navy); font:600 1.08rem/1.1 "Prompt",sans-serif; }
.brand small { display:block; margin-top:3px; color:var(--green); font-size:.65rem; font-weight:700; letter-spacing:.12em; }
nav { display:flex; align-items:center; gap:26px; }
nav a { position:relative; color:#344650; font-size:.92rem; font-weight:600; }
nav a::after { position:absolute; right:100%; bottom:-7px; left:0; height:2px; background:var(--orange); content:""; transition:right .2s ease; }
nav a:hover::after,nav a:focus-visible::after,nav a.is-current::after { right:0; }
.nav-contact { flex:0 0 auto; border-radius:999px; padding:11px 19px; background:var(--navy); color:#fff; font-weight:700; }
.menu-toggle { display:none; width:44px; height:44px; border:0; border-radius:12px; padding:12px; background:#eef4f4; }
.menu-toggle span { display:block; height:2px; margin:4px 0; background:var(--navy); }

.contact-section { min-height:calc(100vh - 76px); display:grid; place-items:center; overflow:hidden; padding:64px 0; background:radial-gradient(circle at 90% 8%,rgba(242,139,53,.18),transparent 27%),radial-gradient(circle at 7% 88%,rgba(56,186,125,.12),transparent 30%),linear-gradient(135deg,var(--deep),var(--deep-2)); }
.contact-shell { width:min(1140px,calc(100% - 40px)); display:grid; grid-template-columns:minmax(360px,.9fr) minmax(520px,1.1fr); gap:64px; align-items:center; }
.eyebrow { margin:0 0 13px; color:#ffad68; font-size:.78rem; font-weight:700; letter-spacing:.08em; }
h1 { margin:0; color:#fff; font:600 clamp(3rem,6vw,5.6rem)/1.02 "Prompt",sans-serif; letter-spacing:-.045em; }
h1 em { color:#ffad68; font-style:normal; }
.contact-channels { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:34px; }
.contact-channel { min-width:0; display:flex; align-items:center; gap:12px; min-height:82px; padding:13px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.06); color:#fff; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.contact-channel:hover,.contact-channel:focus-visible { transform:translateY(-3px); border-color:rgba(255,173,104,.7); background:rgba(255,255,255,.1); outline:0; }
.channel-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:50%; color:#fff; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.channel-icon svg { width:25px; height:25px; fill:currentColor; }
.channel-icon b { font:700 .66rem "Prompt",sans-serif; }
.contact-channel > span:last-child { min-width:0; }
.contact-channel small { display:block; color:rgba(255,255,255,.6); font-size:.7rem; font-weight:700; letter-spacing:.03em; }
.contact-channel strong { display:block; margin-top:2px; overflow-wrap:anywhere; font:600 .9rem/1.25 "Prompt",sans-serif; }
.channel-phone .channel-icon { background:#36b56e; }
.channel-line .channel-icon { background:#06c755; }
.channel-facebook .channel-icon { background:#1877f2; font-size:1.9rem; }
.channel-facebook .channel-icon b { font:700 2rem/1 Arial,sans-serif; }
.channel-tiktok .channel-icon { background:#050505; }

.contact-panel { display:grid; gap:14px; min-width:0; }
.selected-property { display:grid; grid-template-columns:160px minmax(0,1fr); gap:18px; padding:14px; border:1px solid rgba(255,172,104,.55); border-radius:18px; background:linear-gradient(135deg,rgba(242,139,53,.11),rgba(255,255,255,.055)); box-shadow:0 22px 60px rgba(3,1,18,.22); backdrop-filter:blur(14px); }
.selected-property:not(:has(.selected-image:not([hidden]))) { grid-template-columns:1fr; padding:20px 22px; }
.selected-image { width:100%; height:100%; min-height:132px; margin:0; overflow:hidden; border-radius:12px; background:rgba(6,3,24,.3); }
.selected-image img { width:100%; height:100%; object-fit:cover; }
.selected-details { align-self:center; min-width:0; }
.selected-kicker { margin:0 0 3px; color:#ffad68; font-size:.76rem; font-weight:700; letter-spacing:.04em; }
.selected-location { margin:0; color:#63d69b; font-size:.8rem; font-weight:700; }
.selected-property h2 { margin:3px 0 14px; color:#fff; font:600 1.18rem/1.35 "Prompt",sans-serif; }
.selected-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.selected-facts div { min-width:0; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(6,3,24,.2); }
.selected-facts span { display:block; color:#63d69b; font-size:.7rem; font-weight:700; }
.selected-facts strong { display:block; margin-top:2px; overflow-wrap:anywhere; color:#fff; font-size:.88rem; }

.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:17px; padding:32px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:rgba(11,8,31,.28); box-shadow:0 30px 80px rgba(3,1,18,.3); backdrop-filter:blur(14px); }
.contact-form label { display:grid; gap:7px; color:#fff; font-size:.88rem; font-weight:700; }
.contact-form label span { color:rgba(255,255,255,.55); font-size:.78rem; font-weight:500; }
.contact-form .wide { grid-column:1/-1; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; min-width:0; border:1px solid rgba(255,255,255,.24); border-radius:9px; padding:12px 13px; outline:0; background:rgba(6,3,24,.22); color:#fff; }
.contact-form select { color-scheme:dark; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:rgba(255,255,255,.48); }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:#ffad68; box-shadow:0 0 0 3px rgba(242,139,53,.16); }
.contact-form textarea { resize:vertical; }
.contact-form .legal-consent { display:flex; align-items:flex-start; gap:9px; padding:11px 12px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.78); font-size:.8rem; font-weight:500; line-height:1.55; }
.contact-form .legal-consent input { width:17px; height:17px; flex:0 0 17px; margin:2px 0 0; padding:0; accent-color:#ffad68; }
.contact-form .legal-consent b { color:#ff9b8d; }
.contact-form .legal-consent a { color:#ffad68; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.form-trap { display:none !important; }
.submit-button { width:100%; border:0; border-radius:10px; padding:13px 20px; background:var(--orange); color:#161322; font-weight:800; transition:transform .2s ease,box-shadow .2s ease; }
.submit-button:hover { transform:translateY(-2px); box-shadow:0 11px 26px rgba(242,139,53,.24); }
.submit-button:disabled { opacity:.65; cursor:wait; transform:none; }
.form-error { margin:0; padding:11px 13px; border-radius:9px; background:#fff1ef; color:#b93a2d; font-weight:700; }

.thank-you-dialog { width:min(440px,calc(100% - 28px)); border:0; border-radius:22px; padding:30px; color:var(--ink); box-shadow:0 30px 100px rgba(1,18,33,.38); }
.thank-you-dialog::backdrop { background:rgba(3,23,39,.72); backdrop-filter:blur(5px); }
.dialog-close { position:absolute; top:13px; right:13px; width:40px; height:40px; border:0; border-radius:50%; background:#f3f6f6; color:var(--navy); font-size:1.5rem; }
.form-success { padding:18px 8px 4px; text-align:center; }
.form-success > span { display:grid; width:60px; height:60px; margin:0 auto 13px; place-items:center; border-radius:50%; background:#ddf4e8; color:var(--green); font-size:1.8rem; }
.form-success h2 { margin:0; color:var(--navy); font:600 1.8rem "Prompt",sans-serif; }
.form-success p { margin:8px 0 24px; color:var(--muted); font-size:1.05rem; }

.line-page { min-height:100vh; display:grid; grid-template-rows:auto 1fr; background:radial-gradient(circle at 85% 12%,rgba(6,199,85,.2),transparent 30%),linear-gradient(135deg,var(--deep),var(--deep-2)); }
.line-main { display:grid; place-items:center; padding:48px 20px; }
.line-card { width:min(520px,100%); padding:34px; border:1px solid rgba(255,255,255,.16); border-radius:26px; background:rgba(255,255,255,.96); box-shadow:0 32px 90px rgba(3,1,18,.36); text-align:center; }
.line-badge { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:7px 12px; background:#ddf8e8; color:#087c38; font-weight:800; }
.line-card h1 { margin:17px 0 7px; color:var(--navy); font-size:clamp(2rem,6vw,3rem); letter-spacing:-.035em; }
.line-card > p { margin:0 auto 22px; color:var(--muted); }
.line-qr { width:min(290px,82vw); margin:0 auto; padding:16px; border:1px solid var(--line); border-radius:22px; background:#fff; }
.line-qr img { width:100%; aspect-ratio:1; }
.line-id { margin:18px 0 20px; color:var(--navy); font-size:1.05rem; }
.line-id strong { color:#087c38; }
.line-open { display:inline-flex; justify-content:center; border-radius:12px; padding:12px 22px; background:#06c755; color:#fff; font-weight:800; }
.line-open:hover,.line-open:focus-visible { background:#05a948; outline:3px solid rgba(6,199,85,.22); }

@media(max-width:940px){
  nav { display:none; position:absolute; top:76px; right:0; left:0; flex-direction:column; padding:20px; border-bottom:1px solid var(--line); background:#fff; }
  nav.open { display:flex; }
  .nav-shell { gap:12px; }
  .nav-contact { padding:9px 14px; font-size:.84rem; white-space:nowrap; }
  .menu-toggle { display:block; }
  .contact-shell { grid-template-columns:1fr; gap:35px; width:min(720px,calc(100% - 40px)); }
  .contact-intro { text-align:center; }
  .contact-channels { max-width:620px; margin-right:auto; margin-left:auto; }
}
@media(max-width:760px){
  .contact-shell { display:flex; flex-direction:column; align-items:stretch; gap:28px; }
  .contact-intro { display:contents; }
  .contact-intro h1 { order:1; text-align:center; }
  .contact-panel { order:2; }
  .contact-channels { order:3; width:100%; margin-top:8px; }
}
@media(max-width:620px){
  .nav-shell,.contact-shell { width:calc(100% - 28px); }
  .contact-section { padding:42px 0; }
  h1 { font-size:3rem; }
  .contact-channels { grid-template-columns:1fr 1fr; gap:9px; margin-top:25px; }
  .contact-channel { min-height:76px; padding:11px; }
  .channel-icon { width:42px; height:42px; flex-basis:42px; }
  .contact-channel strong { font-size:.8rem; }
  .contact-form { grid-template-columns:1fr; padding:22px 18px; }
  .contact-form .wide { grid-column:auto; }
  .selected-property,.selected-property:not(:has(.selected-image:not([hidden]))) { grid-template-columns:1fr; gap:14px; padding:14px; }
  .selected-image { aspect-ratio:16/9; min-height:0; }
  .selected-facts { gap:6px; }
  .selected-facts div { padding:9px; }
}
@media(max-width:420px){
  .brand > span:last-child { display:none; }
  .nav-shell { gap:8px; }
  .nav-contact { padding:8px 11px; font-size:.78rem; }
  .menu-toggle { width:40px; height:40px; padding:10px; }
  .contact-channels { grid-template-columns:1fr; }
  .line-card { padding:27px 18px; }
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}