/* ============================================================
   YACT Association — stylesheet ("The sea", 27 Sep 2026)

   The whole site in the design the user chose for the home page ("เอาแบบ 18 … เปลี่ยน
   ทั้งเว็บให้สอดคล้องกันกับหน้าแรก", 26 Sep 2026). The previous stylesheet ("Monumental
   Navy") is kept in _build/archive/pre-redesign-2026-09-26/.

   THE DESIGN IN FIVE RULES
   1. Light by default. Ivory and mist bands carry the reading; navy opens every page (the
      hero, the page head), holds one band on the home page, and closes the site in the
      footer.
   2. The sea is the only ornament. The wave of the mark over each heading, the shoreline
      between two bands, the ribbons that run across a navy head, the wave under a link.
      No English labels over headings, no terminal-style panels.
   3. One card and one hover. A rounded card on a hairline; on hover the border turns wave
      blue and a short wave runs along its foot.
   4. One face per script: IBM Plex Sans Thai, IBM Plex Sans, the reader's own Chinese.
      Headings are the same family as the text, light and large.
   5. Motion answers the reader or runs slowly in the water; prefers-reduced-motion stops
      all of it.
   ============================================================ */

:root {
  --navy: #171a49; --navy-2: #1b1e53; --navy-3: #232759; --deep: #101233;
  --ink: #2b3157; --mid: #5a6285; --soft: #8b93b4;
  --wave: #779ed3; --wave-deep: #4d7ab8; --foam: #b9d2f7;
  --ivory: #f8f5ee; --ivory-2: #f2eee3; --mist: #edf2f9; --card: #fffdf9;
  --hair: #e4ddcd; --hair-2: #ece6d8; --hair-m: #d8e2f0; --hairw: rgba(255,255,255,.16);
  --on-dim: rgba(255,255,255,.86); --on-mute: rgba(255,255,255,.64);
  --white-on: rgba(255,255,255,.86); --dim-on: rgba(255,255,255,.64);
  --sans: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  --wrap: 1280px; --gut: clamp(18px, 4vw, 48px); --sec: clamp(80px, 8.5vw, 120px); --band: var(--sec);
  --r: 20px; --hd: 80px;
  --ease: cubic-bezier(.22,.61,.36,1); --out: cubic-bezier(.16,1,.3,1); --ease-out: var(--out);
  --wv-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4C4 0 8 0 12 4S20 8 24 4' fill='none' stroke='%23779ed3' stroke-width='1.4'/%3E%3C/svg%3E");
  --wv-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4C4 0 8 0 12 4S20 8 24 4' fill='none' stroke='%234d7ab8' stroke-width='1.4'/%3E%3C/svg%3E");
  --wv-foam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4C4 0 8 0 12 4S20 8 24 4' fill='none' stroke='%23b9d2f7' stroke-width='1.4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--ivory); }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 400 16.5px/1.85 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.lang-en { --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.75; }
body.lang-zh { --sans: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; line-height: 1.85; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; color: var(--navy-2); }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--wave); color: #fff; }
:focus-visible { outline: 2px solid var(--wave-deep); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }
@keyframes drift { to { background-position-x: 24px; } }
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes march { to { stroke-dashoffset: -32; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-2); color: #fff; padding: .8em 1.2em; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 120;
  background: linear-gradient(90deg, var(--wave), var(--wave-deep));
}

/* ---------------------------------------------------------------- header
   Transparent over the navy head every page opens with, at the top of the page only. Lower
   down it is never clear over the text: it slides away while the page moves down (.away) and
   comes back as ivory glass (.solid) when it moves up (user, 7 Oct 2026: "แบบโปร่งใสเหมือน
   ตอนแรกดีสุด เพียงแต่ว่าไม่อยากให้เกิดปัญหา Header ซ้อนทับ"). js/main.js sets both; .no-tr
   lets it turn solid unseen. Without script it is solid from the start and never moves.
   Below 1080px the nav goes into the drawer; the three languages stay on screen. */
