/* Theme B · เหล็กขัดเงา — ported from preview/b.html (chosen 2026-10-19) */
:root{
  --bg:#111213; --bg-2:#16181a; --plate:#1c1f22; --plate-2:#23272b;
  --ink:#eef1f3; --ink-2:#b0b7be; --ink-3:#8a929a;
  --hi:rgba(255,255,255,.10); --lo:rgba(0,0,0,.65); --rule:rgba(255,255,255,.12);
  --steel:linear-gradient(180deg,#f6f8f9 0%,#d3d8dc 48%,#aab1b7 52%,#c9ced3 100%);
  --line-green:#05813a;
  --cond:"Saira Condensed","Noto Sans Thai",system-ui,sans-serif;
  --body:"Noto Sans Thai",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,64px); --max:1280px;
  --brushed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.9' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .18 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;scrollbar-color:#5b6268 var(--bg)}
body{margin:0;background:var(--bg) var(--brushed);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
::selection{background:#d3d8dc;color:#111213}
:focus-visible{outline:2px solid #e8ecef;outline-offset:3px}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--cond);font-stretch:75%;font-weight:800;line-height:1.25;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.lat{font-family:var(--cond);letter-spacing:.32em;text-transform:uppercase;font-weight:600}
.nw{white-space:nowrap}
.engraved{height:2px;border:0;margin:0;background:linear-gradient(var(--lo) 50%,var(--hi) 50%)}


.top{position:sticky;top:0;z-index:50;background:rgba(17,18,19,.9);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--lo),0 2px 0 var(--hi)}
.top .wrap{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand img{width:32px}
.brand b{font:800 24px/1 var(--cond);letter-spacing:.02em}
.brand small{display:block;font:600 11px/1 var(--cond);letter-spacing:.5em;color:var(--ink-2);margin-top:3px}
.menu{display:none;gap:2px}
.menu a{text-decoration:none;padding:8px 14px;font-size:15.5px;color:var(--ink-2)}
.menu a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:4px;font:700 17px/1.2 var(--body);text-decoration:none;border:0;cursor:pointer;color:#141618;background:var(--steel);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px -6px rgba(0,0,0,.7);transition:filter .2s,transform .15s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);filter:none}
.btn-line{background:var(--line-green);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -6px rgba(0,0,0,.7)}
.top .btn{display:none;min-height:42px;font-size:15.5px}
@media (min-width:960px){.menu{display:flex}.top .btn{display:inline-flex}}

/* hero */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - 104px);display:flex;align-items:center;padding:clamp(40px,7vw,80px) 0}
.hero::before{content:"";position:absolute;left:-10%;top:-30%;width:70%;height:80%;background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent);transform:rotate(-24deg);pointer-events:none}
.hero .mark{position:absolute;right:max(-60px,calc(50% - 720px));top:50%;height:min(92%,760px);width:auto;transform:translateY(-50%);opacity:.95;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.hero .wrap{position:relative;width:100%}
.hero h1{font-size:clamp(46px,9vw,132px);line-height:1.25;max-width:11ch}
.hero h1 .dim{color:var(--ink-3)}
.hero .lead{margin-top:22px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:40ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .where{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--ink-3);font-size:15px}
.hero .where span{display:inline-flex;align-items:center;gap:8px}
.hero .where span::before{content:"";width:9px;height:9px;border:1.5px solid var(--ink-3);transform:rotate(45deg)}
@media (max-width:760px){.hero .mark{height:300px;top:24px;right:-70px;transform:none;opacity:.22}.hero{min-height:0}}

/* bolt rail */
.rail{position:fixed;right:22px;top:110px;bottom:40px;width:150px;z-index:40;display:none}
.rail .shaft{position:absolute;right:20px;top:34px;bottom:0;width:26px;border-radius:0 0 6px 6px;background:repeating-linear-gradient(180deg,#cfd4d8 0 5px,#3b4045 5px 7px,#9aa1a7 7px 9px);opacity:.7;box-shadow:inset 3px 0 4px rgba(0,0,0,.35),inset -3px 0 4px rgba(0,0,0,.35)}
.rail .head{position:absolute;right:8px;top:0;width:50px;height:30px;border-radius:5px;background:var(--steel);box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(0,0,0,.6)}
.rail .head::before,.rail .head::after{content:"";position:absolute;top:3px;bottom:3px;width:2px;background:rgba(0,0,0,.35)}
.rail .head::before{left:11px}.rail .head::after{right:11px}
.rail .nut{position:absolute;right:4px;width:58px;height:26px;border-radius:4px;background:var(--steel);box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(0,0,0,.7);top:calc(34px + var(--p,0) * (100% - 60px));transition:top .12s linear}
.rail .nut::before,.rail .nut::after{content:"";position:absolute;top:3px;bottom:3px;width:2px;background:rgba(0,0,0,.35)}
.rail .nut::before{left:12px}.rail .nut::after{right:12px}
.rail a{position:absolute;right:72px;transform:translateY(-50%);white-space:nowrap;text-decoration:none;font-size:13.5px;line-height:1.3;color:var(--ink-3);display:flex;align-items:center;gap:8px;transition:color .2s}
.rail a::after{content:"";width:12px;height:1px;background:currentColor}
.rail a.on,.rail a:hover{color:var(--ink)}
@media (min-width:1280px){.rail{display:block}.hero .mark{right:170px;height:min(70%,560px)}.hero h1{font-size:clamp(46px,6vw,88px)}.has-rail main .wrap,.has-rail footer .wrap{padding-right:200px}.has-rail .band{margin-right:172px}}

/* proof band */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#000}
.band figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.82);transition:filter .6s,transform .8s}
.band figure:hover img{filter:none;transform:scale(1.03)}
.band figcaption{position:absolute;left:0;bottom:0;padding:12px 16px;font-size:15px;line-height:1.4;background:rgba(10,11,12,.78)}
@media (max-width:700px){.band{grid-template-columns:1fr 1fr}.band figure:first-child{grid-column:1/-1}}

section.s{padding:clamp(64px,9vw,120px) 0}
.s-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(32px,5vw,56px)}
.s-head h2{font-size:clamp(40px,6vw,80px);line-height:1.25}
.s-head p{color:var(--ink-2);max-width:44ch}

/* services rows */
.svc{display:grid;gap:0}
.svc article{display:grid;gap:22px;padding:clamp(28px,4vw,44px) 0;border-top:2px solid transparent;border-image:linear-gradient(var(--lo) 50%,var(--hi) 50%) 1}
@media (min-width:880px){.svc article{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}.svc article:nth-child(even) .ph{order:2}}
.svc .ph{aspect-ratio:16/10;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px var(--rule),0 24px 40px -20px #000}
.svc .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.9);transition:filter .7s}
.svc article.in .ph img{filter:grayscale(.15) contrast(1.02)}
.svc h3{font-size:clamp(32px,4vw,52px);line-height:1.25}
.svc p{color:var(--ink-2);margin-top:12px;max-width:48ch}
.svc .fit{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.svc .fit span{font-size:14px;line-height:1.4;padding:5px 12px;border-radius:3px;background:var(--plate-2);box-shadow:inset 0 1px 0 var(--hi);color:var(--ink-2)}
.svc .more{display:inline-flex;margin-top:18px;font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.4);padding-bottom:2px}
.svc .more:hover{border-color:var(--ink)}

