/* ==========================================================================
   Wongamat Group — wongamatgroup.com
   Property portal. White ground throughout, one confident blue, navy footer.
   Type: Manrope + IBM Plex Sans Thai + Noto Sans SC.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  color-scheme:light;

  --paper:#FFFFFF;
  --paper-2:#F5F7FA;
  --paper-3:#EDF1F6;
  --card:#FFFFFF;

  --ink:#101828;
  --ink-2:#4A5567;
  --ink-3:#5F6B7D; /* was #78849A (3.77:1) — 5.9:1 on white, Lighthouse a11y, 10 Oct 2026 */

  --line:#E3E8EF;
  --line-2:#CFD6E0;

  /* primary — one blue, used for every action */
  --brand:#0A57C2;
  --brand-2:#0847A0;
  --brand-soft:#E9F0FB;
  --brand-ink:#06356F;

  /* navy band used for the hero strip and the footer — brand navy #0B1F3A (logo) */
  --deep:#0B1F3A;
  --deep-2:#123258;
  --deep-3:#1B457A;
  --on-deep:#FFFFFF;
  --on-deep-2:#B8C6DA;
  --on-deep-3:#8A9CB8;
  --deep-line:rgba(255,255,255,.16);

  --good:#12805C; --good-soft:#E2F4EE;
  --warn:#9A6206; --warn-soft:#FBF0DC;
  --crit:#B0322A; --crit-soft:#FBE7E4;

  /* aliases kept so older component rules keep resolving */
  --brass:var(--brand);
  --brass-2:var(--brand-2);
  --brass-soft:var(--brand-soft);
  --sea:var(--good);
  --sea-soft:var(--good-soft);

  --f-display:"Manrope","IBM Plex Sans Thai","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:var(--f-display);
  --f-mono:ui-monospace,"SF Mono",Menlo,monospace;

  --shell:1240px;
  --gut:clamp(16px,4vw,48px);
  --r:8px;
  --r-sm:6px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.05);
  --shadow-lg:0 12px 20px -6px rgba(16,24,40,.10),0 4px 8px -4px rgba(16,24,40,.06);
  --t:.2s cubic-bezier(.3,.7,.4,1);
}

/* The site is deliberately light-only. A property portal is a shop window:
   the photographs and the prices have to look the same to every visitor, and
   the comparison sites (DDProperty, FazWaz) are all white. The dark palette
   that used to live here has been removed rather than merely overridden, so
   there is no second set of colours to keep in sync. `color-scheme: light`
   below keeps the browser from darkening form controls and scrollbars. */

html[lang="th"] body{line-height:1.8}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{line-height:1.4;letter-spacing:0}
html[lang="zh"] body{line-height:1.78}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
/* A long URL or embed snippet must wrap, not widen the phone viewport (9 Oct 2026). */
code,pre{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
a{color:var(--brand)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4,.h4,.h5{margin:0;font-family:var(--f-display);color:var(--ink);text-wrap:balance}
h1{font-size:clamp(1.85rem,4.2vw,3rem);line-height:1.14;font-weight:800;letter-spacing:-.022em}
h2{font-size:clamp(1.35rem,2.7vw,2rem);line-height:1.22;font-weight:700;letter-spacing:-.016em}
h3{font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.35;font-weight:700;letter-spacing:-.008em}
h4,.h4{font-size:1rem;font-weight:700;line-height:1.45}
.h5{font-size:1rem;font-weight:700;line-height:1.45}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);display:block;margin-bottom:.8rem;
}
html[lang="th"] .eyebrow,html[lang="zh"] .eyebrow{letter-spacing:.04em;font-size:.8rem;text-transform:none}
.eyebrow.on-deep{color:var(--brand)}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.measure{max-width:66ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:12px;top:12px}

/* ---------- 3. header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:18px;height:64px;max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;margin-inline-end:auto;color:var(--deep)}
.mark-n{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.mark-d{width:7px;height:7px;border-radius:2px;background:var(--brand);flex:none}

/* Brand logo — inline Vitruvian-W lockup (currentColor) */
.mark .wg-logo-svg{display:block;width:auto}
.mark-full .wg-logo-svg{height:30px}
.mark-mini{display:none}
.mark-mini .wg-logo-svg{height:30px}
.mark:focus-visible{outline:2px solid var(--deep);outline-offset:4px;border-radius:2px}
/* Below 360px the horizontal lockup is too wide — show the mark alone */
@media (max-width:359px){
  .mark-full{display:none}
  .mark-mini{display:block}
}
/* Footer sits on the navy band: the logo reverses to white */
.ftr-mark{color:var(--on-deep);margin-bottom:14px}
.ftr-mark .wg-logo-svg{height:34px}
.ftr-mark:focus-visible{outline-color:var(--on-deep)}

.nav{display:flex;align-items:center;gap:clamp(6px,1.2vw,10px)}
.nav a{
  text-decoration:none;font-size:.92rem;font-weight:600;color:var(--ink-2);
  padding:8px 12px;border-radius:var(--r-sm);white-space:nowrap;
  transition:background var(--t),color var(--t);
}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}

.hdr-tools{display:flex;align-items:center;gap:8px;flex:none}
.hdr .btn-nav{display:inline-flex;align-items:center;gap:6px}
.hdr .btn-nav svg{width:16px;height:16px;flex:none}
.hdr .btn-nav-line svg{color:#06C755}
.hdr .btn-nav-wa svg{color:#25D366}

.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:8px 11px;cursor:pointer;font-size:.82rem;font-weight:700;
  color:var(--ink-2);transition:border-color var(--t),color var(--t);
}
.lang-btn:hover{border-color:var(--brand);color:var(--brand)}
.lang-btn svg{width:10px;height:10px;opacity:.6;transition:transform var(--t)}
.lang[data-open="true"] .lang-btn svg{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:158px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:5px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.lang[data-open="true"] .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:9px 12px;text-decoration:none;font-size:.88rem;color:var(--ink-2);
  border-radius:var(--r-sm);transition:background var(--t),color var(--t);
}
.lang-menu a:hover{background:var(--paper-2);color:var(--ink)}
.lang-menu a[aria-current="true"]{color:var(--brand);font-weight:700;background:var(--brand-soft)}
.lang-menu .lc{font-size:.7rem;letter-spacing:.1em;color:var(--ink-3)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-sm);text-decoration:none;
  font-size:.92rem;font-weight:700;border:1px solid transparent;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn-b,.btn-p{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-b:hover,.btn-p:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn-o{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn-o:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost-deep{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.btn-ghost-deep:hover{border-color:var(--brand);color:var(--brand)}
.btn-sm{padding:8px 14px;font-size:.85rem}

.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);width:40px;height:38px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:2px;background:var(--ink);position:relative;transition:background var(--t)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink);transition:transform var(--t)}
.burger span::before{top:-5px}.burger span::after{top:5px}
body[data-menu="open"] .burger span{background:transparent}
body[data-menu="open"] .burger span::before{transform:translateY(5px) rotate(45deg)}
body[data-menu="open"] .burger span::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gut) 22px;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity var(--t),transform var(--t),visibility var(--t);
    max-height:calc(100vh - 64px);overflow-y:auto;box-shadow:var(--shadow-lg);
  }
  body[data-menu="open"] .nav{opacity:1;visibility:visible;transform:none}
  .nav a{padding:14px 12px;border-bottom:1px solid var(--line);font-size:1rem;border-radius:0}
  .hdr .btn-nav{display:none}
}