header.site {
  position: fixed; inset: 0 0 auto; z-index: 60; color: #fff;
  transition: transform .35s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), color .4s;
}
header.site.away { transform: translateY(-100%); box-shadow: none; }
header.site.away:focus-within { transform: none; }
header.site.no-tr, header.site.no-tr * { transition: none !important; }
header.site.solid, html:not(.js) header.site {
  background: rgba(248,245,238,.9); color: var(--navy-2); box-shadow: 0 1px 0 var(--hair);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.hd-in { display: flex; align-items: center; gap: 22px; height: var(--hd); transition: height .4s var(--ease); }
header.site.solid .hd-in { height: 66px; }
.brand { flex: none; }
.brand img { height: 42px; width: auto; transition: height .4s var(--ease); }
header.site.solid .brand img { height: 36px; }
.brand .lg-n, header.site.solid .brand .lg-w, html:not(.js) .brand .lg-w { display: none; }
header.site.solid .brand .lg-n, html:not(.js) .brand .lg-n { display: block; }
.nav { margin-left: auto; display: flex; gap: 22px; font-size: 14.5px; white-space: nowrap; }
.nav a { position: relative; padding: 6px 0; opacity: .88; transition: opacity .2s; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px;
  background: var(--wv-foam) 0 0 / 24px 8px repeat-x; opacity: 0; transition: opacity .3s;
}
header.site.solid .nav a::after, html:not(.js) .nav a::after { background-image: var(--wv-deep); }
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a:hover::after, .nav a[aria-current]::after { opacity: 1; }
.nav a:hover::after { animation: drift 1s linear infinite; }
.hd-r { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
.chip-clock {
  display: flex; align-items: center; gap: 8px; padding-left: 16px; font-size: 13px; opacity: .85;
  border-left: 1px solid rgba(255,255,255,.25); white-space: nowrap;
}
header.site.solid .chip-clock { border-color: var(--hair); }
.chip-clock b { font-weight: 500; font-variant-numeric: tabular-nums; }
/* The three languages are always on screen, phones included (user, 25 Sep 2026). */
.langtabs { display: flex; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); padding: 3px; }
header.site.solid .langtabs, html:not(.js) .langtabs { box-shadow: inset 0 0 0 1px var(--hair); }
.langtabs a { font-size: 12px; font-weight: 500; letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; opacity: .85; line-height: 1.3; }
.langtabs a:hover { opacity: 1; }
.langtabs a.on { background: #fff; color: var(--navy-2); opacity: 1; }
header.site.solid .langtabs a.on, html:not(.js) .langtabs a.on { background: var(--navy-2); color: #fff; }
.btn.btn-cta { background: #fff; color: var(--navy-2); box-shadow: none; }
header.site.solid .btn.btn-cta, html:not(.js) .btn.btn-cta { background: var(--navy-2); color: #fff; }
.btn.btn-cta:hover { background: var(--foam); color: var(--navy-2); }
.burger {
  display: none; flex: none; width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
header.site.solid .burger { box-shadow: inset 0 0 0 1px var(--hair); }
.burger svg { width: 18px; height: 18px; }
.drawer {
  position: fixed; inset: 0; z-index: 150; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; padding: 18px 0 28px; overflow-y: auto;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .6s var(--out), visibility .6s;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-top img { height: 38px; width: auto; }
.drawer .burger { display: inline-flex; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.drawer nav { margin-top: 30px; display: flex; flex-direction: column; }
.drawer nav a { font: 300 clamp(24px, 6.4vw, 30px)/1.4 var(--sans); padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.drawer nav a[aria-current] { color: var(--foam); }
.d-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; font-size: 14.5px; }
.d-foot a { display: flex; justify-content: space-between; gap: 12px; color: var(--on-dim); }
.d-foot b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
body.drawer-on { overflow: hidden; }

/* ---------------------------------------------------------------- language chooser
   First visit only (js/main.js). A navy card over a dimmed page; a sheet from the bottom
   on phones. */
body.lpop-on { overflow: hidden; }
.lpop {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: var(--gut); background: rgba(16,18,51,.64); animation: lpop-fade .35s var(--ease) both;
}
.lpop-card {
  position: relative; width: min(540px, 100%); max-height: 100%; overflow: auto; isolation: isolate;
  background: radial-gradient(ellipse 70% 60% at 85% 10%, rgba(119,158,211,.22), transparent 62%), var(--navy);
  color: #fff; padding: clamp(30px, 4vw, 44px); border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.65); animation: lpop-rise .5s var(--out) both;
}
.lpop-mark { display: block; width: 104px; height: auto; margin: 0 0 22px; opacity: .92; }
.lpop h2 { margin: 0 0 22px; font-weight: 400; line-height: 1.4; color: #fff; }
.lpop h2 span:first-child { display: block; font-size: clamp(1.4rem, 2.6vw, 1.7rem); margin-bottom: 6px; }
.lpop h2 span + span { font-size: .98rem; color: var(--on-dim); }
.lpop h2 span + span + span::before { content: "·"; margin: 0 10px; color: var(--wave); }
.lpop-list { display: grid; gap: 8px; }
.lpop-list a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
  padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lpop-list a::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 2; color: var(--foam); font-size: 1.15rem; }
.lpop-list a:hover, .lpop-list a:focus-visible { background: rgba(255,255,255,.08); border-color: var(--foam); outline: none; }
.lpop-list b { font-size: 1.15rem; font-weight: 500; }
.lpop-list span { grid-column: 1; font-size: .86rem; color: var(--on-mute); margin-top: 2px; }
.lpop-list a.sug { background: rgba(119,158,211,.16); border-color: rgba(185,210,247,.5); }
.lpop-tag {
  display: none; font-style: normal; font-weight: 500; font-size: .68rem; letter-spacing: .06em;
  vertical-align: 2px; margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  background: var(--foam); color: var(--navy-2);
}
.lpop-list a.sug .lpop-tag { display: inline-block; }
.lpop-note { margin: 18px 0 0; font-size: .76rem; line-height: 1.7; color: var(--on-mute); }
.lpop-note span { display: block; }
.lpop-x {
  position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%;
  color: var(--on-dim); font-size: 1.6rem; line-height: 1; transition: color .2s, background .2s;
}
.lpop-x:hover { color: #fff; background: rgba(255,255,255,.08); }
@keyframes lpop-fade { from { opacity: 0; } }
@keyframes lpop-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes lpop-up { from { transform: translateY(100%); } }
@media (max-width: 560px) {
  .lpop { align-items: flex-end; padding: 0; }
  .lpop-card { width: 100%; max-height: 88vh; padding: 26px 20px 22px; border-radius: 24px 24px 0 0; animation-name: lpop-up; }
}

/* ---------------------------------------------------------------- bands and the shoreline */
.band { position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--sec); }
.band > .wrap { position: relative; }
.ivory, .band.paper { background: var(--ivory); color: var(--ink); }
.mist { background: var(--mist); }
.band.paper { position: relative; }
.tex::before, .band.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--navy-2); opacity: .045;
  -webkit-mask: url(/images/wave-pattern.svg) 0 0 / 720px 120px repeat; mask: url(/images/wave-pattern.svg) 0 0 / 720px 120px repeat;
}
.navy, .band.dark {
  position: relative; color: #fff;
  background: radial-gradient(ellipse 70% 60% at 85% 20%, rgba(119,158,211,.2), transparent 62%), var(--navy);
}
.shore {
  position: relative; height: clamp(40px, 4.6vw, 70px); overflow: hidden; margin: -1px 0;
  background: linear-gradient(var(--from) calc(100% - 4px), var(--to) calc(100% - 4px));
}
.shore svg { position: absolute; left: 0; bottom: -1px; width: 200%; height: 100%; }
.shore .b { fill: var(--wave); opacity: .3; animation: shore 34s linear infinite; }
.shore .f { fill: var(--to); animation: shore 24s linear infinite reverse; }
.shore .c { stroke: var(--crest, rgba(119,158,211,.55)); stroke-width: 1.5; animation: shore 24s linear infinite reverse; }
@keyframes shore { to { transform: translateX(-50%); } }
.wave-cv { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ---------------------------------------------------------------- headings
   One pattern everywhere: the wave of the mark, the heading, its lead; a link on the
   right where the section has one. .sechead is the inner pages' name for the same thing. */
.orn { display: block; width: 60px; height: 18px; margin-bottom: 20px; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--out) .1s; }
.orn img { width: 100%; height: 100%; object-fit: contain; }
.in .orn, .orn.in, html:not(.js) .orn { clip-path: inset(0 0 0 0); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 60px; flex-wrap: wrap; margin-bottom: 48px; }
.head > div { max-width: 760px; }
.head.center { justify-content: center; text-align: center; }
.head.center .orn, .head.center .lede { margin-inline: auto; }
.h2, .sechead h2 {
  font: 400 clamp(32px, 3.9vw, 52px)/1.28 var(--sans); color: var(--navy-2); letter-spacing: -.01em; text-wrap: balance;
}
body.lang-en .h2, body.lang-en .sechead h2 { line-height: 1.16; letter-spacing: -.015em; }
body.lang-zh .h2, body.lang-zh .sechead h2 { line-height: 1.3; }
.h2 em { font-style: normal; color: var(--wave-deep); }
.h2 .sub { display: block; color: var(--wave-deep); }
.navy .h2, .on-navy .h2 { color: #fff; }
.navy .h2 em, .navy .h2 .sub { color: var(--foam); }
.lede { font-size: 17px; line-height: 1.85; color: var(--mid); margin-top: 16px; max-width: 40em; text-wrap: pretty; }
.navy .lede { color: var(--on-dim); }
.sechead { margin-bottom: clamp(30px, 3.6vw, 44px); max-width: 760px; }
.sechead .lede, .sechead .lead { margin-top: 14px; }
.col-main .sechead { margin-top: clamp(52px, 6vw, 80px); }
.col-main .sechead:first-child, .col-main > .sechead:first-child { margin-top: 0; }
.col-main .sechead h2 { font-size: clamp(26px, 2.6vw, 34px); }
.col-main .sechead .orn { width: 48px; height: 14px; margin-bottom: 14px; }
.lead { color: var(--mid); max-width: 66ch; }
.secgap { height: clamp(56px, 7vw, 96px); }
.kick { font-size: 14px; font-weight: 500; color: var(--wave-deep); margin: 0 0 .8em; }

/* ---------------------------------------------------------------- buttons, links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 26px;
  border-radius: 999px; font: 500 15.5px/1 var(--sans); white-space: nowrap;
  background: var(--navy-2); color: #fff; box-shadow: 0 12px 28px -16px rgba(27,30,83,.7);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), color .3s, border-color .3s;
}
.btn:hover { background: var(--wave-deep); }
.btn .ar { transition: transform .35s var(--ease); }
.btn:hover .ar { transform: translateX(5px); }
.btn.btn-light, .on-navy .btn, .phead .btn, .navy .btn { background: #fff; color: var(--navy-2); box-shadow: 0 12px 30px -16px rgba(0,0,0,.5); }
.btn.btn-light:hover, .on-navy .btn:hover, .phead .btn:hover, .navy .btn:hover { background: var(--foam); }
.btn.ghost { background: transparent; color: var(--navy-2); box-shadow: inset 0 0 0 1px var(--hair); }
.btn.ghost:hover { background: var(--navy-2); color: #fff; box-shadow: none; }
.btn.small { height: 40px; padding: 0 18px; font-size: 14px; }
.lnk {
  display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.4 var(--sans); color: var(--navy-2);
  padding-bottom: 10px; background: var(--wv-deep) 0 100% / 24px 8px repeat-x;
}
.lnk .ar { color: var(--wave-deep); transition: transform .35s var(--ease); }
.lnk:hover { animation: drift 1s linear infinite; }
.lnk:hover .ar { transform: translateX(5px); }
.navy .lnk, .on-navy .lnk, .phead .lnk { color: #fff; background-image: var(--wv-foam); }
.navy .lnk .ar, .on-navy .lnk .ar, .phead .lnk .ar { color: var(--foam); }
.ctas, .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 36px; }
.cta { gap: 14px 20px; }

/* ---------------------------------------------------------------- one card, one hover */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--hair); border-radius: var(--r); padding: 26px 26px 30px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.mist .card { border-color: var(--hair-m); }
.hov::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 11px; height: 8px;
  background: var(--wv-wave) 0 0 / 24px 8px repeat-x; opacity: 0; transition: opacity .35s;
}
.hov:hover { border-color: var(--wave); box-shadow: 0 24px 46px -32px rgba(27,30,83,.45); }
.hov:hover::after { opacity: 1; animation: drift 1.2s linear infinite; }
.no { font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--wave-deep); font-variant-numeric: tabular-nums; }
.card h3 { font: 500 19px/1.45 var(--sans); color: var(--navy-2); margin-top: 12px; }
.d { font-size: 15px; line-height: 1.75; color: var(--mid); margin-top: 8px; }
.list { margin-top: 14px; border-top: 1px solid var(--hair); }
.list li { border-bottom: 1px solid var(--hair); }
.list a, .list span { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); transition: color .2s; }
.list a::before, .list span::before { content: ""; flex: none; width: 18px; height: 6px; background: var(--wv-wave) 0 0 / 18px 6px; }
.list a:hover { color: var(--wave-deep); }
.list .hi { color: var(--navy-2); font-weight: 500; }
.mist .list, .mist .list li { border-color: var(--hair-m); }
.g2, .g3, .g4 { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.split.mirror { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split .head { margin-bottom: 0; }
.split .h2 { font-size: clamp(30px, 3.3vw, 46px); }

/* ---------------------------------------------------------------- the drawings
   Line drawings from _build/make_illus.py, inlined. Faces are filled with --iso-bg so a
   nearer object hides what is behind it; the strokes draw themselves in on first sight. */
.iso { display: block; width: 100%; height: auto; overflow: visible; --iso-ink: var(--navy-2); --iso-acc: var(--wave-deep); --iso-bg: var(--card); }
.ivory .iso, .band.paper .iso { --iso-bg: var(--ivory); }
.mist .iso { --iso-bg: var(--mist); }
.card .iso, .xp-p .iso { --iso-bg: var(--card); }
.phead .iso, .navy .iso { --iso-ink: #fff; --iso-acc: var(--foam); --iso-bg: var(--navy); }
.iso .i-bg { fill: var(--iso-bg); }
.iso .i-v { fill: none; stroke: var(--iso-ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.iso .i-f { fill: none; stroke: var(--iso-acc); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.iso .i-h { fill: none; stroke: var(--iso-acc); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 4 5; }
.iso .i-site { fill: rgba(119,158,211,.1); stroke: var(--iso-acc); stroke-width: 1.3; stroke-dasharray: 9 7; animation: march 1.8s linear infinite; }
.iso .i-trace { fill: none; stroke: var(--iso-acc); stroke-width: 1.4; stroke-dasharray: 7 6; animation: march 1.6s linear infinite; }
.iso .i-dot, .iso .i-arrow { fill: var(--iso-acc); }
.iso .i-lens circle { fill: rgba(119,158,211,.08); stroke: var(--iso-ink); stroke-width: 1.3; }
.iso .i-lens .i-lens-in { fill: none; stroke: var(--iso-acc); stroke-width: 1; }
.iso .i-handle { fill: none; stroke: var(--iso-ink); stroke-width: 7; stroke-linecap: round; }
.iso .i-plane path { fill: var(--iso-bg); stroke: var(--iso-ink); stroke-width: 1.3; stroke-linejoin: round; }
.iso .i-sea path { fill: none; stroke: var(--iso-acc); stroke-width: 1; opacity: .55; }
.iso .i-tx { font-family: var(--sans); font-weight: 500; fill: var(--iso-ink); }
.iso .i-bulb path { fill: var(--iso-bg); stroke: var(--iso-ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.iso .i-bulb .i-ray { fill: none; stroke: var(--iso-acc); }
.iso .i-lead { fill: none; stroke: var(--iso-acc); stroke-width: 1; }
.iso .i-badge { fill: var(--iso-bg); stroke: var(--iso-ink); stroke-width: 1.3; }
.iso .i-ico * { fill: none; stroke: var(--iso-acc); stroke-width: 1.3; }
.iso .i-ico .i-full { fill: var(--iso-acc); }
.iso .i-talk path, .iso .i-pen path { fill: var(--iso-bg); stroke: var(--iso-ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.iso .i-talk .i-talk-t { fill: none; stroke: var(--iso-acc); }
.iso .i-pen .i-nib { fill: none; stroke: var(--iso-acc); stroke-width: 2; }
/* the factory drawing's labels (licences) */
.iso .i-lic { stroke: var(--iso-acc); }
.iso .i-tag rect { fill: #fff; stroke: var(--navy-2); }
.iso .i-tag path { fill: none; stroke: var(--wave-deep); stroke-width: 1.4; }
.iso .i-tag text { font: 500 19px var(--sans); fill: var(--navy-2); }
.iso .i-tag .i-sub { fill: var(--wave-deep); font-size: 16px; font-weight: 400; }
.iso .i-th { font: 400 19px var(--sans); fill: var(--mid); }
.iso .i-tick { stroke: var(--soft); stroke-width: 1; }
.phead .iso .i-th { fill: var(--on-dim); }
.js .iso .i-v, .js .iso .i-f {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--out); transition-delay: calc(var(--i, 0) * 28ms);
}
.js .in .iso .i-v, .js .in .iso .i-f, .js .iso.in .i-v, .js .iso.in .i-f { stroke-dashoffset: 0; }
/* a panel of the service explorer draws its picture again each time it is chosen */
@keyframes isodraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.js .xp-p.on .iso .i-v, .js .xp-p.on .iso .i-f { animation: isodraw 1.8s var(--out) both; animation-delay: calc(var(--i, 0) * 22ms); }
.ind-fig { display: flex; flex-direction: column-reverse; }
.ind-legend { display: none; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 14px; color: var(--mid); }
.ind-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg-site::before { content: ""; width: 26px; height: 0; border-top: 1.5px dashed var(--wave-deep); }
.lg-lic::before { content: ""; width: 14px; height: 10px; border: 1.5px solid var(--navy-2); border-radius: 3px; }

/* ---------------------------------------------------------------- the page head
   Every inner page opens on navy: the ribbons running along the foot, the page's title
   and lead, and — on a service page — its drawing on the right. */
.phead {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse 60% 70% at 88% 18%, rgba(119,158,211,.24), transparent 62%), var(--navy);
  padding: calc(var(--hd) + clamp(44px, 5vw, 80px)) 0 clamp(64px, 7vw, 104px);
}
.phead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--foam); opacity: .07;
  -webkit-mask: url(/images/wave-pattern.svg) 0 0 / 720px 120px repeat; mask: url(/images/wave-pattern.svg) 0 0 / 720px 120px repeat;
}
.phead .wrap { position: relative; }
.phead h1 {
  font: 300 clamp(34px, 4.6vw, 64px)/1.2 var(--sans); color: #fff; letter-spacing: -.015em;
  max-width: 17em; text-wrap: balance;
}
body.lang-en .phead h1 { line-height: 1.1; }
.phead h1 b { font-weight: 500; }
.phead .lede { color: var(--on-dim); margin-top: 20px; max-width: 42em; font-size: 17.5px; }
.phead .lede a:not(.lnk) { text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--on-mute); margin-bottom: 22px; }
.crumb a { color: var(--on-dim); transition: color .2s; }
.crumb a:hover { color: #fff; }
.crumb span { color: var(--wave); }
.dateline { color: var(--on-mute); font-size: 14px; margin-top: 18px; }
.phead.has-fig .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
.phead.has-fig .wrap > :not(.phead-fig) { grid-column: 1; }
.phead.has-fig h1 { font-size: clamp(32px, 3.9vw, 54px); }
.phead-fig { grid-column: 2; grid-row: 1 / span 6; align-self: center; width: 100%; max-width: 460px; justify-self: end; }

/* ---------------------------------------------------------------- the home hero (แบบ 4) */
.hero4 { position: relative; min-height: max(720px, 100svh); display: flex; flex-direction: column; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.hero4-photo { position: absolute; inset: 0; z-index: -3; }
.hero4-photo picture, .hero4-photo img { width: 100%; height: 100%; }
.hero4-photo img { object-fit: cover; object-position: 62% 50%; max-width: none; filter: saturate(.75) brightness(.72) contrast(1.08); transform: scale(1.08); animation: settle 3.4s var(--out) forwards; }
@keyframes settle { to { transform: scale(1); } }
.hero4-photo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 78% 55%, rgba(119,158,211,.25), transparent 70%),
    linear-gradient(90deg, rgba(23,26,73,.94) 0%, rgba(23,26,73,.8) 36%, rgba(23,26,73,.32) 68%, rgba(23,26,73,.5) 100%),
    linear-gradient(180deg, rgba(23,26,73,.62) 0%, rgba(23,26,73,0) 26%, rgba(23,26,73,0) 56%, var(--navy) 100%);
}
.hud-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 112px; font-size: 13.5px; color: var(--on-mute); }
.hud-top .loc { display: flex; align-items: center; gap: 12px; }
.hud-top .loc img { width: 42px; height: 13px; object-fit: contain; }
.hud-top .loc b { color: #fff; font-weight: 500; }
.hud-top .coords { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hero4-body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 34px 0 206px; }
.eyebrow { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: var(--on-dim); }
.eyebrow::before { content: ""; width: 48px; height: 8px; background: var(--wv-foam) 0 0 / 24px 8px repeat-x; animation: drift 2.4s linear infinite; }
.h1 { margin-top: 22px; font: 300 clamp(38px, 5.4vw, 80px)/1.18 var(--sans); letter-spacing: -.015em; max-width: 15em; color: #fff; }
body.lang-en .h1 { font-size: clamp(36px, 4.8vw, 70px); line-height: 1.12; max-width: 16em; }
body.lang-zh .h1 { line-height: 1.26; }
.h1-a { display: block; }
.rot { display: grid; padding: .06em 0 .1em; }
.rot > span {
  grid-area: 1 / 1; font-weight: 400; -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(100deg, #fff 0%, var(--foam) 45%, var(--wave) 100%);
  opacity: 0; transform: translateY(.42em); filter: blur(12px);
  transition: opacity .7s var(--ease), transform 1s var(--out), filter .8s var(--ease);
}
.rot > span.on { opacity: 1; transform: none; filter: none; }
.rot > span.out { opacity: 0; transform: translateY(-.42em); filter: blur(12px); }
.hero4 .lede { max-width: 34em; margin-top: 24px; color: var(--on-dim); }
.ld { opacity: 0; animation: up 1.1s var(--out) forwards; animation-delay: var(--d, 0s); }
.hero4-foot { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(23,26,73,.25), rgba(23,26,73,.72)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
.hf-c { position: relative; padding: 22px 24px 24px; border-left: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 6px; }
.hf-c:first-child { border-left: 0; padding-left: 0; }
.hf-c b { font: 300 clamp(30px, 2.8vw, 42px)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hf-c b i { font-style: normal; color: var(--foam); font-weight: 400; margin-left: 2px; }
.hf-c .th { font-size: 14px; color: var(--on-dim); line-height: 1.5; }
.hf-c .k { font-size: 13px; color: var(--on-mute); line-height: 1.4; }
.hf-c::after { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, var(--foam), transparent); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--out); }
.hf-c:first-child::after { left: 0; }
.hf.in .hf-c::after, html:not(.js) .hf-c::after { transform: scaleX(1); }

/* the names of the services, riding a wave */
.tow { position: relative; height: 132px; overflow: hidden; background: var(--tow-bg, var(--ivory)); }
.tow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tow text { font: 300 28px var(--sans); fill: var(--navy-2); }
.tow .ln { fill: none; stroke: rgba(119,158,211,.5); stroke-width: 1; }
.tow .ln.b { stroke: rgba(119,158,211,.28); }
.tow::before, .tow::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9vw; z-index: 2; pointer-events: none; }
.tow::before { left: 0; background: linear-gradient(90deg, var(--tow-bg, var(--ivory)), transparent); }
.tow::after { right: 0; background: linear-gradient(-90deg, var(--tow-bg, var(--ivory)), transparent); }

/* ---------------------------------------------------------------- home: the service explorer */
.xp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: start; }
.xp-list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 96px; }
.xp-list button {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 13px 16px; border-radius: 14px; font: 500 15.5px/1.45 var(--sans); color: var(--ink);
  transition: background .3s var(--ease), color .3s;
}
.xp-list .no { font-size: 12.5px; }
.xp-list .ar { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; color: var(--wave-deep); }
.xp-list button:hover { background: rgba(255,253,249,.75); }
.xp-list button[aria-selected="true"] { background: var(--navy-2); color: #fff; }
.xp-list button[aria-selected="true"] .no { color: var(--foam); }
.xp-list button[aria-selected="true"] .ar { opacity: 1; transform: none; color: var(--foam); }
.xp-p { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--hair-m); border-radius: 26px; padding: 40px 44px 36px; min-height: 540px; display: flex; flex-direction: column; }
.js .xp-p:not(.on) { display: none; }
.xp-p.on { animation: up .6s var(--out) both; }
.xp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px 36px; align-items: center; }
.xp-main h3 { margin-top: 10px; font: 400 clamp(26px, 2.4vw, 36px)/1.3 var(--sans); color: var(--navy-2); }
.xp-main h3 a:hover { color: var(--wave-deep); }
.xp-main .d { font-size: 16.5px; line-height: 1.85; margin-top: 14px; }
.xp-fig { align-self: center; }
.xp-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.xp-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px;
  border-radius: 14px; border: 1px solid var(--hair-m); background: var(--card); font-size: 15px; line-height: 1.45; color: var(--navy-2);
  transition: border-color .3s, background .3s;
}
.xp-links a::after { content: "→"; color: var(--wave-deep); transition: transform .3s var(--ease); }
.xp-links a:hover { border-color: var(--wave); background: var(--mist); }
.xp-links a:hover::after { transform: translateX(4px); }
.xp-foot { margin-top: auto; padding-top: 28px; }

/* ---------------------------------------------------------------- home: about, the register */
.ab-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 60px; align-items: start; }
.ab-split .head { margin-bottom: 28px; }
/* Client logos at the foot of About (user, 7 Oct 2026: "เป็นแถบเลื่อนช้าๆไปเรื่อยๆ"). The set
   runs twice in one track that slides left by exactly one set, so the loop has no seam; about
   30px a second. Hover or focus holds it still; reduced motion shows the set once, at rest. */
.clients { margin-top: clamp(56px, 7vw, 96px); }
.clients-h { margin: 0 0 18px; font: 500 15px/1.4 var(--sans); color: var(--wave-deep); }
.mq {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mq-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: mq var(--mq, 50s) linear infinite; }
.mq:hover .mq-track, .mq:focus-within .mq-track { animation-play-state: paused; }
.mq-track li { flex: none; padding-right: 16px; }
.mq-tile {
  display: flex; align-items: center; justify-content: center; width: 236px; height: 112px;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px;
}
.mq-tile img { display: block; width: auto; height: auto; max-width: 210px; max-height: 80px; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .mq-tile { width: 184px; height: 96px; }
  .mq-tile img { max-width: 160px; max-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq { -webkit-mask: none; mask: none; }
  .mq-track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 16px; }
  .mq-track li[aria-hidden] { display: none; }
}
.reg { padding: 0; overflow: hidden; }
.reg-head { position: relative; isolation: isolate; background: linear-gradient(118deg, var(--navy), #262d70); color: #fff; padding: 24px 26px 22px; }
.reg-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foam); opacity: .2; -webkit-mask: url(/images/wave-pattern.svg) 0 0 / 540px 90px repeat; mask: url(/images/wave-pattern.svg) 0 0 / 540px 90px repeat; }
.reg-head h3 { font: 400 22px/1.4 var(--sans); color: #fff; margin: 0; }
.reg-head p { font-size: 14px; color: var(--on-dim); margin-top: 4px; }
.reg dl { display: grid; }
.reg dl > div { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 14px; padding: 15px 26px; border-top: 1px solid var(--hair); align-items: baseline; }
.reg dl > div:first-child { border-top: 0; }
.reg dt { font-size: 14px; color: var(--mid); }
.reg dd { font-size: 15.5px; color: var(--navy-2); line-height: 1.6; }
.reg dd.num { font-size: 18px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- home: the process, two ways */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--hair); margin-bottom: 28px; }
.tabs button { padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--mid); transition: background .3s var(--ease), color .3s; }
.tabs button[aria-selected="true"] { background: var(--navy-2); color: #fff; }
.row4 .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.js .row4 .steps:not(.on) { display: none; }
.steps-cap { font-size: 15px; font-weight: 500; color: var(--navy-2); margin: 0 0 14px; }
.js .steps-cap { display: none; }
.row4 .steps.on > li { animation: up .8s var(--out) both; }
.row4 .steps.on > li:nth-child(2) { animation-delay: .07s; } .row4 .steps.on > li:nth-child(3) { animation-delay: .14s; } .row4 .steps.on > li:nth-child(4) { animation-delay: .21s; }
.row4 .step h3 { font-size: 18px; }

/* ---------------------------------------------------------------- home: BOI and licences */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tcard3 h3 { font: 500 18px/1.4 var(--sans); color: var(--navy-2); margin: 0 0 10px; }
.tcard3 .list { margin-top: 0; }
.tcard3 .list span { color: var(--mid); }
.tcard3 .list .hi { color: var(--navy-2); }
.steps3 li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 11px 0; border-top: 1px solid var(--hair); }
.mist .steps3 li { border-color: var(--hair-m); }
.steps3 b { grid-row: span 2; font-size: 13px; font-weight: 500; line-height: 1.9; color: var(--wave-deep); font-variant-numeric: tabular-nums; }
.steps3 strong { font-weight: 500; color: var(--navy-2); font-size: 15.5px; }
.steps3 span { font-size: 14.5px; line-height: 1.75; color: var(--mid); }
.sec-ctas { margin-top: 34px; }

/* ---------------------------------------------------------------- home: cross-border, the globe */
.xbg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 60px; align-items: center; }
.xbg .head { margin-bottom: 0; display: block; }
.globe-wrap { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; font-family: var(--sans); }
.globe-wrap canvas { width: 100%; height: 100%; display: block; }
.globe-cap { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--on-mute); }
.globe-cap b { color: #fff; font-weight: 500; }
.globe-cap span { letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- home: the FAQ card, rising out of the navy */
/* flow-root, so the card's negative margin lifts the card and not the whole band with it */
.band.lift-host { padding-top: 0; display: flow-root; }
.band.pad-lift { padding-bottom: calc(var(--sec) + 150px); }
.lift {
  position: relative; z-index: 2; margin-top: -150px; background: var(--card); border-radius: 28px;
  padding: 48px 52px 40px; box-shadow: 0 50px 90px -60px rgba(23,26,73,.6);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 30px 56px; align-items: start;
}
.lift > .head { margin-bottom: 0; display: block; }
.lift > .head .lnk { margin-top: 18px; }
.fq { border-bottom: 1px solid var(--hair); }
.fq:last-child { border-bottom: 0; }
.fq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; gap: 12px; align-items: center; padding: 18px 0; }
.fq:first-child summary { padding-top: 6px; }
.fq summary::-webkit-details-marker { display: none; }
.fq .q { font: 500 17px/1.55 var(--sans); color: var(--navy-2); transition: color .2s; }
.fq summary:hover .q { color: var(--wave-deep); }
.tg, .qmark { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); transition: background .3s var(--ease), border-color .3s; }
.tg::before, .tg::after, .qmark::before, .qmark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--navy-2); transform: translate(-50%, -50%); }
.tg::after, .qmark::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.fq[open] .tg, .qa.acc details[open] .qmark { background: var(--navy-2); border-color: var(--navy-2); }
.fq[open] .tg::before, .fq[open] .tg::after, .qa.acc details[open] .qmark::before, .qa.acc details[open] .qmark::after { background: #fff; }
.fq[open] .tg::after, .qa.acc details[open] .qmark::after { transform: translate(-50%, -50%) rotate(0deg); }
.fq .a { padding: 0 50px 22px 56px; font-size: 16px; line-height: 1.85; color: var(--mid); }
.fq[open] .a { animation: up .5s var(--out) both; }

/* ---------------------------------------------------------------- the team (home and /team/)
   The two managing partners larger and on navy; everyone else on light cards. Every portrait
   is the face-aligned frame from make_team.py, so the faces sit on one line in each row. */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pcard {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 26px; align-items: end;
  padding: 14px; border-radius: 26px; color: var(--on-dim);
  background: radial-gradient(ellipse 70% 60% at 92% 0%, rgba(119,158,211,.28), transparent 62%), var(--navy);
  transition: box-shadow .35s var(--ease);
}
.pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foam); opacity: .06; -webkit-mask: url(/images/wave-pattern.svg) 0 0 / 540px 90px repeat; mask: url(/images/wave-pattern.svg) 0 0 / 540px 90px repeat; }
.pcard:hover { box-shadow: 0 34px 60px -34px rgba(16,18,51,.75); }
.pc-img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #2a2d33; }
.pc-img picture, .pc-img img { display: block; width: 100%; height: 100%; }
.pc-img img { object-fit: cover; max-width: none; }
/* The partners' second dress (user, 7 Oct 2026: "ยังอยากให้มีสลับรูปชุดทางการกับชุดครุยอยู่นะ"):
   the robe frame fades in over the suit on hover or keyboard focus, on the card and on the
   profile portrait. make_team.py cuts each pair so the face holds still through the fade.
   Decorative only: where nothing hovers, the suit stays. Reduced motion makes it a cut. */