/* works */
.works{background:var(--bg-2) var(--brushed);box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--hi)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips button{all:unset;cursor:pointer;padding:9px 18px;border-radius:4px;font-size:15.5px;line-height:1.4;color:var(--ink-2);background:var(--plate);box-shadow:inset 0 1px 0 var(--hi),0 1px 0 var(--lo)}
.chips button[aria-pressed="true"]{background:var(--steel);color:#141618;box-shadow:inset 0 1px 0 #fff}
.chips button:focus-visible{outline:2px solid var(--ink)}
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;user-select:none;--pos:50%;box-shadow:0 0 0 1px var(--rule),0 40px 60px -30px #000}
@media (max-width:700px){.ba{aspect-ratio:4/3}}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .bolt{position:absolute;top:0;bottom:0;left:var(--pos);width:14px;margin-left:-7px;pointer-events:none;background:repeating-linear-gradient(180deg,#d9dde1 0 4px,#4a4f54 4px 6px);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 18px rgba(0,0,0,.6)}
.ba .bolt::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:34px;transform:translate(-50%,-50%);border-radius:5px;background:var(--steel) ;box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(0,0,0,.6)}
.ba .bolt::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:14px;transform:translate(-50%,-50%);z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='%23222' stroke-width='2'%3E%3Cpath d='M7 2 2 7l5 5M23 2l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.ba .tag{position:absolute;top:14px;padding:4px 12px;border-radius:3px;font:700 15px/1.4 var(--body);pointer-events:none}
.ba .tag.l{left:14px;background:rgba(10,11,12,.8)}
.ba .tag.r{right:14px;background:var(--steel);color:#141618}
.wcap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:18px}
.wcap h3{font-size:clamp(26px,3vw,36px)}
.wcap p{color:var(--ink-2)}
.strip-thumbs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 2px 8px;margin-top:8px;scrollbar-width:thin}
.thumb{all:unset;cursor:pointer;flex:0 0 220px;scroll-snap-align:start;border-radius:4px;overflow:hidden;background:var(--plate);box-shadow:0 0 0 1px var(--rule);transition:box-shadow .2s}
.thumb img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) brightness(.85);transition:filter .3s}
.thumb span{display:block;padding:9px 12px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.thumb:hover img,.thumb[aria-current="true"] img{filter:none}
.thumb[aria-current="true"]{box-shadow:0 0 0 2px #d3d8dc}
.thumb[aria-current="true"] span{color:var(--ink)}
.thumb:focus-visible{outline:2px solid var(--ink)}
.thumb[hidden]{display:none}
.empty{display:none;padding:24px;color:var(--ink-2)}
.note{margin-top:12px;font-size:13.5px;color:var(--ink-3)}

/* process */
.steps{display:grid;gap:30px;counter-reset:s;list-style:none;margin:0;padding:0}
@media (min-width:860px){.steps{grid-template-columns:repeat(4,1fr);gap:28px}}
.steps li{border-top:2px solid transparent;border-image:linear-gradient(var(--lo) 50%,var(--hi) 50%) 1;padding-top:20px}
.steps .n{font:800 64px/1 var(--cond);color:transparent;-webkit-text-stroke:1.5px #8a929a}
.steps h3{font-size:28px;margin-top:10px}
.steps p{color:var(--ink-2);margin-top:6px}

/* rating plate */
.plate{position:relative;border-radius:8px;background:linear-gradient(180deg,#2a2e32,#1d2023) ,var(--brushed);background-blend-mode:normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.6),0 30px 50px -30px #000;padding:clamp(22px,3vw,40px) clamp(22px,4vw,56px)}
.plate .screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#eef1f3,#7d858c 70%);box-shadow:0 1px 1px #000}
.plate .screw::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;background:#3d4247;transform:rotate(35deg)}
.plate .s1{left:12px;top:12px}.plate .s2{right:12px;top:12px}.plate .s3{left:12px;bottom:12px}.plate .s4{right:12px;bottom:12px}
.plate .ptitle{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px}
.plate .ptitle span{font-size:14px;color:var(--ink-2)}
.prow{display:grid;gap:4px 28px;padding:16px 0;border-top:2px solid transparent;border-image:linear-gradient(var(--lo) 50%,var(--hi) 50%) 1}
@media (min-width:760px){.prow{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,5fr)}}
.prow b{font-size:18px;font-weight:700}
.prow span{color:var(--ink-2)}

/* contact */
.contact{display:grid;gap:40px}
@media (min-width:980px){.contact{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}}
.bignum{display:block;font:800 clamp(44px,5vw,76px)/1 var(--cond);text-decoration:none;margin-top:18px;white-space:nowrap}
.bignum:hover{color:#fff}
.clist{margin-top:28px;display:grid;gap:0}
.clist div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:14px 0;border-top:2px solid transparent;border-image:linear-gradient(var(--lo) 50%,var(--hi) 50%) 1}
.clist dt{color:var(--ink-3)}
.clist dd{margin:0}
.clist a{text-decoration:none;font-weight:600}
.clist a:hover{text-decoration:underline;text-underline-offset:4px}
form.req{position:relative}
form.req h3{font-size:34px}
form.req>p{color:var(--ink-2);margin:6px 0 20px}
.fgrid{display:grid;gap:16px}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}}
.field label{display:block;font-size:15px;color:var(--ink-2);margin-bottom:6px;line-height:1.4}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:11px 14px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:#0f1012;border:1px solid #6b737a;border-radius:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 var(--hi);overflow-wrap:anywhere}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 2px #cfd4d8}
.field .err{display:none;color:#ff8f80;font-size:14px;margin-top:4px}
.field.bad input{box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 2px #ff8f80}
.field.bad .err{display:block}
.fact{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.fact .msg{font-size:15px;color:var(--ink-2)}
.fact .msg.ok{color:#9be3b4}
.btn[disabled]{opacity:.6;cursor:progress}

footer{padding:36px 0 calc(100px + env(safe-area-inset-bottom));box-shadow:inset 0 1px 0 var(--lo),inset 0 2px 0 var(--hi)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 32px;justify-content:space-between;align-items:center;color:var(--ink-3);font-size:14px}
footer .wrap img{width:150px;height:auto}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}
@media (min-width:960px){footer{padding-bottom:40px}}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(12,13,14,.95);box-shadow:0 -1px 0 var(--hi)}
@media (min-width:960px){.dock{display:none}}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.rail .nut{transition:none}}
.field ::placeholder{color:var(--ink-2);opacity:1}
.fact .msg.bad{color:#ff8f80}

/* 3-step cross-section: before / injecting / after rain */
.xs{display:block;width:100%;height:auto}
.xs .ln{stroke:var(--xs-line);fill:none;stroke-width:1.6}
.xs .th{stroke:var(--xs-thin);fill:none;stroke-width:1}
.xs .dot{fill:var(--xs-line)}
.xs text{paint-order:stroke;stroke:var(--xs-bg);stroke-width:5px;stroke-linejoin:round}
.xs .tx{fill:var(--xs-text);font:500 19px var(--xs-font)}
.xs .tx-s{fill:var(--xs-thin);font:500 15px var(--xs-font)}
.xs .leak-t{fill:var(--xs-leak)}.xs .foam-t{fill:var(--xs-foam)}.xs .water-t{fill:var(--xs-water)}.xs .ok-t{fill:var(--xs-ok)}
.xs-h path{fill:none;stroke:var(--xs-hatch);stroke-width:1;opacity:.55}.xs-h circle{fill:var(--xs-hatch);opacity:.55}
.xs-w{fill:none;stroke:var(--xs-water);stroke-width:1.1;opacity:.75}
.xs-f1{fill:var(--xs-foam)}.xs-f2{fill:var(--xs-foam-dot)}
.xs .crack{fill:var(--xs-void);stroke:var(--xs-leak);stroke-width:2;transition:stroke .6s}
.xs:not([data-step="1"]) .crack{stroke:var(--xs-line)}
.xs .blob{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 1.6s cubic-bezier(.16,.84,.3,1)}
.xs:not([data-step="1"]) .blob{transform:scale(1)}
.xs:not([data-step="1"]) .blob.b2{transition-delay:.6s}
.xs .hole{stroke:var(--xs-thin);stroke-width:1.2;stroke-dasharray:5 5;fill:none}
.xs .fill{stroke:var(--xs-foam);stroke-width:5;stroke-linecap:round;fill:none;stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset .9s ease-out}
.xs:not([data-step="1"]) .fill{stroke-dashoffset:0}
.xs:not([data-step="1"]) .fill.h2{transition-delay:.6s}
.xs .drop{fill:var(--xs-leak);animation:xs-fall 1.6s cubic-bezier(.55,0,1,.45) infinite}
.xs .drop.d2{animation-delay:.55s}.xs .drop.d3{animation-delay:1.1s}
@keyframes xs-fall{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(92px);opacity:0}}
.xs:not([data-step="1"]) .drop{animation:none;opacity:0}
.xs .puddle{fill:none;stroke:var(--xs-leak);stroke-width:1.4;transition:opacity .8s .4s}
.xs:not([data-step="1"]) .puddle{opacity:0}
.xs .rain{opacity:0;transition:opacity .6s}
.xs[data-step="3"] .rain{opacity:1}
.xs .rain line{stroke:var(--xs-water);stroke-width:2;stroke-linecap:round;animation:xs-rain .9s linear infinite}
@keyframes xs-rain{0%{transform:translateY(-30px);opacity:0}20%{opacity:1}100%{transform:translateY(80px);opacity:0}}
.xs .push,.xs .ok{opacity:0;transition:opacity .5s}
.xs[data-step="3"] .push{opacity:1;transition-delay:.7s}
.xs[data-step="3"] .ok{opacity:1;transition-delay:1.1s}
.xs .push .arr{animation:xs-push 1.2s ease-in-out infinite}
@keyframes xs-push{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.xs .water-s{stroke:var(--xs-water);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.xs .foam-s{stroke:var(--xs-foam);stroke-width:4;stroke-linecap:round}
.xs .ok-c{fill:none;stroke:var(--xs-ok);stroke-width:2}.xs .ok-p{fill:none;stroke:var(--xs-ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.xs .st{opacity:0;transition:opacity .45s}
.xs[data-step="1"] .st1,.xs[data-step="2"] .st2,.xs[data-step="3"] .st3{opacity:1}
@media (max-width:640px){.xs .tx{font-size:21px}.xs .tx-s{font-size:17px}}
@media (prefers-reduced-motion:reduce){.xs .drop,.xs .rain line,.xs .push .arr{animation:none}.xs[data-step="1"] .drop{opacity:1}.xs .blob,.xs .fill{transition:none}}
.xsec .xs{--xs-line:#e3e7ea;--xs-thin:#a3abb2;--xs-hatch:#8a929a;--xs-leak:#ff8f80;--xs-foam:#e8b84a;--xs-foam-dot:#a57a1c;--xs-water:#8fb8de;--xs-ok:#9be3b4;--xs-text:#eef1f3;--xs-void:#070809;--xs-bg:#0f1012;--xs-font:"Noto Sans Thai",system-ui,sans-serif;background:#0f1012;border-radius:4px;box-shadow:inset 0 0 0 1px var(--rule)}
.xs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.xs-steps button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:4px;background:var(--plate-2);box-shadow:inset 0 1px 0 var(--hi),0 1px 0 var(--lo);color:var(--ink-2);font-size:16px;line-height:1.4}
.xs-steps b{font:800 28px/1 var(--cond);color:var(--ink-3)}
.xs-steps button[aria-pressed="true"]{background:var(--steel);color:#141618;box-shadow:inset 0 1px 0 #fff}
.xs-steps button[aria-pressed="true"] b{color:#141618}
.xs-steps button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.xs-cap{margin-top:16px;min-height:6.4em}
.xs-cap h3{font-size:clamp(26px,3vw,36px)}
.xs-cap p{color:var(--ink-2);margin-top:4px;max-width:60ch}
@media (max-width:560px){.xs-steps button{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;font-size:14.5px}.xs-steps b{font-size:22px}}

/* ---------- additions for the live site (not in the preview) ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;background:#eef1f3;color:#111213;border-radius:4px;font-weight:700}
.skip:focus{left:12px}
a.plain{text-decoration:none}
a.plain:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.svc .links{display:flex;flex-wrap:wrap;gap:6px 24px}

/* mobile section menu (second row of the header) */
.mnav{display:flex;gap:4px;overflow-x:auto;padding:0 var(--gutter) 10px;scrollbar-width:none}
.mnav::-webkit-scrollbar{display:none}
.mnav a{flex:none;text-decoration:none;font-size:15px;line-height:1.4;padding:7px 14px;border-radius:4px;color:var(--ink-2);background:var(--plate);box-shadow:inset 0 1px 0 var(--hi)}
.mnav:empty{display:none}
@media (min-width:960px){.mnav{display:none}}
html{scroll-padding-top:120px}
@media (min-width:960px){html{scroll-padding-top:76px}}

/* band items link to their service page */
.band a{display:block;color:inherit;text-decoration:none}
.band a:focus-visible{outline-offset:-4px}

/* single after-photo (no before photo yet) */
.ba.single .before,.ba.single .bolt,.ba.single .tag,.ba.single input{display:none}

/* contact extras */
.ctitle{font-size:clamp(40px,6vw,80px)}
.clead{color:var(--ink-2);margin-top:10px;max-width:40ch}
.en{margin-top:18px;color:var(--ink-2);font-size:15px}
.field .hint{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.field.bad input[type=file]{box-shadow:0 0 0 2px #ff8f80}
.ts{min-height:65px}
.pdpa{margin-top:14px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.pdpa a{color:var(--ink)}

/* consent bar: never covers the call/LINE dock */
.consent{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:8px;background:#1c1f22;box-shadow:inset 0 1px 0 var(--hi),0 20px 40px -10px #000;font-size:15px;line-height:1.6}
.consent p{flex:1 1 260px;color:var(--ink-2)}
.consent a{color:var(--ink)}
.consent-acts{display:flex;gap:8px;flex:1 1 auto;justify-content:flex-end}
.consent .btn{min-height:44px;font-size:15.5px;flex:1 1 0;padding:0 16px}
@media (min-width:960px){.consent{left:auto;right:24px;bottom:24px;max-width:560px}}
.consent[hidden]{display:none}

/* service, work, privacy and 404 pages */
.sub-hero{padding:clamp(32px,5vw,64px) 0 clamp(48px,7vw,88px)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14.5px;color:var(--ink-3);margin-bottom:22px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.sub-grid{display:grid;gap:32px}
@media (min-width:900px){.sub-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:56px}}
.sub-hero h1{font-size:clamp(40px,6vw,84px)}
.sub-hero .lead{margin-top:16px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:46ch}
.sub-hero .fit{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sub-hero .fit span{font-size:14px;line-height:1.4;padding:5px 12px;border-radius:3px;background:var(--plate-2);box-shadow:inset 0 1px 0 var(--hi);color:var(--ink-2)}
.sub-hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sub-hero .ph{aspect-ratio:16/10;overflow:hidden;border-radius:6px;box-shadow:0 0 0 1px var(--rule),0 30px 50px -24px #000}
.sub-hero .ph img{width:100%;height:100%;object-fit:cover}
.wtitle{font-size:clamp(36px,5vw,68px);margin-bottom:12px}
.wmeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.wmeta a,.wmeta span{font-size:15px;line-height:1.4;padding:5px 12px;border-radius:3px;background:var(--plate-2);box-shadow:inset 0 1px 0 var(--hi);color:var(--ink-2);text-decoration:none}
.wmeta a:hover{color:var(--ink)}
.prose{max-width:68ch}
.prose p{margin-top:1em;color:var(--ink-2);font-size:18px}
.prose p:first-child{margin-top:0}
.prose-sec{padding-top:0}
.wdesc{margin-top:24px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:24px}
.gallery a{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.wcard{display:flex;flex-direction:column;border-radius:4px;overflow:hidden;background:var(--plate);box-shadow:0 0 0 1px var(--rule);text-decoration:none;transition:box-shadow .2s}
.wcard:hover{box-shadow:0 0 0 2px #d3d8dc}
.wcard img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.wcard .t{padding:12px 14px 2px;font-weight:700;line-height:1.5}
.wcard .m{padding:0 14px 14px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.nf{min-height:50vh}

/* ---------- audit fixes 2026-10-19 ---------- */
@media (max-width:700px){.band a:first-child{grid-column:1/-1}}
/* keyboard focus never lands behind the fixed call/LINE dock */
@media (max-width:959px){html{scroll-padding-bottom:96px}}
.pdpa,.wcard .m,.consent{line-height:1.7}
/* diagram labels stay readable on phones (wider crop, less plate padding) */
@media (max-width:640px){.xs .tx{font-size:24px}.xs .tx-s{font-size:22px}.xs-box{padding:14px 10px}}