/* ---------- 4. hero bands ---------- */
.hero{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;
  border-bottom:1px solid var(--line)}
.hero-in{max-width:var(--shell);margin:0 auto;padding:clamp(40px,6vw,72px) var(--gut)}
.hero h1{color:var(--ink);max-width:20ch}
.hero .rule{display:none}
.hero-sub{font-size:clamp(.98rem,1.4vw,1.12rem);color:var(--ink-2);max-width:60ch;margin-top:14px}
.hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-note{margin-top:22px;font-size:.82rem;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--line);max-width:56ch}
.hero-sm .hero-in{padding-block:clamp(32px,4.5vw,52px)}
.hero-sm h1{font-size:clamp(1.6rem,3.4vw,2.4rem)}
#glint,.hero-photo{display:none}

/* ---------- 5. sections ---------- */
.sec{padding-block:clamp(40px,5.5vw,72px);scroll-margin-top:80px}
.sec-tight{padding-block:clamp(28px,4vw,48px)}
.sec-paper2{background:var(--paper);border-top:1px solid var(--line)}
.sec-deep{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.sec-deep h2,.sec-deep h3,.sec-deep h4{color:var(--ink)}
.sec-deep p{color:var(--ink-2)}
.sec + .sec{border-top:1px solid var(--line)}

.sec-head{margin-bottom:clamp(22px,3vw,34px);max-width:62ch}
.sec-head p{color:var(--ink-2);margin-top:.6em}
.sec-deep .sec-head p{color:var(--ink-2)}
.sec-head-row{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.6vw,30px)}
.sec-head-row .sec-head{margin-bottom:0}

.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,4vw,56px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr);gap:20px}}
.split .lede p{font-size:1.02rem;color:var(--ink-2)}

/* numbered service rows */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:auto minmax(0,.7fr) minmax(0,1.3fr) auto;
  gap:clamp(14px,3vw,36px);align-items:start;padding-block:clamp(20px,2.6vw,30px);
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background var(--t);
}
a.row:hover{background:var(--brand-soft)}
a.row:hover .row-n{color:var(--brand)}
a.row:hover .row-go{transform:translateX(3px);border-color:var(--brand);color:var(--brand)}
.row > *{min-width:0}
.row-n{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:800;color:var(--line-2);line-height:1.2;transition:color var(--t);font-variant-numeric:tabular-nums}
.row-name h3{margin-bottom:4px}
.row-tag{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
html[lang="th"] .row-tag,html[lang="zh"] .row-tag{letter-spacing:.02em;font-size:.8rem;text-transform:none}
.row-body{color:var(--ink-2);font-size:.94rem}
.row-go{width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--ink-3);flex:none;align-self:center;
  transition:transform var(--t),border-color var(--t),color var(--t)}
.row-go svg{width:13px;height:13px}
@media (max-width:800px){
  .row{grid-template-columns:auto 1fr;gap:12px 16px;padding-block:22px}
  .row-body{grid-column:1/-1}
  .row-go{grid-row:1;grid-column:2;justify-self:end}
  .row-name{grid-column:2}
}

/* card grids */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid > .cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,24px)}
.sec-deep .grid > .cell{background:var(--card);border-color:var(--line)}
.cell h4,.cell .h4{margin-bottom:.5em}
.cell p{color:var(--ink-2);font-size:.92rem;margin:0}
.sec-deep .cell p{color:var(--ink-2)}
.cell-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand);
  font-size:.82rem;font-weight:800;margin-bottom:.9em;font-variant-numeric:tabular-nums}
.sec-deep .cell-n{background:var(--brand-soft);color:var(--brand)}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-4,.grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:20px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h5,.card .h5{margin:0 0 4px;font-size:1rem;font-weight:700}
.card .k{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:8px}
html[lang="th"] .card .k,html[lang="zh"] .card .k{letter-spacing:.02em;font-size:.78rem;text-transform:none}
.card p{font-size:.9rem;color:var(--ink-2);margin:0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,26px)}
.step{position:relative;padding-top:28px}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line)}
.step::after{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--brand)}
.step-n{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--brand);display:block;margin-bottom:.6em}
.step h4{margin-bottom:.4em}
.step p{font-size:.9rem;color:var(--ink-2);margin:0}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* notices */
.note{border:1px solid var(--line);border-inline-start:3px solid var(--brand);background:var(--card);
  padding:clamp(18px,2.4vw,26px);border-radius:var(--r)}
.note > :last-child{margin-bottom:0}
.note h3{margin-bottom:.5em}
.note p{color:var(--ink-2)}
.note.crit,.note.warn{border-inline-start-color:var(--crit);background:var(--crit-soft)}
.note.sea,.note.good{border-inline-start-color:var(--good);background:var(--good-soft)}
.note.brass{border-inline-start-color:var(--brand);background:var(--brand-soft)}
.note .tag{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:var(--brand)}
.note.crit .tag,.note.warn .tag{color:var(--crit)}
.note.sea .tag,.note.good .tag{color:var(--good)}
html[lang="th"] .note .tag,html[lang="zh"] .note .tag{letter-spacing:.02em;font-size:.8rem;text-transform:none}
.sec-deep .note{background:var(--card);border-color:var(--line)}
.sec-deep .note p{color:var(--ink-2)}

/* definition rows */
.dl{border-top:1px solid var(--line)}
.dl-item{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(12px,2.6vw,36px);
  padding-block:clamp(16px,2vw,24px);border-bottom:1px solid var(--line);align-items:baseline}
.dl-item p{color:var(--ink-2);font-size:.94rem;margin:0}
@media (max-width:760px){.dl-item{grid-template-columns:minmax(0,1fr);gap:6px}}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{position:relative;padding-inline-start:24px;color:var(--ink-2);font-size:.94rem}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.52em;width:8px;height:8px;
  border-radius:2px;background:var(--brand)}
.sec-deep .ticks li{color:var(--ink-2)}
.sec-deep .ticks li::before{background:var(--brand)}