.pc-img .alt, .p2-stick .alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.pcard:focus-visible .pc-img .alt { opacity: 1; }
@media (hover: hover) {
  .pcard:hover .pc-img .alt, .p2-photo:hover .p2-stick .alt { opacity: 1; }
}
.pc-t { display: flex; flex-direction: column; padding: 18px 14px 18px 0; }
.pc-n { font: 400 clamp(22px, 1.85vw, 27px)/1.35 var(--sans); color: #fff; transition: color .25s; }
.pcard:hover .pc-n { color: var(--foam); }
.pc-en { margin-top: 6px; font-size: 14px; color: var(--on-mute); }
.pc-role { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--foam); line-height: 1.5; }
.pc-lic { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairw); font-size: 13.5px; color: var(--on-dim); }
.pc-go { margin-top: 26px; align-self: flex-start; display: inline-flex; gap: 10px; font-size: 15px; font-weight: 500; color: #fff; padding-bottom: 10px; background: var(--wv-foam) 0 100% / 24px 8px repeat-x; }
.pcard:hover .pc-go { animation: drift 1s linear infinite; }
.pp { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 16px 10px 10px; }
.pp.hov::after { left: 130px; bottom: 8px; }
.pp-img { display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #2a2d33; }
.pp-img picture, .pp-img img { display: block; width: 100%; height: 100%; }
.pp-img img { object-fit: cover; max-width: none; }
.pp-t { display: flex; flex-direction: column; min-width: 0; padding-bottom: 6px; }
.pp-n { font: 500 16px/1.45 var(--sans); color: var(--navy-2); transition: color .2s; }
.pp-en { margin-top: 2px; font-size: 12.5px; color: var(--mid); }
.pp-role { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--navy-2); }
.pp-lic { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--mid); }
.pp-go { display: none; }
.pp:hover .pp-n { color: var(--wave-deep); }
/* /team/: two to a row, the portrait larger, with the way to the profile */
.tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tgrid .pp { grid-template-columns: 176px minmax(0, 1fr); gap: 26px; padding: 12px 26px 12px 12px; }
.tgrid .pp.hov::after { left: 214px; bottom: 12px; }
.tgrid .pp-n { font-size: 21px; font-weight: 400; }
.tgrid .pp-en { font-size: 14px; }
.tgrid .pp-role { margin-top: 12px; font-size: 14.5px; font-weight: 500; }
.tgrid .pp-lic { margin-top: 6px; font-size: 13.5px; }
.tgrid .pp-go { display: inline-flex; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--wave-deep); }

