/* ============================================================
   E.B. Tech — Ghost theme
   Converted from the E.B. Tech marketing design.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root,
[data-theme="light"] {
  --bg:#ffffff; --surface:#f4f7fb; --surface2:#e9f0f8; --card:#ffffff;
  --text:#132131; --muted:#5c6c7e; --border:#dbe4ef;
  --primary:#1B6FC4; --primary-d:#0f4f95; --primary-soft:#e8f1fb;
  --header:rgba(255,255,255,0.82); --shadow:0 18px 40px -24px rgba(18,45,78,0.35);
  --hero1:#0f2e52; --hero2:#1B6FC4; --onhero:#eaf2fc;
}
[data-theme="dark"] {
  --bg:#0b131d; --surface:#101b27; --surface2:#152431; --card:#111e2b;
  --text:#e9f1f9; --muted:#93a6ba; --border:#213445;
  --primary:#3a91e6; --primary-d:#1B6FC4; --primary-soft:#122740;
  --header:rgba(11,19,29,0.78); --shadow:0 20px 46px -22px rgba(0,0,0,0.65);
  --hero1:#081420; --hero2:#0f3f74; --onhero:#e7f0fa;
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--gh-font-body, 'IBM Plex Sans Thai', sans-serif);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:clip;
}
img { max-width:100%; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5 { font-family:var(--gh-font-heading, 'IBM Plex Sans Thai', sans-serif); }

.wrap { max-width:1240px; margin:0 auto; padding-left:24px; padding-right:24px; }
.kicker { color:var(--primary); font-weight:700; letter-spacing:2px; font-size:13px; text-transform:uppercase; }
.muted { color:var(--muted); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 26px; border-radius:11px; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:16px; transition:.18s; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 8px 18px -10px var(--primary); }
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-light { background:#fff; color:var(--primary-d); }
.btn-outline { background:transparent; border:1px solid var(--primary); color:var(--primary); }
.btn-ghost { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn-sm { height:46px; padding:0 22px; font-size:14.5px; }

/* ---------- Utility bar ---------- */
.utilbar { background:var(--hero1); color:#cfe0f2; }
.utilbar .wrap { padding-top:8px; padding-bottom:8px; display:flex; align-items:center; gap:22px; font-size:13px; flex-wrap:wrap; }
.utilbar .item { display:inline-flex; align-items:center; gap:7px; }
.utilbar .spacer { margin-left:auto; opacity:.85; }

/* ---------- Header ---------- */
.appbar { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:var(--header); border-bottom:1px solid var(--border); transition:box-shadow .3s; }
.appbar.scrolled { box-shadow:0 10px 30px -18px rgba(15,45,80,.5); }
.appbar .bar { display:flex; align-items:center; gap:22px; padding-top:14px; padding-bottom:14px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { width:48px; height:48px; border-radius:11px; background:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:0 8px 18px -10px rgba(15,45,80,.4); flex-shrink:0; padding:3px; border:1px solid var(--border); }
.brand .logo img { width:100%; height:100%; object-fit:contain; display:block; }
.brand .name { font-weight:700; font-size:20px; letter-spacing:.5px; line-height:1.05; }
.brand .sub { font-size:10.5px; letter-spacing:2.4px; color:var(--muted); font-weight:600; text-transform:uppercase; }
.nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav a { padding:9px 15px; border-radius:9px; font-weight:600; font-size:14.5px; color:var(--text); transition:.18s; position:relative; }
.nav a:hover { background:var(--primary-soft); }
.nav a.active { color:var(--primary); background:var(--primary-soft); }
.hdr-actions { display:flex; align-items:center; gap:8px; }
.iconbtn { width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--card);
  color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; }
.burger { display:none; }
.mobile-nav { display:none; border-top:1px solid var(--border); padding:10px 24px 18px; flex-direction:column; gap:4px; }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:12px 14px; border-radius:9px; font-weight:600; color:var(--text); }
.mobile-nav a:hover { background:var(--primary-soft); }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background:var(--hero1); }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay { position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(8,18,32,.94) 0%,rgba(8,18,32,.82) 34%,rgba(8,18,32,.5) 62%,rgba(8,18,32,.2) 100%); }
.hero-inner { position:relative; padding-top:96px; padding-bottom:104px;
  /* only one child lives here; the empty second column is breathing room so the
     headline does not run across the whole photo. 1000px is what the typed
     three-line headline needs at the largest font step. */
  display:grid; grid-template-columns:minmax(0,1000px) 1fr; gap:56px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:100px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:var(--onhero);
  font-size:13px; font-weight:600; letter-spacing:.4px; }