/* three-line pricing */
.plines{display:grid;gap:10px;margin-top:20px}
.pline{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(14px,1.8vw,20px);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.pline-b{width:22px;height:3px;border-radius:2px;background:var(--brand);margin-top:.62em}
.pline h4{margin-bottom:.25em}
.pline p{font-size:.9rem;color:var(--ink-2);margin:0}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding-block:clamp(15px,2vw,20px);display:flex;gap:18px;
  align-items:center;justify-content:space-between;font-weight:700;font-size:1rem;transition:color var(--t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq-i{flex:none;width:13px;height:13px;position:relative}
.faq-i::before,.faq-i::after{content:"";position:absolute;background:var(--brand);transition:transform var(--t),opacity var(--t)}
.faq-i::before{top:6px;left:0;width:13px;height:2px}
.faq-i::after{left:6px;top:0;width:2px;height:13px}
.faq details[open] .faq-i::after{transform:rotate(90deg);opacity:0}
.faq details p{padding-bottom:clamp(15px,2vw,22px);color:var(--ink-2);max-width:72ch;margin:0;font-size:.94rem}

.photo-slot{border:1px dashed var(--line-2);background:var(--paper-2);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;min-height:180px;color:var(--ink-3);
  font-size:.8rem;font-weight:700;border-radius:var(--r)}

/* cta band */
.cta-band{background:var(--brand-soft);color:var(--ink);text-align:center;border-top:1px solid var(--line)}
.cta-band h2{color:var(--ink);margin-inline:auto;max-width:22ch}
.cta-band p{color:var(--ink-2);margin:.9em auto 0;max-width:54ch}
.cta-band .hero-acts{justify-content:center;margin-top:26px}

.row-btns{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 6. contact page ---------- */
.chan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  text-decoration:none;display:flex;flex-direction:column;gap:9px;transition:border-color var(--t),box-shadow var(--t)}
.chan:hover{border-color:var(--brand);box-shadow:var(--shadow-md)}
.chan svg{width:24px;height:24px;color:var(--brand)}
.chan b{font-size:.98rem;font-weight:700;color:var(--ink)}
.chan span{font-size:.85rem;color:var(--ink-2);word-break:break-word}
@media (max-width:860px){.chan-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.chan-grid{grid-template-columns:minmax(0,1fr)}}

.office{display:grid;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.office-row{padding:15px 20px;display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1.62fr);gap:16px;
  align-items:baseline;border-bottom:1px solid var(--line)}
.office-row:last-child{border-bottom:0}
.office-row dt{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0}
html[lang="th"] .office-row dt,html[lang="zh"] .office-row dt{letter-spacing:.01em;font-size:.82rem;text-transform:none}
.office-row dd{margin:0;font-size:.94rem}
@media (max-width:620px){.office-row{grid-template-columns:minmax(0,1fr);gap:3px}}

/* forms */
.form{display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-size:.84rem;font-weight:700;color:var(--ink)}
.field .req{color:var(--brand);margin-inline-start:3px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.94rem;color:var(--ink);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 13px;
  transition:border-color var(--t),box-shadow var(--t);
}
.field textarea{min-height:126px;resize:vertical;line-height:1.6}
.field select{appearance:none;padding-inline-end:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378849A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.field-2{grid-template-columns:minmax(0,1fr)}}
.form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.form-privacy{font-size:.8rem;color:var(--ink-3);max-width:42ch;margin:0}
.form-msg{padding:18px 20px;border-radius:var(--r);display:none;margin-bottom:16px}
.form-msg h4{margin-bottom:.35em}
.form-msg p{font-size:.9rem;margin:0}
.form-msg.ok{display:block;background:var(--good-soft);border:1px solid var(--good);color:var(--ink)}
.form-msg.bad{display:block;background:var(--crit-soft);border:1px solid var(--crit);color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- 7. chat dock ---------- */
.dock{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.dock-list{display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.96);transform-origin:bottom right;
  transition:opacity var(--t),transform var(--t),visibility var(--t)}
.dock[data-open="true"] .dock-list{opacity:1;visibility:visible;transform:none}
.dock-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:100px;padding:9px 17px 9px 12px;text-decoration:none;box-shadow:var(--shadow-md);
  font-size:.87rem;font-weight:700;white-space:nowrap;cursor:pointer;color:var(--ink);
  transition:border-color var(--t),transform var(--t)}
.dock-item:hover{border-color:var(--brand);transform:translateX(-3px)}
.dock-item svg{width:19px;height:19px;flex:none;color:var(--brand)}
.dock-toggle{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);
  transition:background var(--t)}
.dock-toggle:hover{background:var(--brand-2)}
.dock-toggle svg{width:23px;height:23px}
.dock-toggle .ic-x{display:none}
.dock[data-open="true"] .dock-toggle .ic-x{display:block}
.dock[data-open="true"] .dock-toggle .ic-c{display:none}
@media (max-width:520px){.dock{inset-block-end:12px;inset-inline-end:12px}}

.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(11,37,69,.6)}
.modal[data-open="true"]{display:flex}
.modal-box{background:var(--card);border-radius:var(--r);padding:28px;max-width:340px;text-align:center;box-shadow:var(--shadow-lg)}
.modal-box h4{margin-bottom:.5em}
.modal-box p{font-size:.87rem;color:var(--ink-2);margin-bottom:1.1em}
.modal-box .qr{width:200px;height:200px;margin:0 auto 18px;border:1px solid var(--line);border-radius:var(--r-sm)}

/* ---------- 7b. mobile contact (19 Sep 2026) ----------
   .mbar = property detail pages: price + call + WhatsApp + LINE, fixed to the bottom.
   .mbar-site = every other page: brand + hours + the same three buttons (was floating circles).
   Both mobile-only (<=768px); z-index 80 sits over the sticky header (60) and
   under the WeChat modal (90); hidden while the burger menu is open. */