/* ---------------------------------------------------------------- home: the office */
.off2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.orows > * { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.orows .k { font-size: 13.5px; color: var(--mid); }
.orows b { font: 500 17px/1.5 var(--sans); color: var(--navy-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.orows .go { color: var(--wave-deep); transition: transform .3s var(--ease); }
.orows a:hover .go { transform: translateX(4px); }
.orows a:hover b { color: var(--wave-deep); }
.orows .qr { display: flex; gap: 10px; }
.orows .qr img { width: 56px; height: 56px; padding: 3px; border-radius: 8px; background: #fff; border: 1px solid var(--hair-m); }
/* a numbered reading list (the guides page) */
.rows { border-top: 1px solid var(--hair); max-width: 980px; }
.rows > li { border-bottom: 1px solid var(--hair); }
.rows a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 8px 18px; align-items: start; padding: 22px 8px; border-radius: 14px; transition: background .3s var(--ease); }
.rows a:hover { background: rgba(255,253,249,.8); }
.rows .n { font-size: 13px; font-weight: 500; color: var(--wave-deep); line-height: 2.1; font-variant-numeric: tabular-nums; }
.rows h3 { font: 500 clamp(18px, 1.7vw, 21px)/1.45 var(--sans); color: var(--navy-2); margin: 0 0 6px; }
.rows p { color: var(--mid); font-size: 15px; line-height: 1.75; }
.rows .go { color: var(--wave-deep); font-size: 1.1rem; justify-self: end; transition: transform .3s var(--ease); }
.rows a:hover .go { transform: translateX(4px); }
.clocks { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; font-size: 13.5px; color: var(--mid); }
.clocks b { color: var(--navy-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.bldg { position: relative; margin: 0; min-height: 300px; border-radius: var(--r); overflow: hidden; }
.bldg picture, .bldg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bldg img { object-fit: cover; object-position: 70% 50%; max-width: none; }
.bldg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(23,26,73,.85)); }
.bldg figcaption { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; font-size: 14.5px; color: #fff; }

/* ---------------------------------------------------------------- articles as cards (home, insights, profiles)
   The navy header is HTML, not an image, so the title is in the page's language. */
.artcards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .artcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .artcards { grid-template-columns: minmax(0, 1fr); } }
.artcards > li { display: flex; }
.acard {
  display: flex; flex-direction: column; width: 100%; background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r); overflow: hidden; transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.mist .acard { border-color: var(--hair-m); }
.acard:hover { border-color: var(--wave); box-shadow: 0 24px 46px -32px rgba(27,30,83,.45); }
.ahead {
  position: relative; overflow: hidden; isolation: isolate; min-height: 13rem; display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(ellipse 80% 70% at 90% 0%, rgba(119,158,211,.28), transparent 65%), var(--navy);
  padding: 24px 26px 38px;
}
.acrest { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 58%; fill: #232a6b; opacity: .9; transition: transform .8s var(--ease); transform-origin: 70% 0; }
.acard:hover .acrest { transform: scale(1.06); }
.aedge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 22px; fill: var(--card); }
.akick { position: relative; margin: 0 0 auto; padding-bottom: 1.4em; font-size: 13.5px; font-weight: 500; color: var(--foam); }
.ahead h3 { position: relative; margin: 0; color: #fff; font: 400 clamp(19px, 1.6vw, 22px)/1.45 var(--sans); }
.abody { position: relative; display: flex; flex-direction: column; flex: 1; margin-top: -2px; background: var(--card); padding: 20px 26px 30px; }
.abody p { color: var(--mid); font-size: 15px; line-height: 1.75; margin: 0 0 1em; flex: 1; }
.aby { font-size: 13.5px; color: var(--soft); }
.guidelink { margin: 0 0 clamp(28px, 3.4vw, 40px); }
.guidelink a {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-radius: 18px;
  background: var(--navy-2); color: #fff; font-size: 1.02rem; transition: background .2s var(--ease);
}
.guidelink a:hover { background: var(--wave-deep); }
.guidelink a > span:first-child { font-size: 12px; font-weight: 500; color: var(--navy-2); background: var(--foam); padding: 3px 10px; border-radius: 999px; }

/* ---------------------------------------------------------------- the closing invitation */
.closing { position: relative; overflow: hidden; isolation: isolate; text-align: center; background: linear-gradient(180deg, var(--ivory), var(--mist)); }
.closing .inner { position: relative; padding: clamp(96px, 10vw, 150px) 0 clamp(120px, 12vw, 170px); }
.closing .orn { margin-inline: auto; }
.closing .h2 { max-width: 18em; margin-inline: auto; }
.closing .h2 .ln2 { display: block; }
.closing .lede { margin-inline: auto; }
.closing .ctas { justify-content: center; }

/* ---------------------------------------------------------------- services index */
.jumpx { display: flex; gap: 8px; overflow-x: auto; margin: 26px 0 0; padding: 0 0 6px; scrollbar-width: none; }
.jumpx::-webkit-scrollbar { display: none; }
.jumpx li { flex: 0 0 auto; }
.jumpx a { display: block; font-size: 14px; color: var(--on-dim); border: 1px solid rgba(255,255,255,.28); padding: 8px 16px; border-radius: 999px; white-space: nowrap; transition: background .2s, border-color .2s; }
.jumpx a:hover { border-color: var(--foam); background: rgba(255,255,255,.08); }
@media (min-width: 1200px) { .jumpx { display: none; } }
.svcgrid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .svcgrid { grid-template-columns: 236px minmax(0, 1fr); column-gap: clamp(40px, 4vw, 72px); align-items: start; } }
.svcrail { display: none; }
@media (min-width: 1200px) { .svcrail { display: block; position: sticky; top: 100px; } }
.svcrail p { font-size: 14px; font-weight: 500; color: var(--wave-deep); margin: 0 0 12px; }
.svcrail ol { display: flex; flex-direction: column; gap: 4px; }
.svcrail a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: baseline; padding: 10px 14px; border-radius: 12px; color: var(--mid); font-size: 14.5px; line-height: 1.45; transition: background .25s var(--ease), color .25s; }
.svcrail .rn { font-size: 12.5px; color: var(--wave-deep); font-variant-numeric: tabular-nums; }
.svcrail a:hover { color: var(--navy-2); background: rgba(255,253,249,.8); }
.svcrail li.is-on a { background: var(--navy-2); color: #fff; }
.svcrail li.is-on .rn { color: var(--foam); }
.svcledger { display: grid; gap: 18px; }
.lg {
  background: var(--card); border: 1px solid var(--hair); border-radius: 26px; padding: clamp(26px, 3vw, 40px) clamp(24px, 3.2vw, 44px);
  scroll-margin-top: 90px;
}
.lghead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px 40px; align-items: center; }
.lgtext h2 { margin-top: 8px; font: 400 clamp(24px, 2.4vw, 34px)/1.3 var(--sans); color: var(--navy-2); }
.lgtext .lead { margin-top: 10px; font-size: 16px; line-height: 1.8; }
.lgtext .lnk { margin-top: 18px; }
.lg-fig { max-width: 300px; justify-self: end; width: 100%; }
.lgrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.lgrows a {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; height: 100%; padding: 16px 18px;
  border-radius: 16px; border: 1px solid var(--hair); background: var(--card); transition: border-color .3s, background .3s;
}
.lgrows a > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.lgrows b { font-weight: 500; color: var(--navy-2); font-size: 16px; line-height: 1.45; }
.lgrows a > span:first-child > span { font-size: 14px; line-height: 1.65; color: var(--mid); }
.lgrows .go { color: var(--wave-deep); transition: transform .3s var(--ease); margin-top: 2px; }
.lgrows a:hover { border-color: var(--wave); background: var(--mist); }
.lgrows a:hover .go { transform: translateX(4px); }

/* ---------------------------------------------------------------- two columns: an article and its side panel */
.cols { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .cols { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (min-width: 980px) { .cols.solo { grid-template-columns: minmax(0, 980px); justify-content: center; } }
.col-side {
  align-self: start; position: sticky; top: 100px; background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 24px 24px 26px;
}
.col-side.has-toc { max-height: calc(100vh - 124px); overflow-y: auto; }
.shead { font-size: 14px; font-weight: 500; color: var(--wave-deep); margin: 0 0 8px; }
.shead.sp { margin-top: 22px; }
.slist li { border-top: 1px solid var(--hair-2); }
.slist li:first-child { border-top: 0; }
.slist a, .slist.plainlist li { display: block; padding: 9px 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); transition: color .2s; }
.slist a:hover { color: var(--wave-deep); }
.slist.sub { margin: 4px 0 6px 14px; }
.scta { margin-top: 20px; }
.tocdate { font-size: 14.5px; color: var(--ink); }
.ticks li { position: relative; padding: 0 0 .9em 32px; color: var(--ink); max-width: 76ch; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 18px; height: 6px; background: var(--wv-wave) 0 0 / 18px 6px; }
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.steps > li { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 24px 24px 26px; }
.steps .n { display: block; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--wave-deep); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.steps h3 { font: 500 17.5px/1.5 var(--sans); color: var(--navy-2); margin-bottom: 6px; }
.steps p { color: var(--mid); font-size: 15px; line-height: 1.75; }
.matters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.matters a, .matters span {
  display: flex; justify-content: space-between; gap: 12px; height: 100%; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--hair); background: var(--card); font-size: 15px; line-height: 1.5; color: var(--navy-2);
}
.matters a { transition: border-color .3s, background .3s; }
.matters a::after { content: "→"; color: var(--wave-deep); transition: transform .3s var(--ease); }
.matters a:hover { border-color: var(--wave); background: var(--mist); }
.matters a:hover::after { transform: translateX(4px); }
.matters span { color: var(--mid); background: transparent; }
.guide { max-width: 72ch; margin: 0 0 clamp(26px, 3vw, 38px); }
.guide h3 { margin: 0 0 .5em; font-size: 1.14rem; line-height: 1.45; }
.guide p { margin: 0; color: var(--ink); line-height: 1.85; }
.guide a { color: var(--wave-deep); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.guide a:hover { text-decoration-color: var(--wave-deep); }
.article .msec { margin-bottom: clamp(30px, 3.6vw, 48px); max-width: 74ch; }
.article .msec h2 { font: 500 clamp(21px, 2vw, 26px)/1.45 var(--sans); color: var(--navy-2); margin-bottom: .6em; scroll-margin-top: 96px; }
.article .msec h2::before { content: ""; display: block; width: 48px; height: 8px; margin-bottom: 14px; background: var(--wv-deep) 0 0 / 24px 8px repeat-x; }
.article .msec p { color: var(--ink); margin-bottom: 1em; }
.article .msec p:last-child { margin-bottom: 0; }
.article h2 { scroll-margin-top: 96px; }
/* A Markdown body (the Thai-only articles, 7 Oct 2026): subheads, a comparison table, a
   numbered checklist and in-text links, in the privacy notice's voice. */
.article .msec h3 { font: 500 clamp(17px, 1.6vw, 19.5px)/1.55 var(--sans); color: var(--navy-2); margin: clamp(22px, 2.6vw, 30px) 0 .5em; }
.article .msec h2 + h3 { margin-top: 0; }
.article .msec a { color: var(--wave-deep); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.article .msec a:hover { text-decoration-color: var(--wave-deep); }
.article .msec strong { color: var(--navy-2); font-weight: 500; }
.article .msec ol { counter-reset: ol; margin: 0 0 1.2em; }
.article .msec ol > li { counter-increment: ol; position: relative; padding: 0 0 .7em 38px; color: var(--ink); }
.article .msec ol > li::before { content: counter(ol); position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 50%; background: var(--ivory-2); border: 1px solid var(--hair); color: var(--wave-deep); font-size: 13.5px; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.article .msec ul { margin: 0 0 1.2em; }
.article .msec ul > li { position: relative; padding: 0 0 .7em 30px; color: var(--ink); }
.article .msec ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 18px; height: 6px; background: var(--wv-wave) 0 0 / 18px 6px; }
.article .msec table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; }
.article .msec th, .article .msec td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair-2); }
.article .msec th { font-size: 13.5px; color: var(--wave-deep); font-weight: 500; border-bottom: 1px solid var(--hair); }
.article .msec td { color: var(--ink); }
.article .msec td:first-child { color: var(--navy-2); font-weight: 500; }
.article .msec em { color: var(--soft); }
/* On a phone the three columns fit the width and wrap, rather than scroll: the
   comparison is the point, and the third column sat off screen. */
@media (max-width: 600px) {
  .article .msec table { min-width: 0; font-size: .86rem; }
  .article .msec th, .article .msec td { padding-right: 10px; }
}

/* Q&A lists (matter pages, fees, articles) */
.qa { border-top: 1px solid var(--hair); }
.qa > li { border-bottom: 1px solid var(--hair); padding: clamp(22px, 2.6vw, 32px) 0; }
.qa h3 { font: 500 clamp(17px, 1.6vw, 19.5px)/1.55 var(--sans); color: var(--navy-2); margin-bottom: .5em; max-width: 62ch; }
.qa p { color: var(--mid); max-width: 78ch; }
.qa.tight { max-width: 900px; }
/* the FAQ page: native <details>, the same round toggle as the home page's */
.qa.acc > li { padding: 0; }
.qa.acc details { padding: 20px 0; }
.qa.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.qa.acc summary::-webkit-details-marker { display: none; }
.qa.acc summary h3 { margin: 0; transition: color .2s var(--ease); }
.qa.acc summary:hover h3 { color: var(--wave-deep); }
.qans { padding-top: .8em; max-width: 78ch; }
.qans p { margin: 0 0 .8em; color: var(--mid); }
.qans p:last-child { margin-bottom: 0; }
.qa .qsrc { list-style: none; margin: 2em 0 .4em; font-size: 14px; font-weight: 500; }
.qa .qsrc:first-child { margin-top: 0; }
.qa .qsrc a { color: var(--wave-deep); }
.qfrom { margin-top: .6em; font-size: .9rem; }
.qfrom a { color: var(--wave-deep); }
.qgroup { margin: 0 0 .5em; font: 400 clamp(26px, 2.6vw, 34px)/1.35 var(--sans); color: var(--navy-2); scroll-margin-top: 96px; }
.qgroup::before { content: ""; display: block; width: 60px; height: 18px; margin-bottom: 16px; background: url(/images/wave-large.webp) 0 50% / contain no-repeat; }
.qgroup ~ .qgroup { margin-top: clamp(56px, 7vw, 88px); }
.qglead { margin: 0 0 1.4em; color: var(--mid); max-width: 70ch; }

/* ---------------------------------------------------------------- about (27 Sep 2026)
   The firm's figures in its head; the rules for every matter set as three statements, not
   cards; how the work differs by kind, one kind at a time with its drawing; the register
   beside the building. */
.astats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; margin-top: 44px; border-top: 1px solid rgba(255,255,255,.18); }
.astat { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 0 0; }
.astat + .astat { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.18); }
.astat b { font: 300 clamp(34px, 3.4vw, 48px)/1 var(--sans); color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.astat b i { font-style: normal; font-weight: 400; color: var(--foam); margin-left: 2px; }
.astat > span { font-size: 14px; line-height: 1.5; color: var(--on-dim); }
.phead .ctas { margin-top: 24px; }
.princ { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.princ > li { padding: 30px 32px 6px 0; }
.princ > li + li { padding-left: 32px; border-left: 1px solid var(--hair); }
.princ .pn { display: block; font: 200 56px/1 var(--sans); color: var(--wave); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.princ h3 { margin-top: 18px; font: 500 21px/1.45 var(--sans); color: var(--navy-2); }
.princ p { margin-top: 10px; color: var(--mid); font-size: 16px; line-height: 1.85; }
.ap-panels { margin-top: 4px; }
.js .ap-p:not(.on) { display: none; }
.ap-p { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 30px 60px; align-items: center; background: var(--card); border: 1px solid var(--hair-m); border-radius: 26px; padding: 40px 44px; }
.ap-p.on { animation: up .6s var(--out) both; }
.ap-lead { font: 400 clamp(20px, 1.8vw, 24px)/1.55 var(--sans); color: var(--navy-2); margin-bottom: 18px; max-width: 30em; }
.ap-p .aplist > li { border-color: var(--hair-m); }
.ap-fig { width: 100%; max-width: 420px; justify-self: center; }
.js .ap-p.on .iso .i-v, .js .ap-p.on .iso .i-f { animation: isodraw 1.8s var(--out) both; animation-delay: calc(var(--i, 0) * 22ms); }
/* the vision: one sentence on navy, the ribbons running under it */
.vision { text-align: center; overflow: hidden; }
.vision .orn { margin-inline: auto; }
.vision .orn img { filter: brightness(1.6); }
.vision .vl { font: 500 15px/1.4 var(--sans); color: var(--foam); letter-spacing: .02em; }
.vision .vq { max-width: 21em; margin: 18px auto 0; font: 300 clamp(28px, 3.3vw, 46px)/1.45 var(--sans); color: #fff; text-wrap: balance; }
body.lang-en .vision .vq { line-height: 1.3; }
.vision .wrap { padding-bottom: clamp(40px, 5vw, 70px); }

/* the conflict check, set apart from the three rules as the firm's standing policy */
.policy { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 40px; max-width: 980px;
  padding: 28px 32px; border-radius: 22px; background: var(--card); border: 1px solid var(--hair); scroll-margin-top: 110px; }
.policy-ic { width: 52px; height: 52px; }
.policy-ic path { fill: rgba(119,158,211,.12); stroke: var(--navy-2); stroke-width: 1.5; stroke-linejoin: round; }
.policy-ic .ok { fill: none; stroke: var(--wave-deep); stroke-width: 2; stroke-linecap: round; }
.policy h3 { font: 500 19px/1.45 var(--sans); color: var(--navy-2); }
.policy p { margin-top: 8px; color: var(--ink); font-size: 16px; line-height: 1.85; }
.cconf { margin-top: 22px; padding: 18px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--hair); font-size: 15px; line-height: 1.75; color: var(--ink); }
.cconf b { color: var(--navy-2); font-weight: 500; margin-right: 6px; }
.cconf a { color: var(--wave-deep); white-space: nowrap; margin-left: 6px; }
.cconf a:hover { text-decoration: underline; }
.ab-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 5vw, 80px); align-items: start; }
.ab-story .h2 { font-size: clamp(28px, 3vw, 42px); }
.ab-story p { margin-top: 20px; font-size: 18px; line-height: 1.95; color: var(--ink); max-width: 40em; text-wrap: pretty; }
body.lang-en .ab-story p { line-height: 1.8; }
.ab-story .ctas { margin-top: 28px; }
.whos .who h3 { font: 400 clamp(22px, 2vw, 27px)/1.35 var(--sans); margin-top: 10px; }
.whos .who .d { font-size: 15.5px; }
.whos .who .list { margin-top: 18px; }
.ab-office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px clamp(40px, 5vw, 80px); align-items: center; }
.ab-office .sechead { margin-bottom: 18px; }
.ab-addr { font-size: 17px; line-height: 1.85; color: var(--mid); max-width: 30em; }
.ab-office .bldg { min-height: 380px; }