/* The hero_title setting carries typed line breaks. Honour them only where the
   line actually fits: on a narrow phone the longest line needs ~554px in a
   342px column, so forcing the break there would leave stray fragments on
   their own lines. Below 700px the text just wraps naturally. */
.hero h1 { white-space:normal; font-weight:700; font-size:clamp(34px,4.6vw,58px); line-height:1.08; color:#fff;
  margin:22px 0 0; letter-spacing:-.5px; text-shadow:0 2px 20px rgba(0,0,0,.35); }
@media (min-width:700px){ .hero h1 { white-space:pre-line; } }
.hero p.lead { color:var(--onhero); font-size:18px; max-width:520px; margin:20px 0 0; opacity:.94; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-cta .btn { height:52px; }

/* stat strip */
.statstrip { position:relative; background:rgba(0,0,0,.16); border-top:1px solid rgba(255,255,255,.14); }
.statstrip .grid { padding-top:26px; padding-bottom:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.statstrip .val { font-weight:700; font-size:34px; color:#fff; line-height:1; }
.statstrip .lbl { color:var(--onhero); font-size:13.5px; opacity:.82; margin-top:5px; }

/* ---------- Section helpers ---------- */
.section { padding-top:88px; padding-bottom:88px; }
.section-head { text-align:center; max-width:640px; margin:0 auto 50px; }
.section-head h2 { font-weight:700; font-size:clamp(28px,3.4vw,42px); margin:10px 0 12px; letter-spacing:-.5px; }
.section-head p { color:var(--muted); font-size:17px; margin:0; }
/* เผื่อความกว้างให้หัวข้อยาวอยู่บรรทัดเดียวบนจอกว้าง ส่วนจอแคบยังตัดบรรทัดตามปกติ */
.section-head.is-roomy { max-width:900px; }
.bg-surface { background:var(--surface); }

/* ---------- Clients marquee ---------- */
.clients { border-bottom:1px solid var(--border); background:var(--bg); }
.clients .wrap { padding-top:30px; padding-bottom:30px; }
.clients .label { text-align:center; color:var(--muted); font-size:12.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:18px; }
.marquee-mask { overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee { display:flex; gap:56px; width:max-content; animation:ebmarquee 26s linear infinite; }
.marquee span { font-weight:700; font-size:19px; color:var(--muted); white-space:nowrap; opacity:.65; }

/* ---------- Cards grid ---------- */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

.card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden; }
.card-lift { transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; }
.card-lift:hover { transform:translateY(-6px); border-color:var(--primary); box-shadow:0 26px 50px -28px rgba(27,111,196,.55); }

.svc-card { cursor:pointer; padding:30px 26px; }
.svc-card .bignum { position:absolute; top:-16px; right:16px; font-weight:700; font-size:74px; color:var(--primary-soft); line-height:1; }
.icon-wrap { width:56px; height:56px; border-radius:15px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s; }
.card-lift:hover .icon-wrap { transform:scale(1.08) rotate(-4deg); }
.svc-card h3 { font-weight:700; font-size:20px; margin:18px 0 8px; }
.svc-card p { color:var(--muted); font-size:14.5px; margin:0 0 16px; }
.svc-card .more { color:var(--primary); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.svc-thumb { aspect-ratio:16/10; width:100%; object-fit:cover; }

/* why choose us */
.why { display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.why h2 { font-weight:700; font-size:clamp(28px,3.2vw,40px); margin:10px 0 14px; letter-spacing:-.5px; }
.feat { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 22px; }
.feat .icon-wrap { width:46px; height:46px; border-radius:12px; margin-bottom:14px; }
.feat h4 { font-weight:700; font-size:17px; margin:0 0 7px; }
.feat p { color:var(--muted); font-size:14px; margin:0; }

/* process */
.proc { position:relative; padding-top:14px; }
.proc .dot { position:relative; width:54px; height:54px; border-radius:15px; background:var(--card);
  border:1.5px solid var(--primary); color:var(--primary); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); }
.proc .connector { position:absolute; top:41px; left:56px; right:-22px; height:2px;
  background:repeating-linear-gradient(90deg,var(--border) 0 6px,transparent 6px 12px); }
.proc .no { position:absolute; top:-9px; right:-9px; font-weight:700; font-size:11px; color:#fff; background:var(--primary);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.proc h4 { font-weight:700; font-size:18px; margin:18px 0 8px; }
.proc p { color:var(--muted); font-size:14px; margin:0; }

/* gallery */
.gal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gal-item { aspect-ratio:4/3; border-radius:14px; overflow:hidden; position:relative;
  border:1px solid var(--border); background:var(--surface2); display:flex; align-items:flex-end; padding:16px; }
.gal-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gal-item .tag { position:relative; z-index:1; font-size:12px; color:#fff; background:rgba(8,18,32,.75);
  padding:5px 10px; border-radius:6px; }

/* trust band */
.trust { position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--hero1) 0%,#0c243f 55%,var(--hero1) 100%); }
.trust::before { content:''; position:absolute; inset:0; opacity:.1;
  background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 22px); }
.trust::after { content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent); }
.trust .wrap { position:relative; padding-top:64px; padding-bottom:64px; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.trust-item { position:relative; padding:8px 26px; border-left:1px solid rgba(255,255,255,.13); transition:background .3s; }
.trust-item:hover { background:rgba(127,180,234,.06); }
.trust-item .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.trust-item .ic { width:56px; height:56px; border-radius:15px; background:rgba(127,180,234,.14);
  border:1px solid rgba(127,180,234,.3); color:#8fc0f2; display:flex; align-items:center; justify-content:center;
  transition:transform .3s; }
.trust-item:hover .ic { transform:translateY(-3px); }
.trust-item .n { font-weight:700; font-size:30px; color:rgba(255,255,255,.14); line-height:1; }
.trust-item .bar { width:26px; height:3px; background:var(--primary); border-radius:2px; margin-bottom:14px; transition:width .35s cubic-bezier(.2,.7,.3,1); }
.trust-item:hover .bar { width:56px; }
.trust-item h3 { font-weight:700; font-size:18px; color:#fff; margin:0 0 8px; }
.trust-item p { color:#a9c2da; font-size:13.5px; line-height:1.55; margin:0; }

/* CTA */
.cta-box { border-radius:22px; background:linear-gradient(120deg,var(--hero1),var(--hero2));
  padding:56px 48px; position:relative; overflow:hidden; text-align:center; }
.cta-box::before { content:''; position:absolute; inset:0; opacity:.14;
  background-image:repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 24px); }
.cta-box > * { position:relative; }
.cta-box h2 { font-weight:700; font-size:clamp(26px,3vw,38px); color:#fff; margin:0 0 12px; }
.cta-box p { color:var(--onhero); font-size:17px; margin:0 auto 26px; max-width:560px; }

/* ---------- Page head ---------- */
.pagehead { background:var(--surface); border-bottom:1px solid var(--border); }
.pagehead .wrap { padding-top:64px; padding-bottom:56px; }
.pagehead h1 { font-weight:700; font-size:clamp(32px,4vw,50px); margin:10px 0 12px; letter-spacing:-.5px; }
.pagehead p { color:var(--muted); font-size:17px; max-width:620px; margin:0; }

/* ---------- Services page rows ---------- */
.svc-row { display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:18px; padding:32px; box-shadow:var(--shadow); }
.svc-row .media { aspect-ratio:16/10; border-radius:13px; overflow:hidden; position:relative;
  border:1px solid var(--border); background:var(--surface2); display:flex; align-items:center; justify-content:center; }
.svc-row .media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc-row .media .no { position:absolute; top:14px; left:14px; font-weight:700; font-size:15px; color:#fff;
  background:var(--primary); width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; z-index:1; }
.svc-row h3 { font-weight:700; font-size:24px; margin:0 0 10px; }
.svc-row p { color:var(--muted); font-size:15.5px; margin:0 0 16px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:6px 13px; border-radius:100px; background:var(--primary-soft); color:var(--primary); font-size:13px; font-weight:600; }

/* ---------- Products ---------- */
.prod-card .media { aspect-ratio:4/3; background:var(--surface2); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); overflow:hidden; }
.prod-card .media img { width:100%; height:100%; object-fit:cover; }
.prod-card .body { padding:22px 22px 24px; }
.prod-card .cat { color:var(--primary); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.prod-card h3 { font-weight:700; font-size:19px; margin:7px 0 6px; }
.prod-card p { color:var(--muted); font-size:14px; margin:0; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; }
.contact-row { display:flex; gap:15px; align-items:flex-start; }
.contact-row .ic { width:44px; height:44px; border-radius:11px; background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row .lbl { font-size:12.5px; color:var(--muted); font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.contact-row .val { font-weight:600; font-size:15.5px; margin-top:3px; }
.map { margin-top:26px; border-radius:14px; overflow:hidden; border:1px solid var(--border); height:260px; }
.map iframe { border:0; width:100%; height:100%; }
.form-box { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:34px; box-shadow:var(--shadow); }
.form-box label { display:flex; flex-direction:column; gap:7px; font-size:13.5px; font-weight:600; }
.form-box input, .form-box textarea { padding:0 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:15px; }
.form-box input { height:46px; }
.form-box textarea { padding:12px 14px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-stack { display:flex; flex-direction:column; gap:16px; }

/* ---------- Post / prose ---------- */
.prose { max-width:720px; margin:0 auto; }
.prose img { border-radius:12px; }
.prose h2 { font-size:28px; margin:1.6em 0 .5em; }
.prose h3 { font-size:22px; margin:1.4em 0 .5em; }
.prose p, .prose li { font-size:17px; color:var(--text); }
/* Excludes .btn: `.prose a` (0,1,1) outweighs `.btn-primary` (0,1,0), which
   painted button text the same blue as the button background. */
.prose a:not(.btn) { color:var(--primary); text-decoration:underline; }
.post-hero { max-width:900px; margin:0 auto 32px; border-radius:16px; overflow:hidden; }
.post-hero img { display:block; width:100%; height:auto; }
.post-meta { color:var(--muted); font-size:14px; }

/* blog cards */
.post-card { display:flex; flex-direction:column; }
.post-card .media { aspect-ratio:16/9; overflow:hidden; border-radius:14px 14px 0 0; background:var(--surface2); }
.post-card .media img { width:100%; height:100%; object-fit:cover; }
.post-card .body { padding:20px 22px 24px; }
.post-card h3 { font-weight:700; font-size:19px; margin:8px 0 8px; }
.post-card p { color:var(--muted); font-size:14px; margin:0; }

/* ---------- Footer ---------- */
.footer { background:var(--hero1); color:#dfeaf6; margin-top:20px; }
.footer .grid { padding-top:60px; padding-bottom:28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer .brand .name { color:#fff; }
.footer h5 { font-weight:700; font-size:15px; color:#fff; margin:0 0 14px; }
.footer .col { display:flex; flex-direction:column; gap:9px; }
.footer .col a, .footer .col span { font-size:14px; opacity:.8; color:#dfeaf6; }
.footer .about { font-size:14px; opacity:.75; margin:0 0 6px; max-width:280px; }
.footer .bottom { border-top:1px solid rgba(255,255,255,.14); }
.footer .bottom .wrap { padding-top:20px; padding-bottom:20px; font-size:13px; opacity:.6; }

/* ---------- Animations ---------- */
@keyframes ebrise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes ebmarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ebfade { animation:ebrise .55s cubic-bezier(.2,.7,.3,1) both; }
[data-reveal] { opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .marquee{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Horizontal slider (services / portfolio / products) ---------- */
.slider { position:relative; --slider-gap:22px; }
.slider.is-gallery { --slider-gap:16px; }
.slider-track {
  display:flex; gap:var(--slider-gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  /* negative margin + padding leaves room for the card hover lift/shadow */
  padding:6px; margin:-6px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.slider-track::-webkit-scrollbar { display:none; }
.slider-item { flex:0 0 calc((100% - var(--slider-gap) * 2) / 3); scroll-snap-align:start; }
.slider-btn {
  position:absolute; top:calc(50% - 20px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; padding:0;
  background:var(--card); border:1px solid var(--border); color:var(--primary);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  box-shadow:0 12px 26px -16px rgba(0,0,0,.55);
  transition:opacity .2s, border-color .2s, transform .2s;
}
.slider-btn:hover { border-color:var(--primary); }
.slider-btn.prev { left:-20px; }
.slider-btn.next { right:-20px; }
.slider-btn.prev svg { transform:scaleX(-1); }
.slider-btn[disabled] { opacity:0; pointer-events:none; }
.slider-dots { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.slider-dots button {
  width:8px; height:8px; padding:0; border:0; border-radius:99px; cursor:pointer;
  background:var(--border); transition:width .25s, background .25s;
}
.slider-dots button[aria-current="true"] { width:24px; background:var(--primary); }
.slider.is-static .slider-btn, .slider.is-static .slider-dots { display:none; }
.slider .gal-item { aspect-ratio:4/3; }

/* ---------- Detail pages (service / product / portfolio) ---------- */
.detail { max-width:820px; margin:0 auto; }
.detail-wide { max-width:1060px; margin:0 auto; }
.detail .prose, .detail-split .prose { max-width:none; }
.detail .post-hero { max-width:none; margin:0 0 34px; border-radius:18px; }
.pagehead .meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 13px;
  color:var(--muted); font-size:14px; margin-top:4px;
}
.pagehead .meta .dot { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.55; }
.detail-foot {
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:40px; padding-top:26px; border-top:1px solid var(--border);
}
.detail-foot:empty, .detail-foot .chips:empty { }

/* product: shot beside the details */
.detail-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.detail-split .shot {
  margin:0; border-radius:18px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface2);
}
.detail-split .shot img { display:block; width:100%; height:auto; }
.detail-split .shot.is-empty { aspect-ratio:4/3; }

/* ---------- Image lightbox ---------- */
[data-zoom] img, .prose img { cursor:zoom-in; }
.lightbox {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,14,25,.93); opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox img { max-width:92vw; max-height:86vh; border-radius:10px; box-shadow:0 34px 90px -34px #000; }
.lightbox button {
  position:absolute; width:46px; height:46px; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.13); color:#fff;
  font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s;
}
.lightbox button:hover { background:rgba(255,255,255,.26); }
.lightbox .lb-close { top:20px; right:20px; font-size:22px; }
.lightbox .lb-prev { left:18px; top:50%; margin-top:-23px; }
.lightbox .lb-next { right:18px; top:50%; margin-top:-23px; }
.lightbox .lb-count {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#cfe0f2; font-size:14px; letter-spacing:.5px;
}
body.lb-open { overflow:hidden; }

/* ---------- Long-word overflow guard ----------
   A pasted URL or a part number with no spaces is one unbreakable word. Grid
   and flex children default to min-width:auto, so that word widens its track
   and drags the whole card past its own rounded edge - most visible on phones,
   where these grids collapse to a single column and the image stretches with
   the track. Let the text wrap, and let the tracks shrink. */
body { overflow-wrap:break-word; }
.svc-row > *, .detail-split > *, .why > *, .contact-grid > *, .trust-grid > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *, .form-row > *, .footer .grid > *,
.slider-item, .prod-card .body, .svc-card > *, .pagehead .wrap { min-width:0; }
/* the media box must never be wider than the card that holds it */
.svc-row .media, .prod-card .media, .detail-split .shot, .post-hero { max-width:100%; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:32px;padding-top:64px;padding-bottom:72px}
  .statstrip .grid{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-4,.gal-grid{grid-template-columns:1fr 1fr}
  .detail-split{grid-template-columns:1fr;gap:30px}
  .slider-item{flex-basis:calc((100% - var(--slider-gap)) / 2)}
  .slider-btn.prev{left:-8px}
  .slider-btn.next{right:-8px}
  .why{grid-template-columns:1fr;gap:32px}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item{border-left:none;border-top:1px solid rgba(255,255,255,.13);padding:22px 0}
  .svc-row{grid-template-columns:1fr;gap:22px}
  .contact-grid{grid-template-columns:1fr}
  .footer .grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .burger{display:flex}
  .appbar .bar{gap:12px}
  .brand{min-width:0}
  .brand .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand .sub{display:none}
  .hdr-actions{gap:6px}
}
@media (max-width:560px){
  .grid-3,.grid-4,.gal-grid,.grid-2,.trust-grid,.form-row,.footer .grid{grid-template-columns:1fr}
  .lightbox button{width:40px;height:40px}
  .lightbox .lb-prev{left:8px}
  .lightbox .lb-next{right:8px}
  .slider-item{flex-basis:100%}
  .slider-btn{display:none}
  .utilbar .spacer{display:none}
  .cta-box{padding:40px 24px}
  /* keep stats 2-up so the strip isn't overly tall on phones */
  .statstrip .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  /* header quote button moves into the burger menu on small phones */
  .hdr-actions .btn-primary{display:none}
  .langbtn{padding:0 9px}
  .brand .logo{width:42px;height:42px}
  .brand .name{font-size:17px}
  .utilbar .wrap{gap:14px;font-size:12px}
}

/* ---------- Language toggle (client-side i18n) ---------- */
/* default = Thai: hide EN copies until data-lang="en" */
[data-i18n-en] { display:none; }
[data-lang="en"] [data-i18n-en] { display:inline; }
[data-lang="en"] [data-i18n-th] { display:none; }
.langbtn {
  height:38px; padding:0 12px; border-radius:9px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-family:inherit; font-weight:700;
  font-size:13px; letter-spacing:.5px; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.langbtn .sep { color:var(--muted); }
[data-lang="en"] .langbtn .lang-th { opacity:.4; }
[data-lang="th"] .langbtn .lang-en, :root:not([data-lang="en"]) .langbtn .lang-en { opacity:.4; }

/* ---------- Koenig editor content ---------- */
.prose .kg-card { margin-top:1.5em; margin-bottom:1.5em; }
.prose figure { margin-top:1.5em; margin-bottom:1.5em; }
.prose figcaption { text-align:center; color:var(--muted); font-size:13.5px; margin-top:8px; }
.prose .kg-image { display:block; margin-left:auto; margin-right:auto; }
.prose .kg-width-wide {
  position:relative; width:75vw; min-width:100%; margin-left:50%; margin-right:0; transform:translateX(-50%);
}
.prose .kg-width-wide img { width:100%; }
.prose .kg-width-full {
  position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; transform:none;
}
.prose .kg-width-full img { width:100%; }
.kg-gallery-container { display:flex; flex-direction:column; gap:10px; }
.kg-gallery-row { display:flex; gap:10px; }
.kg-gallery-image img { width:100%; height:100%; object-fit:cover; }
.prose blockquote { margin:1.5em 0; padding:6px 20px; border-left:3px solid var(--primary); color:var(--muted); font-style:italic; }
.prose pre { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:16px; overflow-x:auto; }
.prose code { background:var(--surface2); padding:2px 6px; border-radius:5px; font-size:.9em; }
.prose pre code { background:none; padding:0; }
.kg-embed-card { display:flex; flex-direction:column; align-items:center; }
.kg-embed-card iframe { max-width:100%; }