.mbar,.mfab{display:none}
@media (max-width:768px){
  .mbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:80;display:flex;align-items:center;gap:8px;
    min-height:60px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 14px -6px rgba(16,24,40,.18)}
  .mbar-price{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
  .mbar-price b{font-size:1.08rem;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbar-price b small{font-size:.74rem;font-weight:600;color:var(--ink-2);margin-inline-start:2px}
  .mbar-price b.por{font-size:.92rem}
  .mbar-price span{font-size:.72rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 14px;
    border-radius:var(--r-sm);font-size:.88rem;font-weight:700;text-decoration:none;white-space:nowrap;border:1px solid transparent}
  .mbar-btn svg{width:19px;height:19px;flex:none}
  .mbar-wa{background:var(--brand);color:#fff;border-color:var(--brand)}
  .mbar-wa:active{background:var(--brand-2)}
  .mbar-line{background:var(--card);color:var(--ink);border-color:var(--line-2)}
  .mbar-line svg{color:#06C755}
  .mbar-call{width:44px;padding:0;background:var(--card);color:var(--brand);border-color:var(--line-2)}
  body.has-mbar .ftr{padding-bottom:calc(26px + 64px + env(safe-area-inset-bottom,0px))}

  /* 9 Oct 2026: the floating circles (.mfab) became the same bar on every page (.mbar-site). */
  .mbar-site .mbar-price b{font-size:.95rem}
  .ftr{padding-bottom:calc(26px + 64px + env(safe-area-inset-bottom,0px))}
  body[data-menu="open"] .mbar,body[data-menu="open"] .mfab{display:none}
}
@media (max-width:430px){.mbar-btn{padding:0 12px}.mbar-line span{display:none}.mbar-price b{font-size:1rem}}
@media (max-width:360px){.mbar-btn{padding:0 10px}.mbar-wa span{display:none}}
@media print{.mbar,.mfab{display:none!important}}

/* ---------- 8. footer ---------- */
.ftr{background:var(--deep);color:var(--on-deep-2);padding-block:clamp(40px,5vw,60px) 26px;font-size:.9rem}
.ftr a{color:var(--on-deep-2);text-decoration:none;transition:color var(--t)}
.ftr a:hover{color:#fff}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(22px,3.5vw,44px);padding-bottom:clamp(28px,3.5vw,40px);border-bottom:1px solid var(--deep-line)}
@media (max-width:860px){.ftr-top{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:520px){.ftr-top{grid-template-columns:minmax(0,1fr)}}
.ftr .mark-n{color:#fff}
.ftr-tag{margin-top:12px;max-width:36ch;color:var(--on-deep-3);font-size:.87rem}
.ftr h4,.ftr .h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#8FBBF5;margin-bottom:1em;font-weight:800}
html[lang="th"] .ftr h4,html[lang="zh"] .ftr h4,.ftr .h4{letter-spacing:.02em;font-size:.82rem;text-transform:none}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ftr-bot{padding-top:22px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start}
.ftr-legal{font-size:.76rem;color:var(--on-deep-3);max-width:80ch;line-height:1.65}
.ftr-copy{font-size:.78rem;color:var(--on-deep-3)}
/* Never nowrap this line: with the company registration number (26 Sep 2026) it is
   599px wide, which on a 390px phone widened the layout viewport to 615px — every
   page rendered zoomed out and the fixed contact bar's WhatsApp/LINE buttons sat
   past the right edge of the screen. Found 9 Oct 2026. */
@media (min-width:901px){.ftr-copy{white-space:nowrap}}

/* ---------- 9. reveal ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- 10. language chooser / 404 ---------- */
.pick{min-height:100vh;display:grid;place-items:center;background:var(--paper);color:var(--ink);padding:40px 24px;text-align:center}
.pick .mark-n{color:var(--ink);font-size:1.5rem}
.pick-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.pick-list a{display:block;padding:14px 28px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);font-weight:700;transition:background var(--t),border-color var(--t)}
.pick-list a:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.pick small{display:block;margin-top:24px;color:var(--ink-3);font-size:.82rem}

/* ---- rental fleet (Vehicles section of /services/) --------------------- */
.fleet{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:18px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column}
.fcard-ph{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--paper2)}
.fcard-b{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1 1 auto}
.fcard-b h4{margin:0;font-size:1.02rem;line-height:1.15}
.fcard-tag{display:block;margin-top:4px;font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand)}
.fcard-b p{margin:10px 0 0;font-size:.85rem;line-height:1.45;color:var(--ink-2)}
.fcard-p{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.fcard-p0{display:flex;align-items:baseline;gap:7px}
.fcard-p0 b{font-size:1.28rem;font-weight:800;line-height:1}
.fcard-p0 span{font-size:.76rem;color:var(--ink-3)}
.fcard-p1{margin-top:6px;font-size:.79rem;font-weight:700;line-height:1.5}
.fcard-p1 i{font-style:normal;font-weight:400;color:var(--ink-3)}
.fcard-l{margin-top:10px;font-size:.68rem;color:var(--ink-3);letter-spacing:.03em}
.fleet-note{margin-top:16px;font-size:.82rem;color:var(--ink-3);max-width:78ch}
@media (max-width:520px){.fleet{grid-template-columns:1fr}}

/* ---- vehicle detail page ---------------------------------------------- */
.fcard{color:inherit;text-decoration:none;transition:border-color .16s,transform .16s,box-shadow .16s}
a.fcard:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,37,69,.08)}
a.fcard:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vhead{padding-top:clamp(18px,2.4vw,28px)}
.crumbs{font-size:.82rem;color:var(--ink-3);margin-bottom:18px}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--brand)}
.crumbs span{margin:0 6px}
.crumbs span[aria-current]{margin:0;color:var(--ink-2)}
.vtop{display:grid;gap:clamp(20px,3vw,38px);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.vgal-main{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--paper2)}
.vgal-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px}
.vgal-t{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper2);cursor:pointer;line-height:0}
.vgal-t img{width:100%;height:64px;object-fit:cover;display:block}
.vgal-t[aria-current="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.vgal-t:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vinfo h1{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1;margin:6px 0 0}
.vspec{margin-top:12px;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.vprice{margin-top:18px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vprice .fcard-p0 b{font-size:1.7rem}
.vprice .fcard-p1{font-size:.86rem;margin-top:8px}
.vprice .fcard-l{display:block;margin-top:10px}
.vinc{margin-top:16px;font-size:.84rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.vinc b{flex:1 0 100%;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-bottom:2px}
.vinc span{position:relative;padding-left:14px}
.vinc span:before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:50%;background:var(--good)}
.vask{margin-top:26px;font-size:1.06rem}
.vasknote{margin-top:8px;font-size:.85rem;color:var(--ink-3);line-height:1.5}
.vbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:14px}
.vbtn{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;font-size:.88rem;transition:border-color .16s,background .16s}
.vbtn svg{width:19px;height:19px;flex:none;color:var(--brand)}
.vbtn:hover{border-color:var(--brand);background:var(--brand-soft)}
.vbtn.wa{background:var(--brand);border-color:var(--brand);color:#fff}
.vbtn.wa svg{color:#fff}
.vbtn.wa:hover{filter:brightness(1.06)}
.vrules{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:6px}
.vrules li{font-size:.88rem;line-height:1.5;color:var(--ink-2);padding-left:14px;position:relative}
.vrules li:before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--brand)}
.vrules b{display:block;color:var(--ink)}
@media (max-width:820px){.vtop{grid-template-columns:1fr}}

/* ---- New projects (9 Oct 2026): home promo bar, hub cards, project page ---- */
.npbar{background:var(--deep);color:#fff;border-bottom:1px solid var(--deep-line);margin-top:28px}
.npbar-in{max-width:var(--shell);margin-inline:auto;padding:14px var(--gut);display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.npbar-k{flex:none;text-decoration:none;cursor:pointer;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#FFD166;border:1px solid rgba(255,209,102,.5);border-radius:999px;padding:4px 10px}
html[lang="th"] .npbar-k,html[lang="zh"] .npbar-k{letter-spacing:.04em;text-transform:none}
.npbar-t{flex:1 1 320px;min-width:0;text-decoration:none;color:#fff}
.npbar-k:hover{background:rgba(255,209,102,.15)}
.npbar-t:hover b{text-decoration:underline;text-underline-offset:3px}
.npbar-t b{display:block;font-size:1.02rem;line-height:1.3}
.npbar-t span{display:block;font-size:.88rem;color:rgba(255,255,255,.78);margin-top:3px}
.npbar .btn{flex:none}
@media (max-width:640px){.npbar-in{padding-block:12px}.npbar .btn{width:100%;justify-content:center}}
.npcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.npcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:box-shadow var(--t),transform var(--t)}
.npcard:hover{box-shadow:0 10px 30px rgba(16,24,40,.08);transform:translateY(-2px)}
.npcard .k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:700}
html[lang="th"] .npcard .k,html[lang="zh"] .npcard .k{letter-spacing:.03em;text-transform:none}
.npcard h3{font-size:1.15rem;margin:0}
.npcard .np-price{font-size:1.35rem;font-weight:700;color:var(--deep);line-height:1.2}
.npcard .np-price small{display:block;font-size:.78rem;font-weight:500;color:var(--ink-2)}
.npcard p{color:var(--ink-2);font-size:.92rem;margin:0;flex:1}
.npcard .np-meta{font-size:.82rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 14px}
.npcard .np-go{font-weight:600;color:var(--brand)}
.np-hook{background:var(--brand-soft);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;font-weight:600;color:var(--deep);margin-top:18px}
.np-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.np-glance div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.np-glance dt{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 4px}
html[lang="th"] .np-glance dt,html[lang="zh"] .np-glance dt{letter-spacing:0;text-transform:none}
.np-glance dd{margin:0;font-weight:600;color:var(--ink)}
.np-video{position:relative;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9;max-width:960px;margin-inline:auto}
.np-video video{width:100%;height:100%;display:block;object-fit:cover}
.np-video-note,.np-foot{font-size:.82rem;color:var(--ink-2);margin-top:10px}
table.np{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.np th,table.np td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.np th{background:var(--paper-2);color:var(--ink-2);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
html[lang="th"] table.np th,html[lang="zh"] table.np th{text-transform:none;letter-spacing:0}
table.np td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
table.np td b{color:var(--deep)}
.np-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.np-bigprice{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:var(--deep);line-height:1.1;margin:0 0 6px}
.np-bigprice small{display:block;font-size:.9rem;font-weight:500;color:var(--ink-2);margin-top:6px}
.np-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.np-plan div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.np-plan h4{margin:0 0 6px;font-size:.95rem}
.np-plan p{margin:0;color:var(--ink-2);font-size:.92rem}
/* ---- New projects gallery: editorial mosaic + lightbox (9 Oct 2026) ---- */
.npg{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(70px,9vw,120px);grid-auto-flow:dense;gap:8px}
.npg a{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--paper-3);grid-column:span 2;grid-row:span 2}
.npg a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.npg a:hover img{transform:scale(1.04)}
.npg a span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(11,31,58,.75));opacity:0;transition:opacity var(--t)}
html[lang="th"] .npg a span,html[lang="zh"] .npg a span{letter-spacing:0;text-transform:none}
.npg a:hover span,.npg a:focus-visible span{opacity:1}
.npg .g-hero{grid-column:span 4;grid-row:span 4}
.npg .g-tall{grid-column:span 2;grid-row:span 4}
.npg .g-wide{grid-column:span 4;grid-row:span 2}
.npg .g-big{grid-column:span 3;grid-row:span 3}
.npg a.is-hidden{display:none}
.npg-more{text-align:center;margin-top:18px}
@media (max-width:760px){.npg{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(60px,13vw,90px);gap:6px}.npg .g-hero{grid-column:span 4;grid-row:span 3}.npg .g-big{grid-column:span 2;grid-row:span 3}.npg .g-wide{grid-column:span 4;grid-row:span 2}.npg .g-tall{grid-column:span 2;grid-row:span 3}.npg a span{opacity:1;font-size:.66rem}}
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,12,24,.94);display:none;align-items:center;justify-content:center}
.lb.is-on{display:flex}
.lb img{max-width:min(96vw,1800px);max-height:88vh;object-fit:contain;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:rgba(255,255,255,.8);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;width:46px;height:46px;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb-x{top:16px;right:16px}.lb-p{left:12px;top:50%;transform:translateY(-50%)}.lb-n{right:12px;top:50%;transform:translateY(-50%)}
.npg-hub{margin-top:8px}
/* header: three buttons only fit with labels above ~1180px; below that LINE and WhatsApp go icon-only (9 Oct 2026) */
@media (max-width:1180px) and (min-width:901px){.hdr .btn-nav-wa span,.hdr .btn-nav-line span{display:none}.hdr .btn-nav-wa,.hdr .btn-nav-line{padding-inline:10px}.hdr .btn-nav-wa svg,.hdr .btn-nav-line svg{width:18px;height:18px}}
/* phones: keep the WhatsApp icon in the header next to the menu (K, 9 Oct 2026) */
@media (max-width:900px){.hdr .btn-nav-wa{display:inline-flex;padding-inline:9px}.hdr .btn-nav-wa span{display:none}.hdr .btn-nav-wa svg{width:20px;height:20px}}

/* ---- New projects: editorial layer (9 Oct 2026 — white, serif display, bronze accent, numbered chapters) ---- */
.np-edit{--np-gold:#8E7350;--np-serif:"Cormorant Garamond","Noto Serif Thai","Noto Serif SC",Georgia,"Times New Roman",serif}
.np-edit .hero{border-bottom:0;background:#fff}
.np-edit .hero-in{padding-block:clamp(56px,8vw,112px)}
.np-edit .hero h1,.np-edit h2,.np-edit .np-serif{font-family:var(--np-serif);font-weight:500;letter-spacing:-.01em;line-height:1.05}
.np-edit .hero h1{font-size:clamp(2.4rem,6vw,5rem);max-width:16ch}
html[lang="th"] .np-edit .hero h1{line-height:1.25;font-size:clamp(2rem,5vw,4rem)}
html[lang="zh"] .np-edit .hero h1{line-height:1.25;font-size:clamp(2rem,4.6vw,3.8rem)}
.np-edit .hero-sub{font-size:clamp(1rem,1.3vw,1.15rem);max-width:56ch;margin-top:22px;color:var(--ink-2)}
.np-edit .eyebrow,.np-edit .np-eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--np-gold);margin-bottom:18px}
html[lang="th"] .np-edit .eyebrow,html[lang="zh"] .np-edit .eyebrow,html[lang="th"] .np-edit .np-eyebrow,html[lang="zh"] .np-edit .np-eyebrow{letter-spacing:.08em;text-transform:none;font-size:.8rem}
.np-edit .sec-head h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.np-edit .sec-head p{margin-top:12px}
.np-edit .sec-paper2{background:#fff;border-top:1px solid var(--line)}
.np-edit .sec{padding-block:clamp(52px,7vw,104px)}
.np-edit .sec-tight{padding-block:clamp(36px,5vw,72px)}
.np-edit .crumbs{margin:0;padding-block:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.np-edit .np-hook{background:#fff;border:0;border-top:1px solid var(--np-gold);border-bottom:1px solid var(--np-gold);border-radius:0;padding:18px 0;font-family:var(--np-serif);font-weight:500;font-size:1.25rem;color:var(--ink)}
.np-edit .np-glance{gap:0;grid-template-columns:repeat(2,1fr)}
.np-edit .np-glance div{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0}
.np-edit .np-glance dt{color:var(--np-gold);letter-spacing:.16em}
.np-edit .np-bigprice{font-family:var(--np-serif);font-weight:500;font-size:clamp(2.4rem,5vw,4rem)}
.np-edit table.np{border:0;border-radius:0;border-top:1px solid var(--ink)}
.np-edit table.np th{background:#fff;color:var(--np-gold);letter-spacing:.14em;font-size:.7rem;border-bottom:1px solid var(--ink)}
.np-edit .np-plan div,.np-edit .grid > .cell,.np-edit .npcard{border-radius:0;background:#fff}
.np-edit .grid > .cell{border:0;border-top:1px solid var(--ink);padding-inline:0}
.np-edit .cell h4,.cell .h4{font-family:var(--np-serif);font-weight:500;font-size:1.3rem}
.np-edit .cell-n{background:transparent;color:var(--np-gold);font-family:var(--np-serif);font-size:1.2rem;width:auto;height:auto;margin-bottom:8px}
.np-edit .dl-item h4,.np-edit .dl-item .h4{font-family:var(--np-serif);font-weight:500;font-size:1.25rem}
.np-edit .faq summary{font-family:var(--np-serif);font-weight:500;font-size:1.2rem}
.np-edit .np-video video{pointer-events:auto}
.np-edit .cta-band{background:#fff;border-top:1px solid var(--line)}
.np-edit .cta-band h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.np-edit .npg a{border-radius:0}
.np-edit .npbar,.np-edit .npcard{border-radius:0}
/* chapters on the hub */
.npc{padding-block:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.npc-head{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,48px);align-items:start;margin-bottom:clamp(28px,4vw,56px)}
.npc-n{font-family:var(--np-serif);font-size:clamp(2.6rem,6vw,5.5rem);line-height:.9;color:var(--np-gold);font-weight:400}
.npc-head h2{font-size:clamp(2.2rem,5vw,4.2rem);max-width:14ch}
html[lang="th"] .npc-head h2,html[lang="zh"] .npc-head h2{line-height:1.25}
.npc-tag{font-size:1.05rem;color:var(--ink-2);max-width:60ch;margin-top:14px}
.npc-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:start}
.npc-rev .npc-body{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.npc-rev .npc-body > .npc-art{order:2}
.npc-art{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(30px,3.9vw,56px);gap:0;position:relative}
.npc-art a{display:block;overflow:hidden;position:relative;background:var(--paper-3)}
.npc-art a img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.npc-art a:hover img{transform:scale(1.03)}
.npc-art .a1{grid-column:1/9;grid-row:1/8;z-index:1}
.npc-art .a2{grid-column:7/13;grid-row:5/12;z-index:2;box-shadow:0 30px 60px -30px rgba(16,24,40,.35)}
.npc-art .a3{grid-column:1/6;grid-row:9/14;z-index:3;box-shadow:0 30px 60px -30px rgba(16,24,40,.35)}
.npc-rev .npc-art .a1{grid-column:5/13}
.npc-rev .npc-art .a2{grid-column:1/7}
.npc-rev .npc-art .a3{grid-column:8/13}
.npc-art .a-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;color:#fff;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(transparent,rgba(11,31,58,.6));opacity:0;transition:opacity var(--t)}
.npc-art a:hover .a-cap{opacity:1}
html[lang="th"] .npc-art .a-cap,html[lang="zh"] .npc-art .a-cap{letter-spacing:.04em;text-transform:none}
.npc-facts{border-top:1px solid var(--ink)}
.npc-facts dl{margin:0}
.npc-facts .row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.npc-facts dt{color:var(--ink-3);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding-top:3px}
html[lang="th"] .npc-facts dt,html[lang="zh"] .npc-facts dt{letter-spacing:.04em;text-transform:none;font-size:.82rem}
.npc-facts dd{margin:0;color:var(--ink);font-weight:500}
.npc-price{padding:22px 0 18px;border-bottom:1px solid var(--line)}
.npc-price .k{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--np-gold);margin-bottom:8px}
html[lang="th"] .npc-price .k,html[lang="zh"] .npc-price .k{letter-spacing:.04em;text-transform:none;font-size:.82rem}
.npc-price b{font-family:var(--np-serif);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;color:var(--ink);display:block}
.npc-price small{display:block;color:var(--ink-2);margin-top:8px;font-size:.88rem}
.npc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.npc-acts .btn{border-radius:0}
.npc-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.npc-points li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.95rem;color:var(--ink-2)}
.npc-points li::before{content:"";width:18px;height:1px;background:var(--np-gold);margin-top:.75em}
.np-list{counter-reset:np;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--ink)}
.np-list > div{counter-increment:np;padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:18px}
.np-list > div::before{content:counter(np,decimal-leading-zero);font-family:var(--np-serif);font-size:1.4rem;color:var(--np-gold);line-height:1.1}
.np-list h4{font-family:var(--np-serif);font-weight:500;font-size:1.3rem;margin:0 0 6px}
.np-list p{margin:0;color:var(--ink-2);font-size:.93rem}
.np-scroll{display:inline-flex;align-items:center;gap:12px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:34px}
.np-scroll::after{content:"";width:1px;height:38px;background:var(--ink-3);animation:npdrop 2.2s ease-in-out infinite}
@keyframes npdrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.np-scroll::after{animation:none}}
@media (max-width:900px){.npc-body,.npc-rev .npc-body{grid-template-columns:minmax(0,1fr)}.npc-rev .npc-body > .npc-art{order:0}.npc-art{grid-auto-rows:clamp(22px,6.5vw,36px)}.np-list{grid-template-columns:minmax(0,1fr)}.npc-head{grid-template-columns:minmax(0,1fr)}.npc-n{font-size:2.4rem}}
html[lang="th"] .npc-head h2,html[lang="zh"] .npc-head h2{max-width:none;font-size:clamp(1.9rem,4vw,3.3rem)}
html[lang="th"] .np-edit .hero h1,html[lang="zh"] .np-edit .np-edit .hero h1{max-width:22ch}
.np-edit h1 em,.np-edit h2 em{font-style:italic;font-weight:400;color:var(--np-gold)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crumb-toc{float:right;margin:0}.crumb-toc a{margin-left:14px;color:var(--ink-2)}@media (max-width:640px){.crumb-toc{display:none}}
.np-edit .npc:first-of-type{border-top:0}
/* Thai / Chinese: the serif display face has no Thai or CJK glyphs — keep those headings in the site display font so digits do not switch faces mid-line */
html[lang="th"] .np-edit h1,html[lang="th"] .np-edit h2,html[lang="th"] .np-edit h3,html[lang="th"] .np-edit h4,html[lang="th"] .np-edit .np-serif,html[lang="th"] .np-edit .faq summary,html[lang="th"] .np-edit .np-hook,html[lang="th"] .np-edit .np-bigprice,html[lang="th"] .npc-price b,
html[lang="zh"] .np-edit h1,html[lang="zh"] .np-edit h2,html[lang="zh"] .np-edit h3,html[lang="zh"] .np-edit h4,html[lang="zh"] .np-edit .np-serif,html[lang="zh"] .np-edit .faq summary,html[lang="zh"] .np-edit .np-hook,html[lang="zh"] .np-edit .np-bigprice,html[lang="zh"] .npc-price b{font-family:var(--f-display);font-weight:600;letter-spacing:0}
html[lang="th"] .np-edit h1 em,html[lang="zh"] .np-edit h1 em{font-style:normal}
.npg-plans{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
.npg-plans a,.npg-plans .g-hero,.npg-plans .g-wide,.npg-plans .g-tall{grid-column:auto;grid-row:auto;aspect-ratio:4/3;background:#fff;border:1px solid var(--line)}
.npg-plans a img{object-fit:contain}
.npg-plans a span{color:var(--ink);background:linear-gradient(transparent,rgba(255,255,255,.9));opacity:1}
@media (max-width:760px){.npg-plans{grid-template-columns:repeat(2,1fr)}}

/* ---------- new-project hero (9 Oct 2026): name + concept, then one edge-to-edge render ---------- */
.nph{background:#fff;border-bottom:0}
.np-edit .nph .hero-in.nph-in{padding-block:clamp(44px,6vw,88px) clamp(28px,3.5vw,44px);text-align:center;max-width:var(--shell)}
.nph-in .eyebrow{margin-bottom:22px}
.np-edit .nph h1{max-width:none;margin:0 auto;font-size:clamp(2.6rem,6.5vw,5.6rem);letter-spacing:-.005em}
html[lang="th"] .np-edit .nph h1{line-height:1.2}
.nph-local{margin:10px 0 0;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
html[lang="th"] .nph-local,html[lang="zh"] .nph-local{letter-spacing:.06em;text-transform:none;font-size:.95rem}
.nph-concept{margin:clamp(18px,2.4vw,30px) auto 0;font-family:var(--np-serif);font-weight:400;font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.25;max-width:30ch;color:var(--ink)}
.nph-concept em{font-style:italic;background:linear-gradient(90deg,#0B1F3A 0%,#2F6F93 55%,#8E7350 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="th"] .nph-concept{line-height:1.5;font-weight:300;font-size:clamp(1.3rem,2.4vw,1.9rem)}
.nph-sub{margin:14px auto 0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--np-gold);max-width:70ch}
html[lang="th"] .nph-sub,html[lang="zh"] .nph-sub{letter-spacing:.04em;text-transform:none;font-size:.9rem}
.nph-kv{position:relative;margin:0;width:100%;aspect-ratio:16/8;max-height:80vh;overflow:hidden;background:#EAF2F7}
.nph-kv picture,.nph-kv img{display:block;width:100%;height:100%;object-fit:cover}
.nph-kv:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#0B1F3A,#2F6F93)}
.nph-kv figcaption{position:absolute;right:16px;bottom:12px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.5);max-width:60%;text-align:right}
.nph-plus{position:absolute;top:12px;left:16px;color:#fff;font-size:1.1rem;line-height:1;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.nph-plus.r{left:auto;right:16px}
.np-edit .nph .hero-in.nph-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;padding-block:clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.nph-price{margin:0;font-family:var(--np-serif);font-size:1.05rem;color:var(--ink-2)}
.nph-price b{font-weight:500;font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--ink);margin-left:6px;font-variant-numeric:lining-nums tabular-nums}
.nph-price small{display:block;font-family:"Manrope","Sarabun",system-ui,sans-serif;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--np-gold);margin-top:2px}
.nph-hook{margin:0;flex:1 1 320px;font-size:.95rem;color:var(--ink-2);min-width:0}
@media (max-width:700px){
  .nph-kv{aspect-ratio:4/3;max-height:none}
  .np-edit .nph .hero-in.nph-strip{flex-direction:column;align-items:flex-start;gap:12px}
  .nph-strip .btn{width:100%;text-align:center}
}
html[lang="th"] .np-edit .nph h1,html[lang="zh"] .np-edit .nph h1{font-family:var(--np-serif);font-weight:500;letter-spacing:-.005em}
html[lang="th"] .np-edit .nph-concept,html[lang="zh"] .np-edit .nph-concept{font-family:var(--f-display);font-weight:400}
html[lang="th"] .np-edit .nph-concept em,html[lang="zh"] .np-edit .nph-concept em{font-style:normal;font-weight:600}
/* plan groups (10 Oct 2026): three galleries, one lightbox */
.np-plans-h{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:38px 0 14px;padding-top:18px;border-top:1px solid var(--line)}
.np-plans-h:first-of-type{border-top:0;padding-top:0;margin-top:0}
.np-plans-h small{font-family:var(--font-body,inherit);font-size:.75rem;letter-spacing:.14em;color:var(--np-gold);font-weight:600;margin-left:6px;vertical-align:middle}
.npg-plans a span{font-variant-numeric:tabular-nums;font-size:.72rem}
table.np-cmp th[scope=row]{text-align:left;font-weight:600}
table.np-cmp th[scope=row] small,table.np-cmp td small{display:block;font-weight:400;font-size:.72rem;color:var(--ink-3);margin-top:2px}
table.np-cmp td,table.np-cmp th{white-space:nowrap}
table.np-cmp td:nth-child(6),table.np-cmp td:nth-child(7),table.np-cmp td:nth-child(8),table.np-cmp td:nth-child(9){white-space:normal;min-width:120px;font-size:.82rem}

/* ---- VVIP special-price panel (10 Oct 2026, K: "ปุ่มพิเศษ ในการขอดูราคา") ---- */
.vvip{margin:22px 0 26px;border:1px solid #C9A961;border-radius:14px;background:#fff;overflow:hidden}
.vvip-btn{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;
  background:linear-gradient(135deg,#0B1F3A 0%,#1B457A 100%);color:#fff;font-weight:700;font-size:1.05rem}
.vvip-btn::-webkit-details-marker{display:none}
.vvip-btn::after{content:"+";margin-left:auto;font-size:1.4rem;font-weight:400;color:#E6CF94}
.vvip[open] .vvip-btn::after{content:"–"}
.vvip-btn small{font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#0B1F3A;background:#E6CF94;border-radius:99px;padding:3px 10px}
.vvip-star{color:#E6CF94;font-size:1.2rem}
.vvip-body{padding:22px 20px 18px}
.vvip-body h3{font-size:1.45rem;margin:0 0 12px}
.vvip-remark{margin:0 0 10px;padding:12px 14px;border-left:3px solid #C9A961;background:#FBF7EC;color:var(--ink);font-size:.95rem;line-height:1.55}
.vvip-remark b{color:#8A6A1F;margin-right:4px}
.vvip-asof{margin:0 0 14px;color:var(--ink-2);font-size:.88rem}
.vvip-t td b{color:var(--deep)}
.vvip-h{margin:22px 0 10px;font-size:1rem}
.vvip-fees{margin:0;padding-left:18px;color:var(--ink-2);font-size:.92rem;line-height:1.7}
.vvip-full{margin-top:22px;padding:18px;border-radius:12px;background:var(--paper-2);display:grid;gap:14px}
.vvip-full h4{margin:0 0 4px}.vvip-full p{margin:0;color:var(--ink-2);font-size:.92rem}
.vvip-acts{display:flex;flex-wrap:wrap;gap:10px}
.vvip-acts .btn{display:inline-flex;align-items:center;gap:8px}
.vvip-acts .btn svg{width:18px;height:18px}
.vvip-cta{background:linear-gradient(135deg,#C9A961,#E6CF94);color:#0B1F3A;border:0;font-weight:700;margin-right:10px}
.vvip-cta:hover{filter:brightness(1.05)}
@media (min-width:860px){.vvip-full{grid-template-columns:1fr auto;align-items:center}}
@media (max-width:640px){
  .vvip-t thead{display:none}
  .vvip-t,.vvip-t tbody,.vvip-t tr,.vvip-t td{display:block;width:100%}
  .vvip-t tr{border-bottom:1px solid var(--line);padding:10px 0}
  .vvip-t td{border:0!important;padding:3px 0!important;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .vvip-t td.vt{font-weight:700;font-size:1rem;text-align:left}
  .vvip-t td[data-l]::before{content:attr(data-l);color:var(--ink-3);font-size:.82rem;text-align:left}
}

/* ---- currency switcher (10 Oct 2026) ---- */
.fx{display:inline-flex;align-items:center}
.fx-sel{appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6577' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center/10px 6px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 26px 8px 11px;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink-2);cursor:pointer;line-height:1.2}
.fx-sel:hover{border-color:var(--brand);color:var(--brand)}
.fx-sel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav-fx{display:none}
@media (max-width:900px){.fx-hdr{display:none}.nav-fx{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px;border-bottom:1px solid var(--line)}.nav-fx::before{content:attr(data-label)}.nav-fx .fx-sel{font-size:.95rem;padding:10px 30px 10px 12px}}
html[data-fx] .fx-sel{border-color:var(--brand);color:var(--brand)}

/* Hub: pick by bedrooms (plan C4, 10 Oct 2026) */
.hb{display:grid;gap:10px}
.hb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid #e6e9ef}
.hb-row:last-child{border-bottom:0}
.hb-name{font-weight:600;color:#0B1F3A;min-width:220px;text-decoration:none}
.hb-name:hover{text-decoration:underline}
@media (max-width:640px){.hb-name{min-width:100%}}
.updated{font-size:.85rem;color:#5b6577;margin:0 0 10px}

/* ---- mobile header: Add LINE + currency always visible (12 Oct 2026, K) ----
   ≤900px used to hide both (LINE only in the bottom bar, currency inside the burger menu). */
@media (max-width:900px){
  .hdr-tools{gap:6px}
  .fx-hdr{display:inline-flex}
  .fx-hdr .fx-sel{font-size:16px;padding:7px 22px 7px 8px;background-position:right 7px center;height:38px;box-sizing:border-box;line-height:1} /* 16px = no iOS focus zoom */
  .lang-btn{padding:0 9px;height:38px;box-sizing:border-box}
  .hdr .btn-nav-line{display:inline-flex;padding-inline:9px;min-height:38px}
  .hdr .btn-nav-line span{display:none}
  .hdr .btn-nav-line svg{width:20px;height:20px}
  .hdr .btn-nav-wa{min-height:38px}
  .nav-fx{display:none} /* currency lives in the header now — no duplicate in the menu */
}
/* five tools + the full lockup do not fit a phone — show the W mark alone */
@media (max-width:560px){.mark-full{display:none}.mark-mini{display:block}}
@media (max-width:359px){.hdr-tools{gap:4px}.fx-hdr .fx-sel{padding-right:18px;background-position:right 5px center}.lang-btn{padding:8px 6px}.lang-btn svg{display:none}.hdr .btn-nav-wa,.hdr .btn-nav-line{padding-inline:7px}.burger{width:36px}}

/* ---------- LINE add-friend modal (14 Oct 2026) ----------
   Every line.me/R/ti/p/ link opens this: green "Open LINE" button + QR + ID.
   On phones the LINE app opens at the same moment (src/app.js). */
.line-box{position:relative;max-width:360px;width:100%}
.line-box h4{display:flex;align-items:center;justify-content:center;gap:8px}
.line-box h4 svg{width:24px;height:24px;color:#06C755}
.btn-line{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:6px 0 16px;
  background:#06C755;border-color:#06C755;color:#fff;font-weight:600;min-height:48px}
.btn-line:hover,.btn-line:focus-visible{background:#05b34c;border-color:#05b34c;color:#fff}
.btn-line svg{width:20px;height:20px;color:#fff}
.line-box .qr{background:#fff;padding:6px}
.line-box .line-id{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:0}
.modal-x{position:absolute;inset-block-start:10px;inset-inline-end:10px;width:36px;height:36px;border:0;background:none;
  color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
.modal-x:hover{background:var(--line)}
.modal-x svg{width:20px;height:20px}

/* Telegram as the Russian messenger (14 Oct 2026) */
.hdr .btn-nav-tg svg{color:#229ED9}
.mbar-tg{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.mbar-tg svg{color:#229ED9}
.enq-tg svg{color:#229ED9}
@media (max-width:430px){.mbar-tg span{display:none}}
@media (max-width:1180px) and (min-width:901px){.hdr .btn-nav-tg span{display:none}.hdr .btn-nav-tg{padding-inline:10px}.hdr .btn-nav-tg svg{width:18px;height:18px}}
/* Wongamat hub: beach gallery + map (14 Oct 2026) */
.bgal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bgal .bg-i{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#e9edf3}
.bgal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.bgal .bg-i:hover img{transform:scale(1.03)}
@media (max-width:900px){.bgal{grid-template-columns:repeat(2,1fr)}}
.hubmap{height:min(60vh,480px);border-radius:16px;border:1px solid #e6e9ef;z-index:0}
.wg-pin{background:#0B1F3A;border-radius:999px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.wg-lm{background:#C9A24B;color:#fff;border-radius:999px;font:700 12px/22px system-ui;text-align:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.answer{font-size:1.02rem;line-height:1.6}