/* ============================================================
   Metalworks theme — UI styles
   Palette: ink #16181C · orange #E2620A · amber #F2A24E
            cream #F7F5F2 · line #E4E0DA
   Fonts:   IBM Plex Sans Thai (body) · IBM Plex Mono (mono)
   ============================================================ */

:root{
  --ink:#16181C; --orange:#E2620A; --amber:#F2A24E;
  --cream:#F7F5F2; --line:#E4E0DA; --muted:#6B6A66; --white:#fff;
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--white);
  font-family:'IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

.mw-wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mw-section{padding:clamp(56px,7vw,88px) 0}
.mw-kicker{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--orange); display:flex; align-items:center; gap:10px; margin:0 0 14px}
.mw-kicker::before{content:""; width:26px; height:2px; background:var(--orange); display:inline-block}
.mw-h2{margin:0 0 8px; font-size:clamp(26px,3.2vw,38px); font-weight:700; letter-spacing:-.01em}
.mw-sub{margin:0 0 32px; color:var(--muted); max-width:640px}
.dark .mw-sub{color:#A9A8A4}

/* buttons */
.mw-btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; cursor:pointer;
  border-radius:10px; padding:13px 22px; border:1px solid transparent; transition:.18s; font-size:15px}
.mw-btn--primary{background:var(--orange); color:#fff}
.mw-btn--primary:hover{background:#c9550a}
.mw-btn--ghost{background:transparent; color:inherit; border-color:currentColor; opacity:.92}
.mw-btn--ghost:hover{opacity:1}
.mw-btn--light{background:#fff; color:var(--ink)}

/* media placeholder boxes (mirror the design's [ ... ] tiles) */
.mw-media{position:relative; overflow:hidden; border-radius:12px; background:var(--cream)}
.mw-media img{width:100%; height:100%; object-fit:cover}
.mw-media--placeholder{display:flex; align-items:center; justify-content:center;
  min-height:200px; background:repeating-linear-gradient(135deg,#EDEAE4 0 14px,#F2F0EC 14px 28px);
  color:#9A9892; font-family:'IBM Plex Mono',monospace; font-size:13px; text-align:center; padding:16px}
.dark .mw-media--placeholder{background:repeating-linear-gradient(135deg,#22252B 0 14px,#1C1F24 14px 28px); color:#6E7178}

/* ---------- Header ---------- */
.mw-topbar{background:var(--ink); color:#CFCEC9; font-size:13px}
.mw-topbar .mw-wrap{display:flex; gap:20px; align-items:center; justify-content:flex-end; min-height:38px; flex-wrap:wrap}
.mw-topbar a{color:#CFCEC9}
.mw-topbar .sep{opacity:.35}

.mw-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.mw-header .mw-wrap{display:flex; align-items:center; gap:24px; min-height:70px}
.mw-brand{display:flex; align-items:center; gap:12px; font-weight:700}
.mw-brand .mark{width:30px; height:30px; border-radius:7px; background:var(--orange);
  display:grid; place-items:center; color:#fff; font-family:'IBM Plex Mono',monospace; font-weight:700}
.mw-brand .name{font-size:18px; letter-spacing:.02em}
.mw-brand .name small{display:block; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:0}
.mw-nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.mw-nav ul,.mw-nav .mw-menu{list-style:none; margin:0; padding:0; display:flex; gap:4px; align-items:center}
.mw-nav li{list-style:none; margin:0}
.mw-nav a{padding:10px 12px; font-weight:500; font-size:15px; border-radius:8px; color:var(--ink); display:block}
.mw-nav a:hover,.mw-nav .current-menu-item>a,.mw-nav .current_page_item>a,.mw-nav a[aria-current]{color:var(--orange)}
.mw-actions{display:flex; align-items:center; gap:10px}
.mw-lang{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  border:1px solid var(--line); border-radius:8px; padding:8px 12px}
.mw-lang:hover{border-color:var(--orange); color:var(--orange)}
.mw-burger{display:none; background:none; border:1px solid var(--line); border-radius:8px;
  width:42px; height:42px; cursor:pointer; font-size:20px}

/* ---------- Hero ---------- */
.mw-hero{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.mw-hero .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding:clamp(56px,7vw,96px) 0}
.mw-hero h1{margin:0 0 20px; font-size:clamp(32px,4.6vw,54px); line-height:1.08; font-weight:700;
  letter-spacing:-.01em; text-wrap:balance}
.mw-hero p{color:#B9B8B4; font-size:18px; max-width:520px; margin:0 0 28px}
.mw-hero .cta-row{display:flex; gap:14px; flex-wrap:wrap}
.mw-hero .heroimg{aspect-ratio:4/3; border-radius:16px; border:1px solid #2A2D33}
.mw-hero .badge{position:absolute; right:24px; bottom:24px; background:var(--orange); color:#fff;
  border-radius:14px; padding:14px 18px; font-weight:700}
.mw-hero .badge b{font-size:28px; display:block; line-height:1}
.mw-hero .badge span{font-size:12px; font-weight:500; opacity:.9}

/* stat strip */
.mw-stats{background:var(--orange); color:#fff}
.mw-stats .row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:26px 0}
.mw-stats .num{font-size:clamp(26px,3vw,34px); font-weight:700; font-family:'IBM Plex Mono',monospace}
.mw-stats .lbl{font-size:13px; opacity:.92}

/* generic card grids */
.mw-grid{display:grid; gap:22px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

.mw-card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:.18s; display:flex; flex-direction:column}
.mw-card:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(22,24,28,.08); border-color:#d8d3ca}
.mw-card .body{padding:18px 18px 20px}
.mw-card .tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--orange); background:#FCEFE4; border-radius:999px; padding:3px 10px; margin-bottom:10px}
.mw-card h3{margin:0 0 6px; font-size:17px; font-weight:600; line-height:1.35}
.mw-card .meta{color:var(--muted); font-size:13px; font-family:'IBM Plex Mono',monospace}
.mw-card .code{color:var(--muted); font-size:12px; font-family:'IBM Plex Mono',monospace}

/* dark sections */
.dark{background:var(--ink); color:#fff}
.dark .mw-card{background:#1C1F24; border-color:#2A2D33}
.dark .mw-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.4)}
.dark .mw-h2{color:#fff}

/* category list */
.mw-cats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.mw-cats a{display:flex; align-items:center; gap:14px; padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.mw-cats a:hover{background:var(--cream)}
.mw-cats .no{font-family:'IBM Plex Mono',monospace; color:var(--orange); font-weight:700}
.mw-cats .arrow{margin-left:auto; color:var(--muted)}

/* capability / why list */
.mw-caps{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.mw-cap{padding:24px; border:1px solid #2A2D33; border-radius:14px; background:#1C1F24}
.mw-cap h3{margin:0 0 8px; font-size:18px; color:var(--amber)}
.mw-cap p{margin:0; color:#B9B8B4}

/* services */
.mw-serv{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.mw-serv .it{border:1px solid var(--line); border-radius:14px; padding:26px; background:#fff}
.mw-serv .no{font-family:'IBM Plex Mono',monospace; color:var(--orange); font-weight:700; font-size:14px}
.mw-serv h3{margin:10px 0 8px; font-size:19px}
.mw-serv p{margin:0; color:var(--muted)}

/* CTA band */
.mw-band{background:var(--orange); color:#fff}
.mw-band .mw-wrap{display:flex; align-items:center; gap:24px; justify-content:space-between; flex-wrap:wrap; padding:clamp(40px,5vw,64px) 24px}
.mw-band h2{margin:0 0 6px; font-size:clamp(22px,2.6vw,30px); max-width:620px}
.mw-band p{margin:0; opacity:.92}

/* breadcrumb */
.mw-crumb{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted); margin:0 0 18px}
.mw-crumb a:hover{color:var(--orange)}

/* product / project detail */
.mw-detail{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.mw-gallery .main{aspect-ratio:4/3; margin-bottom:12px}
.mw-gallery .thumbs{display:flex; gap:10px; flex-wrap:wrap}
.mw-gallery .thumbs .mw-media{width:84px; height:64px; cursor:pointer; border:1px solid var(--line)}
.mw-specs{width:100%; border-collapse:collapse; margin:18px 0}
.mw-specs th,.mw-specs td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); font-size:14px}
.mw-specs th{width:40%; color:var(--muted); font-weight:500; font-family:'IBM Plex Mono',monospace}

/* filters */
.mw-filters{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 28px}
.mw-filters a{font-size:14px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; color:var(--ink)}
.mw-filters a:hover,.mw-filters a.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}

/* contact */
.mw-contact{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start}
.mw-form{display:grid; gap:16px}
.mw-form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.mw-field label{display:block; font-size:13px; font-weight:600; margin:0 0 6px}
.mw-field input,.mw-field textarea{width:100%; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; font:inherit; background:#fff}
.mw-field input:focus,.mw-field textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(226,98,10,.12)}
.mw-field textarea{min-height:130px; resize:vertical}
.mw-info .item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.mw-info .item .ic{color:var(--orange); font-size:18px}
.mw-alert{padding:14px 16px; border-radius:10px; font-size:14px; margin:0 0 18px}
.mw-alert--ok{background:#E9F6EC; color:#1E6B36; border:1px solid #BFE3C7}
.mw-alert--err{background:#FCEAEA; color:#9A2B2B; border:1px solid #F0C4C4}
.mw-sent{text-align:center; padding:48px 24px; border:1px solid var(--line); border-radius:16px; background:var(--cream)}
.mw-sent .tick{width:56px; height:56px; border-radius:50%; background:#1E6B36; color:#fff; display:grid; place-items:center; margin:0 auto 16px; font-size:26px}

/* article cards: source link badge */
.mw-ext{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted)}

/* ---------- Footer ---------- */
.mw-footer{background:var(--ink); color:#B9B8B4}
.mw-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1.2fr; gap:32px; padding:clamp(48px,6vw,72px) 0 40px}
.mw-footer h4{color:#fff; font-size:15px; margin:0 0 14px}
.mw-footer a:hover{color:#fff}
.mw-footer .brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; margin-bottom:14px}
.mw-footer .mark{width:28px; height:28px; border-radius:7px; background:var(--orange); display:grid; place-items:center; font-family:'IBM Plex Mono',monospace}
.mw-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px}
.mw-footer .certs{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.mw-footer .certs span{font-family:'IBM Plex Mono',monospace; font-size:11px; border:1px solid #2A2D33; border-radius:6px; padding:4px 8px}
.mw-footer .bottom{border-top:1px solid #2A2D33; padding:18px 0; display:flex; justify-content:space-between; gap:14px; font-size:13px; flex-wrap:wrap}
.mw-admin-card{background:#1C1F24; border:1px solid #2A2D33; border-radius:12px; padding:16px}
.mw-admin-card a{color:var(--amber); font-family:'IBM Plex Mono',monospace}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .cols-4{grid-template-columns:repeat(3,1fr)}
  .mw-serv,.mw-cats{grid-template-columns:repeat(2,1fr)}
  .mw-footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .mw-nav{position:fixed; inset:70px 0 auto 0; flex-direction:column; background:#fff;
    border-bottom:1px solid var(--line); padding:14px 24px; gap:2px; display:none; box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .mw-nav.is-open{display:flex}
  .mw-nav ul,.mw-nav .mw-menu{flex-direction:column; align-items:stretch; width:100%; gap:2px}
  .mw-burger{display:block}
  .mw-hero .grid{grid-template-columns:1fr; gap:28px}
  .mw-detail,.mw-contact{grid-template-columns:1fr}
  .mw-stats .row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .mw-caps,.mw-serv,.mw-cats{grid-template-columns:1fr}
  .mw-form .row{grid-template-columns:1fr}
  .mw-footer .cols{grid-template-columns:1fr}
}