/* ---------------------------------------------------------------- about */
.pillars { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pillar {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; color: var(--on-dim);
  background: radial-gradient(ellipse 70% 60% at 90% 0%, rgba(119,158,211,.24), transparent 62%), var(--navy);
  border-radius: 26px; padding: clamp(28px, 3.4vw, 44px);
}
.pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foam); opacity: .06; -webkit-mask: url(/images/wave-pattern.svg) 0 0 / 540px 90px repeat; mask: url(/images/wave-pattern.svg) 0 0 / 540px 90px repeat; }
.pillar h3 { color: #fff; font: 400 clamp(24px, 2.2vw, 30px)/1.35 var(--sans); margin: 0 0 .6em; }
.pillar .plead { margin: 0 0 1.5em; max-width: 48ch; }
.pillar .pareas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.8em; }
.pillar .pareas a { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 14px; line-height: 1.5; color: #fff; border: 1px solid rgba(255,255,255,.25); transition: border-color .2s, background .2s; }
.pillar .pareas a:hover { border-color: var(--foam); background: rgba(255,255,255,.08); }
.pillar .pby { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--hairw); font-size: 15px; }
.pillar .pby span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--on-mute); }
.pillar .pby a { color: #fff; font-weight: 500; }
.pillar .pby a:hover { color: var(--foam); }
.pillar .pby em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--foam); }
.aplab { font-size: 14px; font-weight: 500; color: var(--wave-deep); margin: 0 0 18px; }
.apsplit { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(28px, 3.4vw, 44px); }
.apcol { background: var(--card); border: 1px solid var(--hair); border-radius: 26px; padding: clamp(26px, 3vw, 40px); }
.apcol .pkick { font-size: 13.5px; font-weight: 500; color: var(--wave-deep); margin: 0 0 .6em; }
.apcol h3 { margin: 0 0 1em; font: 400 clamp(22px, 2vw, 27px)/1.4 var(--sans); color: var(--navy-2); }
.aplist > li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 12px; padding: 18px 0; border-top: 1px solid var(--hair); }
.aplist > li:first-child { border-top: 0; padding-top: 4px; }
.aplist .n { grid-row: span 2; font-size: 13px; font-weight: 500; line-height: 1.9; color: var(--wave-deep); font-variant-numeric: tabular-nums; }
.aplist h4 { margin: 0 0 .3em; font-size: 16.5px; font-weight: 500; line-height: 1.5; color: var(--navy-2); }
.aplist p { margin: 0; color: var(--mid); font-size: 15px; line-height: 1.75; }
.apsplit.tight { margin-top: 0; }
.apsplit.tight .apcol { padding: clamp(22px, 2.6vw, 30px); }
.apsplit.tight .apcol h3 { margin-bottom: .5em; font-size: 1.2rem; }
.apsplit.tight .ticks { margin: 0; }
.apcol .aplead { margin: 0 0 1.2em; color: var(--mid); font-size: .95rem; }
.grid4 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.grid4 > li { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 24px; }
.grid4 h3 { font: 500 17.5px/1.5 var(--sans); color: var(--navy-2); margin-bottom: .5em; }
.grid4 p { color: var(--mid); font-size: 15px; }
.ctable { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.crow { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 15px 26px; border-top: 1px solid var(--hair); }
.crow:first-child { border-top: 0; }
.crow dt { color: var(--mid); font-size: 14.5px; }
.crow dd { margin: 0; color: var(--navy-2); }
.crow .cnote { display: block; margin-top: 4px; color: var(--mid); font-size: 14px; }
.band > .wrap > .ctable { max-width: 880px; }

/* ---------------------------------------------------------------- a lawyer's page
   The portrait holds the left of the screen, pinned while the right column is read. */
.p2 { display: grid; background: var(--ivory); }
/* Full bleed from the top edge, under the clear header (user, 7 Oct 2026, after a framed version
   below the header: "แบบโปร่งใสเหมือนตอนแรกดีสุด"). The header no longer covers it while the page
   is read: it slides away on the way down (see header.site.away). */
.p2-photo { position: relative; background: #2a2d33; }
.p2-stick { position: relative; }
.p2-stick picture, .p2-stick img { display: block; width: 100%; height: 100%; }
.p2-stick img { object-fit: cover; object-position: 50% 10%; max-width: none; }
.p2-main { position: relative; min-width: 0; }
.p2-head { position: relative; overflow: hidden; isolation: isolate; color: var(--on-dim); background: radial-gradient(ellipse 60% 70% at 88% 18%, rgba(119,158,211,.24), transparent 62%), var(--navy); }
.p2-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--foam); opacity: .07; -webkit-mask: url(/images/wave-pattern.svg) 0 0 / 720px 120px repeat; mask: url(/images/wave-pattern.svg) 0 0 / 720px 120px repeat; }
.p2-in { position: relative; padding: calc(var(--hd) + clamp(28px, 4vw, 56px)) var(--gut) clamp(96px, 9vw, 132px); }
.p2-in .crumb { margin-bottom: 0; }
.p2-in h1 { color: rgba(255,255,255,.8); font: 300 clamp(34px, 4vw, 56px)/1.18 var(--sans); margin: 22px 0 10px; letter-spacing: -.01em; }
.p2-in h1 b { font-weight: 500; color: #fff; }
body.lang-th .p2-in h1 { line-height: 1.35; }
.p2-alt { color: var(--on-mute); font-size: 1.05rem; margin: 0 0 16px; }
.p2-role { color: #fff; font-weight: 500; font-size: 1.05rem; margin: 0; }
.p2-card {
  position: relative; z-index: 3; background: var(--card); margin: -64px var(--gut) 0 0; border-radius: 22px;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.2vw, 40px); box-shadow: 0 30px 60px -34px rgba(16,18,51,.45);
  border: 1px solid var(--hair); display: grid; gap: 22px;
}
.p2-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.p2-contact li { display: flex; flex-direction: column; gap: 4px; color: var(--navy-2); font-size: 1rem; }
.p2-contact span { font-size: 13px; color: var(--mid); }
.p2-contact a { color: var(--wave-deep); font-weight: 500; font-variant-numeric: tabular-nums; }
.p2-contact a:hover { color: var(--navy-2); }
.p2-cta { margin: 0; }
.p2-body { padding: clamp(40px, 5vw, 72px) var(--gut) clamp(56px, 6vw, 96px) clamp(24px, 3.4vw, 44px); }
.p2-sec + .p2-sec { margin-top: clamp(36px, 4vw, 52px); }
.p2-lab { font: 500 15px/1.4 var(--sans) !important; color: var(--wave-deep); margin: 0 0 14px; }
.p2-bio { color: var(--ink); font-size: clamp(1.02rem, 1.2vw, 1.1rem); line-height: 1.9; max-width: 64ch; margin: 0; }
.p2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p2-chips li { border: 1px solid var(--hair); color: var(--navy-2); padding: 7px 14px; font-size: 14px; background: var(--card); border-radius: 999px; }
.p2-list { max-width: 64ch; }
.p2-list li { padding: 10px 0; border-bottom: 1px solid var(--hair-2); color: var(--ink); font-size: .98rem; }
.p2-list li:first-child { border-top: 1px solid var(--hair-2); }
.p2-after { padding-top: clamp(56px, 6vw, 88px); }
.pt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.pt-head .sechead { margin-bottom: 0; }
.pt-all { color: var(--navy-2); font-weight: 500; font-size: 15px; padding-bottom: 10px; background: var(--wv-deep) 0 100% / 24px 8px repeat-x; }
.pt-all:hover { animation: drift 1s linear infinite; }
.p2-team { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 16px; }
.p2-team li { display: flex; }
.p2-team a {
  position: relative; display: flex; flex-direction: column; width: 100%; background: var(--card); padding: 8px 8px 16px;
  border: 1px solid var(--hair); border-radius: 18px; transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.p2-team a:hover { border-color: var(--wave); box-shadow: 0 24px 46px -32px rgba(27,30,83,.45); }
.p2-team a:hover .pt-name { color: var(--wave-deep); }
.pt-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #2a2d33; }
.pt-photo picture, .pt-photo img { display: block; width: 100%; height: 100%; }
.pt-photo img { object-fit: cover; max-width: none; }
.pt-name { display: block; padding: 14px 6px 2px; color: var(--navy-2); font-weight: 500; font-size: 15.5px; line-height: 1.45; transition: color .2s; }
.pt-role { display: block; padding: 0 6px; color: var(--mid); font-size: 13px; line-height: 1.5; flex: 1; }
.pt-go { display: flex; justify-content: space-between; align-items: center; margin: 12px 6px 0; padding-top: 10px; border-top: 1px solid var(--hair-2); color: var(--wave-deep); font-size: 13.5px; font-weight: 500; }
.pt-go span { transition: transform .3s var(--ease); }
.p2-team a:hover .pt-go span { transform: translateX(4px); }
@media (min-width: 900px) {
  .p2 { grid-template-columns: 42vw minmax(0, 1fr); }
  .p2-stick { position: sticky; top: 0; height: 100vh; min-height: 560px; }
  /* starts below the header, which is clear at the top of the page: from 0 it ran through the
     nav between หน้าแรก and บริการ (user's screenshot, 7 Oct 2026) */
  .p2-photo::after { content: ""; position: absolute; top: var(--hd); right: 0; bottom: 0; width: 3px; background: var(--wave); }
  .p2-in, .p2-body { padding-left: clamp(40px, 5vw, 88px); }
  .p2-in, .p2-body, .p2-card { max-width: 820px; }
  .p2-card { margin-left: clamp(40px, 5vw, 88px); }
}
@media (max-width: 1100px) { .p2-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .p2-stick { aspect-ratio: 4 / 5; max-height: 72vh; }
  .p2-card { margin: -48px var(--gut) 0; }
  .p2-body { padding-left: var(--gut); }
  .p2-contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .p2-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- an article */
.authorcard { display: flex; align-items: center; gap: 20px; margin: 0 0 clamp(28px, 3.2vw, 44px); padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); max-width: 74ch; }
.aphoto { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--navy-3); }
.aphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aname { display: block; color: var(--navy-2); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.35; }
.aname:hover { color: var(--wave-deep); }
.arole { display: block; color: var(--mid); font-size: 1rem; margin-top: 4px; line-height: 1.5; }
.toc { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px 26px; margin: clamp(26px, 3.2vw, 38px) 0; }
.toclab { font-size: 14px; font-weight: 500; color: var(--wave-deep); margin: 0 0 .6em; }
.toc ol { padding: 0 0 0 1.2em; list-style: decimal; }
.toc li { padding: .25em 0; }
.toc li::marker { color: var(--wave-deep); font-size: .85em; }
.toc a { color: var(--ink); font-size: .95rem; }
.toc a:hover { color: var(--wave-deep); }
.col-side .toc { border: 0; background: none; padding: 0 0 20px; margin: 0 0 22px; border-radius: 0; border-bottom: 1px solid var(--hair); }
.col-side .toc ol { padding: 0; list-style: none; counter-reset: toc; }
.col-side .toc li { padding: 0; counter-increment: toc; }
.col-side .toc a { display: block; padding: .4em 0 .4em 28px; position: relative; font-size: 14px; color: var(--mid); line-height: 1.45; transition: color .25s; }
.col-side .toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: .62em; font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.col-side .toc a:hover { color: var(--navy-2); }
.col-side .toc a.is-on { color: var(--navy-2); font-weight: 500; }
.col-side .toc a.is-on::before { color: var(--wave-deep); }
.cites { max-width: 74ch; display: grid; gap: 14px; }
.cites > li { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 24px 28px; }
.cites .cno { color: var(--navy-2); font-weight: 500; font-size: 1.15rem; line-height: 1.4; margin: 0 0 .5em; font-variant-numeric: tabular-nums; }
.cites .cno::before { content: ""; display: block; width: 48px; height: 8px; margin-bottom: 12px; background: var(--wv-deep) 0 0 / 24px 8px repeat-x; }
.cites p { margin: 0; color: var(--ink); font-size: .97rem; line-height: 1.8; }
.tscroll { overflow-x: auto; margin-bottom: 1.6em; }

/* ---------------------------------------------------------------- glossary, fees (kept for their return) */
.ghead { font: 400 clamp(24px, 2.2vw, 30px)/1.35 var(--sans); color: var(--navy-2); padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.gt { display: block; color: var(--navy-2); font-weight: 500; font-size: 1.02rem; margin-bottom: .3em; }
.gt abbr { color: var(--wave-deep); text-decoration: none; }
.gd { display: block; color: var(--mid); font-size: .9rem; line-height: 1.7; }
.feesteps { max-width: 900px; display: grid; gap: 14px; }
.feesteps > li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; padding: 24px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); }
.feesteps .n { font-size: 13px; font-weight: 500; color: var(--wave-deep); line-height: 2; }
.feesteps h3 { font-size: 1.1rem; margin-bottom: .4em; }
.feesteps p { color: var(--mid); margin: 0; max-width: 70ch; }
.seplist { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.seplist li { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px 24px; }
.seplist strong { display: block; color: var(--navy-2); font-weight: 500; margin-bottom: .3em; }
.seplist span { color: var(--mid); font-size: .92rem; line-height: 1.7; }

/* ---------------------------------------------------------------- privacy notice */
.privacy { max-width: 76ch; }
.privacy h2 { font: 500 clamp(21px, 2vw, 26px)/1.45 var(--sans); color: var(--navy-2); margin: clamp(40px, 5vw, 60px) 0 .6em; scroll-margin-top: 96px; }
.privacy h2::before { content: ""; display: block; width: 48px; height: 8px; margin-bottom: 14px; background: var(--wv-deep) 0 0 / 24px 8px repeat-x; }
.privacy h2:first-child { margin-top: 0; }
.privacy h3 { font-size: 1.05rem; margin: clamp(24px, 3vw, 34px) 0 .5em; scroll-margin-top: 96px; }
#cookies { scroll-margin-top: 96px; }
.privacy p { color: var(--ink); margin-bottom: 1.1em; }
.privacy ul { margin: 0 0 1.4em; }
.privacy ul li { position: relative; padding: 0 0 .7em 30px; color: var(--ink); }
.privacy ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 18px; height: 6px; background: var(--wv-wave) 0 0 / 18px 6px; }
.privacy strong { color: var(--navy-2); font-weight: 500; }
.privacy code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88em; background: var(--ivory-2); border: 1px solid var(--hair); padding: .1em .4em; border-radius: 6px; }
.privacy table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .92rem; }
.privacy th, .privacy td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair-2); }
.privacy th { font-size: 13.5px; color: var(--wave-deep); font-weight: 500; border-bottom: 1px solid var(--hair); }
.privacy td { color: var(--ink); }
.privacy hr { border: 0; border-top: 1px solid var(--hair); margin: clamp(28px, 3.4vw, 42px) 0; }

