/* ==========================================================================
   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:#78849A;

  --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 */
  --deep:#0B2545;
  --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{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{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{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}
.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}

.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}

.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: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{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: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{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: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: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: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: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: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)}

/* ---------- 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:1fr}}
.ftr .mark-n{color:#fff}
.ftr-tag{margin-top:12px;max-width:36ch;color:var(--on-deep-3);font-size:.87rem}
.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{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);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}