/* ---------------------------------------------------------------- contact */
.clines { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 0 0 clamp(28px, 3.4vw, 42px); }
.clines > li { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: clamp(22px, 2.6vw, 30px); }
.clang { font-size: 14px; font-weight: 500; color: var(--wave-deep); margin-bottom: .7em; }
.cwho { color: var(--navy-2); font-weight: 500; margin-bottom: .7em; }
.cwho span { color: var(--soft); font-weight: 400; font-size: .85rem; }
.cnum { margin-bottom: .35em; }
.cnum a { font-size: 1.45rem; color: var(--navy-2); font-variant-numeric: tabular-nums; }
.cnum a:hover { color: var(--wave-deep); }
.cmail a { font-size: .95rem; color: var(--mid); word-break: break-all; }
.qrs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 230px)); }
.qrs > li { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 14px 14px 18px; }
.qrs .qr { border: 1px solid var(--hair-m); background: #fff; padding: 10px; margin-bottom: 14px; border-radius: 12px; }
.qrs .qr img { width: 100%; height: auto; }
.qapp { color: var(--navy-2); font-weight: 500; margin-bottom: .15em; }
.quse { color: var(--soft); font-size: .85rem; margin-bottom: .3em; }
.qid { font-size: .9rem; color: var(--mid); word-break: break-word; }
#chat, #map { scroll-margin-top: 96px; }
.mapbox { margin: 28px 0 10px; border: 1px solid var(--hair-m); background: var(--ivory-2); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); }
.mapbox iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapalt { margin: 0 0 4px; font-size: .92rem; color: var(--mid); }
.mapalt a { color: var(--wave-deep); }
.cbuilding { margin: clamp(22px, 3vw, 32px) 0 clamp(36px, 4vw, 52px); max-width: 420px; }
.cbuilding img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.cbuilding figcaption { font-size: .88rem; color: var(--mid); margin-top: 10px; }

/* ---------------------------------------------------------------- guides */
.paths { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.path { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 24px 24px 18px; }
.path .pkick { font-size: 13.5px; font-weight: 500; color: var(--wave-deep); margin: 0; }
.path h3 { font: 500 clamp(18px, 1.6vw, 21px)/1.45 var(--sans); margin: .2em 0 .7em; color: var(--navy-2); }
.path li { border-top: 1px solid var(--hair-2); }
.path li a { display: block; padding: 10px 22px 10px 0; position: relative; color: var(--ink); font-size: .95rem; line-height: 1.5; transition: color .2s; }
.path li a::after { content: "\2192"; position: absolute; right: 0; top: 10px; color: var(--wave-deep); }
.path li a:hover { color: var(--wave-deep); }
.hublinks { display: flex; flex-wrap: wrap; gap: 10px; }
.hublinks a { display: inline-block; padding: 11px 20px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); color: var(--navy-2); font-size: .95rem; transition: border-color .2s, background .2s; }
.hublinks a:hover { border-color: var(--wave); background: var(--mist); }
.tlic + .tlic { margin-top: 0; }

/* ---------------------------------------------------------------- footer */
footer.site { background: var(--deep); color: var(--on-dim); padding: 64px 0 34px; font-size: 14.5px; }
.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.ft-brand img { height: 56px; width: auto; }
.ft-brand p { margin-top: 18px; max-width: 24em; line-height: 1.8; color: var(--on-mute); }
.ft-h { font: 500 14.5px/1 var(--sans); color: var(--foam); margin: 0 0 18px; }
.ft-h.sp { margin-top: 26px; }
footer.site ul { display: grid; gap: 9px; }
footer.site ul a, .flink { color: var(--on-dim); transition: color .2s; }
footer.site ul a:hover, .flink:hover { color: #fff; }
.flink { display: block; text-align: left; font-size: 14.5px; }
footer.site .ln small { display: block; font-size: 12.5px; color: var(--on-mute); }
footer.site .ln a, footer.site .ln span { color: #fff; }
.wm { position: relative; margin-top: 60px; }
.wm svg { display: block; width: 100%; height: auto; }
.wm text { font: 600 230px/1 var(--sans); letter-spacing: -6px; fill: none; stroke: rgba(185,210,247,.22); stroke-width: 1; }
body.lang-th .wm text { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.wm img { position: absolute; left: 19%; top: -15%; width: 22%; height: auto; opacity: .6; }
.ft-bot .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }
.ft-bot .legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ft-bot .legal a, .ft-bot .flink { color: var(--on-dim); font-size: 13px; }
.ft-bot .legal a:hover, .ft-bot .flink:hover { color: #fff; }
.ft-bot { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 12px; font-size: 13px; line-height: 1.8; color: var(--on-mute); }

/* ---------------------------------------------------------------- cookie opt-out
   Above the chat dock (90) and the phone bar (110): it is full-width on the same edge. */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 130; background: var(--card); border: 1px solid var(--hair); border-radius: 20px; padding: 16px 0; box-shadow: 0 24px 60px -30px rgba(16,18,51,.55); }
.consent[hidden] { display: none; }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.consent-text { max-width: 70ch; font-size: .95rem; line-height: 1.6; color: var(--ink); margin: 0; }
.consent-text a { color: var(--wave-deep); text-decoration: underline; text-underline-offset: 3px; }
.consent-btns { display: flex; flex: 0 0 auto; gap: 10px; }
@media (max-width: 720px) { .consent-in { flex-direction: column; align-items: flex-start; } }
body.has-consent .chatdock { transform: translateY(calc(-1 * var(--consent-h, 0px))); }

/* ---------------------------------------------------------------- chat dock */
.chatdock { position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(16px, 3vw, 32px); z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.cd-item { position: relative; }
.cd-btn { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--cd, var(--navy-2)); color: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.5); transition: transform .25s var(--ease); }
.cd-btn svg { width: 28px; height: 28px; fill: #fff; }
.cd-btn:hover, .cd-btn:focus-visible { transform: translateY(-3px); }
.cd-tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--deep); color: #fff; font-size: .8rem; padding: 7px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.cd-btn:hover .cd-tip, .cd-btn:focus-visible .cd-tip { opacity: 1; }
@media (hover: none) { .cd-tip { display: none; } }
.cd-pop { position: absolute; right: calc(100% + 12px); bottom: 0; width: 216px; padding: 12px; background: #fff; text-align: center; border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 20px 48px -18px rgba(16,18,51,.6); opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
.cd-item.open .cd-pop { opacity: 1; visibility: visible; transform: none; }
.cd-pop img { width: 100%; height: auto; border-radius: 10px; }
.cd-app { color: var(--navy-2); font-weight: 500; font-size: .88rem; margin: 10px 0 .1em; }
.cd-note { color: var(--soft); font-size: .8rem; margin: 0; }

/* ---------------------------------------------------------------- the phone bar */
.stickybar { display: none; }
@media (max-width: 780px) {
  .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(248,245,238,.94); border-top: 1px solid var(--hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .stickybar.js-sb { transform: translateY(110%); transition: transform .3s var(--ease); }
  .stickybar.js-sb.on { transform: none; }
  .stickybar a { text-align: center; padding: 8px 6px; border-radius: 14px; font-size: .9rem; font-weight: 500; line-height: 1.25; display: flex; flex-direction: column; justify-content: center; }
  .sb-main { background: var(--navy-2); color: #fff; }
  .sb-main span { display: block; font-size: .68rem; color: var(--on-mute); font-weight: 400; }
  .sb-alt { color: var(--navy-2); box-shadow: inset 0 0 0 1px var(--hair); }
  footer.site { padding-bottom: 100px; }
  .chatdock { bottom: 84px; }
  .cd-btn { width: 48px; height: 48px; }
  .cd-btn svg { width: 25px; height: 25px; }
}

/* ---------------------------------------------------------------- motion
   Everything rises once as it enters; the drawings draw themselves; reduced motion
   switches every one of these off. */
.js .reveal, .js .rise, .js .stagger, .js [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--out), transform 1s var(--out); transition-delay: var(--d, 0s); }
.js .reveal.in, .js .rise.in, .js .stagger.in, .js [data-rv].in { opacity: 1; transform: none; }
.rise:nth-child(2) { --d: .07s; } .rise:nth-child(3) { --d: .14s; } .rise:nth-child(4) { --d: .21s; }
.rise:nth-child(5) { --d: .28s; } .rise:nth-child(6) { --d: .35s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01s !important; scroll-behavior: auto !important; }
  .js .reveal, .js .rise, .js .stagger, .js [data-rv] { opacity: 1; transform: none; }
  .js .iso .i-v, .js .iso .i-f { stroke-dashoffset: 0; }
  .progress { display: none; }
}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1240px) { .chip-clock { display: none; } .nav { gap: 18px; } }
@media (max-width: 1080px) {
  .nav, .hd-r .btn-cta { display: none; }
  .burger { display: inline-flex; }
  .hd-r { margin-left: auto; }
  html:not(.js) .nav { display: flex; flex-wrap: wrap; position: static; }
  .g4, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.mirror { grid-template-columns: minmax(0, 1fr); }
  .split.mirror .ind-fig { order: 2; }
  .xp { grid-template-columns: minmax(0, 1fr); }
  .xp-list { display: none; }
  .js .xp .xp-p:not(.on), .xp .xp-p { display: flex; flex-direction: column; min-height: 0; margin-bottom: 14px; }
  .js .xp-p .iso .i-v, .js .xp-p .iso .i-f { animation: none; }
  .xp-foot { display: none; }
  .ab-split, .xbg, .lift, .off2 { grid-template-columns: minmax(0, 1fr); }
  .row4 .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio > :nth-child(3) { grid-column: 1 / -1; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .phead.has-fig .wrap { grid-template-columns: minmax(0, 1fr); }
  .phead-fig { grid-column: 1; grid-row: auto; justify-self: start; max-width: 380px; margin-top: 28px; }
  .lghead { grid-template-columns: minmax(0, 1fr); }
  .lg-fig { justify-self: start; max-width: 280px; order: -1; }
  .paths { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .pillars, .apsplit, .pcards { grid-template-columns: 1fr; } }
@media (max-width: 1080px) {
  .princ { grid-template-columns: minmax(0, 1fr); }
  .princ > li, .princ > li + li { padding: 24px 0 18px; border-left: 0; border-top: 1px solid var(--hair); }
  .princ > li:first-child { border-top: 0; }
  .ap-p { grid-template-columns: minmax(0, 1fr); padding: 30px 28px; }
  .ap-fig { order: -1; max-width: 320px; justify-self: start; }
  .ab-intro, .ab-office { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .astats { margin-top: 30px; }
  .astat, .astat + .astat { padding: 16px 10px 0 0; }
  .astat + .astat { padding-left: 12px; }
  .astat > span { font-size: 12.5px; }
  .princ .pn { font-size: 44px; }
  .ap-p { padding: 24px 20px; border-radius: 22px; }
  .ab-office .bldg { min-height: 260px; }
  .policy { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 20px; }
  .policy-ic { width: 40px; height: 40px; }
  .ab-story p { font-size: 16.5px; }
}
@media (max-width: 560px) { .pcard { grid-template-columns: minmax(0, 1fr); } .pc-t { padding: 18px 8px 8px; } }
@media (max-width: 760px) {
  body { font-size: 16px; }
  :root { --hd: 68px; }
  .hd-in { gap: 10px; }
  .brand img { height: 34px; }
  header.site.solid .hd-in { height: 60px; }
  header.site.solid .brand img { height: 30px; }
  .langtabs a { padding: 6px 8px; }
  .head { margin-bottom: 34px; }
  .h2, .sechead h2 { font-size: clamp(28px, 7.6vw, 36px); }
  .g2, .g3, .g4, .row4 .steps, .trio, .lgrows { grid-template-columns: minmax(0, 1fr); }
  .trio > :nth-child(3) { grid-column: auto; }
  .hud-top { padding-top: 92px; }
  .hud-top .coords { display: none; }
  .h1, body.lang-en .h1 { font-size: clamp(32px, 9vw, 44px); }
  .hf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hf-clock { display: none; }
  .hf-c { padding: 16px 12px 18px; }
  .hf-c .th { font-size: 12.5px; }
  .tow { height: 112px; }
  .tow text { font-size: 21px; }
  .xp-p { padding: 26px 20px 26px; }
  .xp-top { grid-template-columns: minmax(0, 1fr); }
  .xp-fig { order: -1; max-width: 250px; }
  .xp-links { grid-template-columns: minmax(0, 1fr); }
  .reg dl > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 20px; }
  .tabs { display: flex; width: 100%; }
  .tabs button { flex: 1; padding: 10px 8px; font-size: 14px; }
  .ind-legend { display: flex; }
  .iso .i-tag, .iso .i-th, .iso .i-lead, .iso .i-dot { display: none; }
  .iso-boi .i-lead, .iso-boi .i-dot { display: inline; }
  .lift { padding: 28px 20px 24px; margin-top: -110px; }
  .band.pad-lift { padding-bottom: calc(var(--sec) + 110px); }
  .fq summary { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 10px; }
  .fq .a { padding: 0 0 18px 40px; }
  .tgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tgrid .pp { grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding: 10px 16px 10px 10px; }
  .tgrid .pp.hov::after { left: 142px; bottom: 8px; }
  .tgrid .pp-n { font-size: 17px; }
  .teamg { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
  .teamg::-webkit-scrollbar { display: none; }
  .teamg > * { flex: 0 0 82%; scroll-snap-align: start; }
  .orows > * { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .rows a { grid-template-columns: 40px minmax(0, 1fr); }
  .rows .go { display: none; }
  .ft-grid { grid-template-columns: 1fr; }
  .crow { grid-template-columns: 1fr; gap: 2px; }
  .phead h1 { font-size: clamp(30px, 8.4vw, 42px); }
  .phead .lede { font-size: 16.5px; }
  .phead-fig { max-width: 300px; }
  .lg { border-radius: 22px; }
  .authorcard { gap: 14px; }
  .aphoto { width: 72px; height: 72px; }
}
@media (max-width: 400px) {
  .brand img { height: 30px; }
  .hd-in { gap: 8px; }
  .langtabs a { padding: 6px 7px; font-size: 11.5px; }
  .burger { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------- print */
@media print {
  header.site, footer.site, .stickybar, .closing, .progress, .chatdock, .consent, .shore, .wave-cv, .drawer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .phead, .hero4, .navy { background: none !important; color: #000; padding: 12pt 0; }
  .phead h1, .phead .lede, .h2, h2, h3 { color: #000 !important; }
  .js .reveal, .js .rise, .js [data-rv] { opacity: 1 !important; transform: none !important; }
  a { color: #000; }
}

/* ---------------------------------------------------------------- sharing an article
   (12 Oct 2026). Icon buttons under the byline; labelled ones at the article's foot. Each
   network's own colour on its glyph, the firm's navy on copy and the device share. */
.share ul { display: flex; flex-wrap: wrap; gap: 10px; }
.share .sh { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); color: var(--navy-2); font: 500 14px/1.2 var(--sans); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.share .sh:hover, .share .sh:focus-visible { border-color: var(--wave-deep); background: var(--ivory-2); transform: translateY(-1px); }
.share .sh svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.share .sh-line svg { fill: #06C755; } .share .sh-facebook svg { fill: #1877F2; }
.share .sh-linkedin svg { fill: #0A66C2; } .share .sh-whatsapp svg { fill: #25D366; }
.share .sh-wechat svg { fill: #07C160; } .share .sh-email svg, .share .sh-copy svg { fill: var(--wave-deep); }
.share .sh.done { border-color: #1f8f5f; color: #1f8f5f; }
.share.compact { margin: -6px 0 clamp(26px, 3vw, 36px); }
.share.compact .sh { width: 40px; height: 40px; padding: 0; justify-content: center; }
.article > .share:not(.compact), .article .share:not(.compact) { margin: clamp(8px, 1vw, 14px) 0 clamp(34px, 4vw, 52px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--hair); max-width: 74ch; }
.share .shead { margin-bottom: 14px; }
.share .sh-hint { margin-top: 12px; font-size: 13.5px; color: var(--soft); }

/* Profile: headline figures, grouped experience and BOI projects (Phicha's CV, 12 Oct 2026) */
.p2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); max-width: 64ch; }
.p2-stats li { background: var(--card); padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.p2-stats b { font: 500 clamp(28px, 3vw, 38px)/1 var(--sans); color: var(--navy-2); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.p2-stats span { font-size: 13px; line-height: 1.5; color: var(--mid); }
.p2-grp + .p2-grp { margin-top: 26px; }
.p2-grp h3 { font: 500 1.02rem/1.5 var(--sans); color: var(--navy-2); margin: 0 0 8px; }
.p2-proj { max-width: 64ch; }
.p2-proj li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 18px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair-2); }
.p2-proj li:first-child { border-top: 1px solid var(--hair-2); }
.pj-no { grid-row: span 2; color: var(--wave-deep); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.pj-t { color: var(--ink); font-size: .98rem; }
.pj-c { color: var(--mid); font-size: 13.5px; }
.p2-note { color: var(--mid); font-size: 13px; margin: 12px 0 0; max-width: 64ch; }
@media (max-width: 640px) {
  .p2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p2-proj li { grid-template-columns: 1fr; }
  .pj-no { grid-row: auto; }
}