/* ============================================================
   OWAT MAID — HOMEPAGE
   Global Design Rules v2.0 — px only, no rem/em/clamp/fluid type
   Palette: primary #F44E1E · ink #17171F · body #3A3A3C
            bg #F6F5F1 · alt #F9F8F6 · white #FFFFFF
   Fonts: Noto Sans Thai (ทั้งเว็บ)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --primary:#F44E1E;
  --primary-dark:#D53F14;
  --ink:#17171F;
  --body:#3A3A3C;
  --muted:#6E6E70;
  --bg:#F6F5F1;
  --alt:#F9F8F6;
  --white:#FFFFFF;
  --line:#E3E1DC;

  /* ขอบมน — กลาง ๆ ทั้งงาน */
  --r-sm:8px;   /* ปุ่ม, input, ชิปเล็ก */
  --r-md:12px;  /* การ์ด, รูปภาพ, พาเนล */
  --r-lg:16px;  /* บล็อกภาพใหญ่ */

  /* easing โค้งสำหรับแอนิเมชัน UI */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

html{scroll-behavior:smooth}

body{
  font-family:'Noto Sans Thai', sans-serif;
  font-size:17px;
  line-height:32px;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

button,input,select,textarea{font-family:'Noto Sans Thai', sans-serif}

h1,h2,h3,h4,h5{font-family:'Noto Sans Thai', sans-serif;color:var(--ink);font-weight:700;letter-spacing:-0.5px}
h1{font-size:64px;line-height:76px}
h2{font-size:44px;line-height:56px}
h3{font-size:30px;line-height:42px}
h4{font-size:24px;line-height:36px}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}

.container{max-width:1500px;margin:0 auto;padding-left:48px;padding-right:48px}
.section{padding-top:64px;padding-bottom:64px}
.section--tight{padding-top:48px;padding-bottom:48px}
/* section ที่เป็นรายการให้กวาดสายตา — แน่นกว่า section ที่เป็นเนื้อความให้อ่าน */
.section--scan{padding-top:48px;padding-bottom:48px}
.bg-cream{background:var(--bg)}
.bg-alt{background:var(--alt)}
.bg-white{background:var(--white)}

/* หัวข้อ section : จัดกลางเป็นค่าเริ่มต้น */
.section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.section-head h2{margin-bottom:16px}
.section-head p{font-size:18px;line-height:34px;color:var(--muted)}
/* แบบชิดซ้าย ใช้กับ section ที่มีของอย่างอื่นอยู่ข้าง ๆ */
.section-head--flush{margin-left:0;margin-right:0;margin-bottom:0;text-align:left;max-width:640px}
/* หัวข้อซ้าย + ของอย่างอื่นขวา แถวเดียวกัน */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  flex-wrap:wrap;margin-bottom:48px}
.head-row .branch-tabs{margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Noto Sans Thai', sans-serif;font-size:16px;font-weight:600;line-height:24px;
  padding:16px 32px;border-radius:var(--r-sm);border:2px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform 140ms var(--ease-out);
  cursor:pointer;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--primary);color:var(--white);border-color:var(--primary)}
.btn--primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
.btn--light{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--light:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn__arrow{font-size:18px;line-height:24px}

/* ---------- Header ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:101;background:rgba(12,12,18,.55);color:#CFCFD4;font-size:14px;line-height:22px;height:40px;display:flex;align-items:center}
.topbar .container{width:100%}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:8px;padding-bottom:8px}
.topbar__item{display:inline-flex;align-items:center;gap:8px}
.topbar__group{display:flex;gap:32px;align-items:center}
.topbar a:hover{color:var(--white)}

.header{
  position:fixed;top:40px;left:0;right:0;z-index:100;
  background:transparent;border-bottom:1px solid rgba(255,255,255,.16);
  transition:background-color .25s ease,border-color .25s ease,top .25s ease;
}
.header.is-solid{position:fixed;top:0;background:var(--white);border-bottom-color:var(--line);box-shadow:0 2px 16px rgba(23,23,31,.06)}
.header .brand img{filter:brightness(0) invert(1);transition:filter .25s ease}
.header.is-solid .brand img{filter:none}
.header .nav__link{color:var(--white)}
.header.is-solid .nav__link{color:var(--ink)}
.header .nav__link:hover,.header.is-solid .nav__link:hover{color:var(--primary)}
.header .nav__caret{color:rgba(255,255,255,.7)}
.header.is-solid .nav__caret{color:var(--muted)}
.header .lang{color:rgba(255,255,255,.72)}
.header .lang .is-active{color:var(--white)}
.header.is-solid .lang{color:var(--muted)}
.header.is-solid .lang .is-active{color:var(--ink)}
.header .burger{background:transparent;border-color:rgba(255,255,255,.4)}
.header .burger span{background:var(--white)}
.header.is-solid .burger{background:var(--white);border-color:var(--line)}
.header.is-solid .burger span{background:var(--ink)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:32px;height:88px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
.nav__link{
  font-family:'Noto Sans Thai', sans-serif;font-size:16px;font-weight:500;line-height:24px;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;padding:8px 0;position:relative;white-space:nowrap;
  transition:color .2s ease;
}
.nav__link:hover{color:var(--primary)}
.nav__item{position:relative}
.nav__caret{font-size:10px;line-height:10px;color:var(--muted)}
.dropdown{
  position:absolute;top:100%;left:-16px;min-width:248px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(8px);transform-origin:top left;
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 160ms;
  box-shadow:0 16px 32px rgba(23,23,31,.08);
}
.nav__item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 24px;font-size:16px;line-height:26px;color:var(--body)}
.dropdown a:hover{background:var(--bg);color:var(--primary)}
.header__right{display:flex;align-items:center;gap:24px;flex:none}
.lang{font-size:14px;font-weight:600;line-height:22px;color:var(--muted);white-space:nowrap}
.lang .is-active{color:var(--ink)}
.header .btn{padding:12px 24px;white-space:nowrap}
.lang a:hover{color:var(--primary)}

/* Narrow desktop — tighten the nav before it collapses */
@media (max-width:1400px){
  .header .container{gap:20px}
  .nav{gap:18px}
  .nav__link{font-size:15px}
  .header__right{gap:16px}
  .header .btn{padding:12px 18px;font-size:15px}
}
.burger{display:none;width:48px;height:48px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform 220ms var(--ease-out),opacity 220ms var(--ease-out)}
.burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-active span:nth-child(2){opacity:0}
.burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero (full screen banner) ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  background-color:#17171F;background-position:center right;background-size:cover;background-repeat:no-repeat;
  overflow:hidden;
}
/* one overlay only — Global Design Rules 3.5 */
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,12,18,.88) 0%,rgba(12,12,18,.72) 42%,rgba(12,12,18,.15) 78%,rgba(12,12,18,0) 100%);
}
.hero .container{position:relative;z-index:2;width:100%}
.hero__inner{max-width:760px;padding-top:176px;padding-bottom:120px}
.hero h1{color:var(--white);margin-bottom:16px}
.hero__sub{font-family:'Noto Sans Thai', sans-serif;font-size:26px;font-weight:500;line-height:42px;color:#EDEBE7;margin-bottom:24px}
.hero__lead{font-size:18px;line-height:34px;color:#C9C6C1;margin-bottom:32px;max-width:640px}
.hero__quote{
  font-family:'Noto Sans Thai', sans-serif;font-size:22px;font-weight:600;line-height:34px;color:var(--primary);
  border-left:3px solid var(--primary);padding-left:16px;margin-bottom:40px;
}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap}
.hero .btn--ghost{color:var(--white);border-color:var(--white)}
.hero .btn--ghost:hover{background:var(--white);color:var(--ink)}

.hero__facts{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero__facts .container{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:24px;padding-bottom:24px}
.hero__fact{display:flex;align-items:baseline;gap:8px;color:#EDEBE7;font-size:15px;line-height:26px}
.hero__fact strong{font-family:'Noto Sans Thai', sans-serif;font-size:24px;font-weight:700;line-height:32px;color:var(--white)}
.hero__facts .container{padding-right:224px}

.hero__scroll{
  position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.7);font-size:22px;line-height:22px;
}

/* ---------- Standards strip ---------- */
.standards{background:var(--white);border-bottom:1px solid var(--line)}
.standards__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding-top:48px;padding-bottom:48px;align-items:center}
.standard{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;transition:transform .2s var(--ease-out)}
.standard:hover{transform:translateY(-4px)}
.standard img{height:72px;width:auto;object-fit:contain}
.standard span{font-size:15px;line-height:24px;color:var(--body)}
.standard--iso{font-family:'Noto Sans Thai', sans-serif;font-size:26px;font-weight:700;color:var(--ink);line-height:36px}

/* ---------- Service category (จัดหาแม่บ้าน) ---------- */
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.eng-label{font-family:'Noto Sans Thai', sans-serif;font-size:15px;font-weight:600;line-height:24px;color:var(--primary);letter-spacing:1.5px;margin-top:8px}

.business{background:var(--ink)}
.business__head{text-align:center;margin-bottom:48px}
.business__kicker{
  font-family:'Noto Sans Thai', sans-serif;font-size:15px;font-weight:600;line-height:24px;
  color:#B9B6B0;letter-spacing:6px;margin-bottom:8px;
}
.business__head h2{color:var(--white)}
.business__head p{font-size:18px;line-height:34px;color:#B9B6B0;margin-top:16px;max-width:1240px;margin-left:auto;margin-right:auto}

.biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.biz{
  background:#22222C;border-radius:var(--r-lg);padding:8px 8px 24px;display:flex;flex-direction:column;
  transition:background-color .25s ease;
}
.biz:hover{background:#2A2A36}
.biz__media{position:relative}
.biz__media img{width:100%;height:280px;object-fit:cover;display:block;border-radius:var(--r-md);background:#2A2A36}
.biz__icon{
  position:absolute;left:24px;bottom:-33px;width:66px;height:66px;border-radius:50%;
  background:var(--primary);border:2px solid var(--white);
  display:flex;align-items:center;justify-content:center;
}
.biz__icon svg{width:34px;height:34px;fill:var(--white)}
.biz__body{padding:52px 24px 0}
.biz__th{font-size:18px;line-height:30px;color:#B9B6B0}
.biz__en{font-family:'Noto Sans Thai', sans-serif;font-size:24px;font-weight:700;line-height:36px;color:var(--white);margin-top:2px}

.biz-cta{display:flex;justify-content:center;gap:24px;margin-top:64px;flex-wrap:wrap}
.biz-cta__item{
  display:inline-flex;align-items:center;gap:16px;background:var(--white);color:var(--ink);
  border-radius:999px;padding:14px 32px 14px 20px;
}
.biz-cta__ic{
  width:44px;height:44px;border-radius:50%;background:var(--primary);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--white);
}
.biz-cta__ic svg{width:22px;height:22px}
.biz-cta__t{display:block;font-size:14px;line-height:22px;color:var(--muted)}
.biz-cta__b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:19px;font-weight:700;line-height:28px;color:var(--ink)}
.biz-cta__line{
  display:inline-flex;align-items:center;gap:12px;background:#06C755;color:var(--white);
  border-radius:999px;padding:20px 32px;font-family:'Noto Sans Thai', sans-serif;font-size:17px;font-weight:600;line-height:26px;
  transition:background-color .2s ease;
}
.biz-cta__line:hover{background:#05A948}
.biz-cta__lineic{width:26px;height:26px;flex:none;fill:currentColor}

/* ---------- Cleaning services — tabs + large image ---------- */
.svc-tabs{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}

.svc-tabs__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.svc-tab{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:20px 16px;cursor:pointer;font-family:'Noto Sans Thai', sans-serif;
  transition:background-color .2s ease,padding-left .2s ease;
}
.svc-tab__no{font-size:14px;font-weight:600;line-height:24px;color:var(--muted);flex:none;width:28px}
.svc-tab__name{font-size:18px;font-weight:600;line-height:28px;color:var(--ink);flex:1}
.svc-tab__arrow{font-size:18px;line-height:24px;color:var(--muted);opacity:0;transition:opacity .2s ease}
.svc-tab:hover{background:var(--white)}
.svc-tab:hover .svc-tab__arrow{opacity:1}
.svc-tab.is-active{background:var(--white);padding-left:24px;box-shadow:inset 3px 0 0 var(--primary)}
.svc-tab.is-active .svc-tab__no{color:var(--primary)}
.svc-tab.is-active .svc-tab__arrow{opacity:1;color:var(--primary)}

.svc-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);min-height:620px}
.svc-panel{position:absolute;inset:0;opacity:0;visibility:hidden;filter:blur(6px);transition:opacity .35s ease,filter .35s ease}
.svc-panel.is-active{opacity:1;visibility:visible;position:relative;filter:blur(0)}
.svc-panel img{width:100%;height:620px;object-fit:cover;display:block}
.svc-panel__body{
  position:absolute;left:0;right:0;bottom:0;padding:48px;
  background:linear-gradient(180deg,rgba(12,12,18,0) 0%,rgba(12,12,18,.86) 58%,rgba(12,12,18,.96) 100%);
}
.svc-panel__no{font-family:'Noto Sans Thai', sans-serif;font-size:14px;font-weight:600;line-height:24px;color:var(--primary);letter-spacing:1px;margin-bottom:8px}
.svc-panel__body h3{color:var(--white);margin-bottom:12px}
.svc-panel__body p{font-size:17px;line-height:32px;color:#D3D0CB;max-width:620px;margin-bottom:24px}

/* ---------- Numbers feature (editorial split) ---------- */
/* ภาพมี fade ในตัวอยู่แล้ว — ไม่ใส่ overlay ทับ */
.numbers{
  background-color:#1C1C1E;
  background-image:url('../images/numbers.jpg');
  background-position:left center;background-size:cover;background-repeat:no-repeat;
}
.numbers__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:560px}
.numbers__panel{min-height:520px}
.numbers__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.numbers__list{margin-top:40px}

.numbers__title{
  font-family:'Noto Sans Thai', sans-serif;font-size:60px;font-weight:700;line-height:70px;
  letter-spacing:-1px;color:var(--white);
}
.numbers__title span{display:block;color:var(--primary)}
.numbers__quote{font-size:18px;line-height:34px;color:#D3D0CB;margin-top:16px;max-width:680px}
.numbers__meta{display:flex;align-items:center;gap:24px}
.numbers__years{display:flex;align-items:flex-end;gap:8px;opacity:0;transform:translateY(10px);transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out)}
.numbers.is-visible .numbers__years{opacity:1;transform:translateY(0)}
.numbers__years b{font-family:'Noto Sans Thai', sans-serif;font-size:88px;font-weight:700;line-height:80px;color:var(--primary);letter-spacing:-3px}
.numbers__years i{font-style:normal;font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:700;line-height:28px;color:var(--white);letter-spacing:1px}
.numbers__rule{width:1px;align-self:stretch;background:rgba(255,255,255,.45)}
.numbers__clients{font-family:'Noto Sans Thai', sans-serif;font-size:17px;font-weight:600;line-height:26px;color:var(--white)}
.numbers__clients b{display:block;font-size:44px;line-height:52px;color:var(--primary);letter-spacing:-1px}

.numbers__list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.num{padding:28px 0 20px;border-bottom:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transform:translateY(10px);transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out)}
.numbers.is-visible .num{opacity:1;transform:translateY(0)}
.numbers.is-visible .num:nth-child(1){transition-delay:0ms}
.numbers.is-visible .num:nth-child(2){transition-delay:60ms}
.numbers.is-visible .num:nth-child(3){transition-delay:120ms}
.numbers.is-visible .num:nth-child(4){transition-delay:180ms}
.numbers.is-visible .num:nth-child(5){transition-delay:240ms}
.numbers.is-visible .num:nth-child(6){transition-delay:300ms}
.num:first-child,.num:nth-child(2){padding-top:0}
.num__val{
  font-family:'Noto Sans Thai', sans-serif;font-size:48px;font-weight:700;line-height:60px;
  color:var(--white);letter-spacing:-1px;display:flex;align-items:baseline;gap:8px;
}
.num__val em{font-style:normal;font-size:24px;font-weight:600;line-height:36px;color:var(--primary)}
.num__label{font-size:18px;line-height:30px;color:#C6C3BE;margin-top:4px}

/* ---------- Trust ---------- */
.trust__grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:stretch}
.trust__copy h2{margin-bottom:24px}
.trust__copy p{font-size:18px;line-height:34px;margin-bottom:24px}
.trust__close{font-size:17px;line-height:32px;color:var(--muted);margin-top:32px}
.trust__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}

.trust__media{position:relative;display:flex}
.trust__media img{width:100%;flex:1;min-height:620px;object-fit:cover;border-radius:var(--r-lg)}
.trust__badge{
  position:absolute;right:-32px;bottom:32px;background:var(--primary);color:var(--white);
  border-radius:var(--r-md);padding:20px 24px;display:flex;align-items:center;gap:14px;
}
.trust__badge strong{font-family:'Noto Sans Thai', sans-serif;font-size:56px;font-weight:700;line-height:56px;letter-spacing:-2px}
.trust__badge span{font-size:15px;line-height:24px;color:#FFE3D8}

/* จุดแข็ง 3 ข้อ */
.pillars{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pillar{display:flex;align-items:flex-start;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.pillar__ic{
  width:58px;height:58px;flex:none;border-radius:var(--r-md);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.pillar__ic svg{width:30px;height:30px;fill:var(--primary)}
.pillar__t{font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:30px;color:var(--ink)}
.pillar__d{font-size:18px;line-height:32px;color:var(--muted)}

/* ---------- Contact — แท็บสาขา ---------- */
.branch-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.branch-tab{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 28px;cursor:pointer;text-align:left;font-family:'Noto Sans Thai', sans-serif;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.branch-tab__k{display:block;font-size:13px;font-weight:500;line-height:20px;color:var(--muted);letter-spacing:1px}
.branch-tab__n{display:block;font-size:19px;font-weight:700;line-height:30px;color:var(--ink)}
.branch-tab:hover{border-color:var(--primary)}
.branch-tab.is-active{background:var(--primary);border-color:var(--primary)}
.branch-tab.is-active .branch-tab__k{color:#FFE3D8}
.branch-tab.is-active .branch-tab__n{color:var(--white)}

.branch-stage{position:relative}
.branch-panel{display:none;opacity:0;transform:translateY(6px);
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),display 220ms allow-discrete;
  grid-template-columns:7fr 5fr;gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.branch-panel.is-active{display:grid;opacity:1;transform:translateY(0)}
@starting-style{
  .branch-panel.is-active{opacity:0;transform:translateY(6px)}
}
.branch-panel__map{position:relative;background:var(--white);border-right:1px solid var(--line);min-height:420px}
.branch-panel__map img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:16px}
.branch-panel__info{padding:40px;display:flex;flex-direction:column}
.branch-panel__info h3{margin-bottom:20px}
.branch-panel__actions{margin-top:auto;padding-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.contact-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:30px}
.contact-row:last-child{border-bottom:0}
.contact-row__k{width:96px;flex:none;color:var(--muted);font-size:15px}
.contact-row__v{color:var(--ink);font-weight:500}

/* ---------- Projects / News ---------- */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.news{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s ease}
.news__media{aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.news__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease-out)}
.news:hover .news__media img{transform:scale(1.04)}
.news__body{padding:28px;display:flex;flex-direction:column;gap:16px;flex:1}
.news:hover{border-color:var(--primary)}
.news__title{font-family:'Noto Sans Thai', sans-serif;font-size:19px;font-weight:600;line-height:32px;color:var(--ink)}
.news__more{margin-top:auto;font-size:15px;font-weight:600;line-height:24px;color:var(--primary)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:48px;flex-wrap:wrap}
.pager a{min-width:48px;height:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);font-size:15px;line-height:24px;background:var(--white)}
.pager a.is-active,.pager a:hover{background:var(--primary);color:var(--white);border-color:var(--primary)}

.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.proj{border-radius:var(--r-md);overflow:hidden;display:block;aspect-ratio:4/3}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out)}
.proj:hover img{transform:scale(1.04)}

/* ---------- Reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.review{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;gap:16px;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.review:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(23,23,31,.08)}
.review__stars{color:var(--primary);font-size:18px;line-height:26px;letter-spacing:2px}
.review__text{font-size:18px;line-height:32px;color:var(--body)}
.review__meta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.review__avatar{width:48px;height:48px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:'Noto Sans Thai', sans-serif;font-weight:600;font-size:18px;color:var(--primary)}
.review__name{font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:28px;color:var(--ink)}
.review__src{font-size:14px;line-height:22px;color:var(--muted)}

/* ---------- Clients ---------- */
.clients-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.client{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);height:120px;display:flex;align-items:center;justify-content:center;padding:16px}
.client img{max-height:72px;object-fit:contain}

/* ---------- CTA band ---------- */
.cta-band{background:var(--primary);position:relative}
/* เผื่อที่ให้คนเกยขึ้นมา โดยพื้นหลังยังเป็นครีมต่อเนื่อง ไม่เป็นแถบขาว */
.section--person-gap{padding-bottom:144px}
.cta-band .container{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:48px;padding-top:64px;padding-bottom:64px}
.cta-band h2{color:var(--white);max-width:760px;margin-top:4px}
.cta-band p{color:#FFE0D6;font-size:18px;line-height:32px;margin-top:12px}
.cta-copy__k{font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:28px;color:#FFD9CB}
.cta-copy__en{font-size:18px;line-height:30px;color:#FFD9CB;letter-spacing:.5px;margin-top:8px}
/* คนยืนเกยขึ้นเหนือแถบส้ม */
.cta-person{align-self:end;width:360px;flex:none;margin-top:-220px;margin-bottom:-64px}
.cta-person img{display:block;width:100%;height:auto}

/* ---------- Quote form ---------- */
.form-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:stretch}
.quote-intro{display:flex;flex-direction:column}
/* รูปยืดเต็มที่เหลือ ไม่มี min-height ไม่งั้นดันคอลัมน์สูงเกินกล่องฟอร์ม */
.quote-media{flex:1 1 0;min-height:0;border-radius:var(--r-md);overflow:hidden;background:var(--bg)}
.quote-media img{width:100%;height:100%;object-fit:cover;display:block}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:48px}
.field{margin-bottom:24px}
.field label{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:15px;font-weight:600;line-height:24px;color:var(--ink);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
  font-family:'Noto Sans Thai',sans-serif;font-size:16px;line-height:28px;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(244,78,30,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.checkline{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:26px;margin-bottom:24px}
.checkline input{width:20px;height:20px;flex:none;margin-top:4px;accent-color:var(--primary)}
.hours{background:var(--ink);color:var(--white);border-radius:var(--r-md);padding:40px}
.hours h4{color:var(--white);margin-bottom:16px}
.hours p{font-size:18px;line-height:32px;color:#C9C9D0}
.hours strong{color:var(--white)}
.hours-divider{height:1px;background:#2E2E38;margin:24px 0}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#A9A9B2;padding-top:96px;padding-bottom:32px}
.footer .footer__h{font-family:'Noto Sans Thai', sans-serif;font-size:17px;font-weight:600;line-height:28px;color:var(--white);margin-bottom:24px}
.footer__grid{display:grid;grid-template-columns:3.4fr 4.5fr 3.2fr;gap:48px;padding-bottom:56px;align-items:start}
.footer__mid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
/* คอลัมน์ติดต่อเรา ขยับเข้าไปทางขวาอีกนิด */
.footer__grid > div:last-child{padding-left:32px}
.footer__logo{height:40px;width:auto;margin-bottom:24px;filter:brightness(0) invert(1)}
.footer p,.footer li{font-size:15px;line-height:28px}
.footer a:hover{color:var(--white)}
.footer__links li{margin-bottom:8px}
.footer__bottom{display:flex;justify-content:space-between;gap:24px;padding-top:32px;flex-wrap:wrap;font-size:14px;line-height:24px}
.footer__legal a{margin-right:16px}
/* footer — social / stats / contact / certs */
.f-social{display:flex;gap:10px;margin-top:24px}
.f-social__a{
  width:44px;height:44px;border-radius:50%;border:1px solid #2E2E38;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:20px;color:#C9C9D0;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.f-social__a:hover{background:var(--primary);border-color:var(--primary);color:var(--white)}
.f-social__a svg{width:22px;height:22px}

/* ตัวเลขใน footer : จัดเป็นการ์ด 3 ช่องเท่ากัน อ่านง่ายและเป็นกลุ่มชัดเจน */
.f-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;margin-bottom:24px}
.f-stat{background:rgba(255,255,255,.04);border:1px solid #2E2E38;border-radius:var(--r-md);
  padding:18px 14px;text-align:center;transition:border-color .25s,background-color .25s}
.f-stat:hover{background:rgba(244,78,30,.08);border-color:rgba(244,78,30,.45)}
.f-stat b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:30px;font-weight:700;
  line-height:40px;color:var(--primary);letter-spacing:-1px;margin-bottom:2px}
.f-stat span{display:block;font-size:13px;line-height:20px;color:#A9A9B2}

.f-contact{display:flex;flex-direction:column;gap:20px}
.f-contact__row{display:flex;gap:12px;align-items:flex-start}
.f-contact__ic{
  width:38px;height:38px;flex:none;border-radius:var(--r-sm);background:#22222C;
  display:flex;align-items:center;justify-content:center;
}
.f-contact__ic svg{width:22px;height:22px;fill:var(--primary)}
.f-contact__ic--line svg{width:20px;height:20px;fill:var(--primary);stroke:none}
.f-contact strong{color:var(--white);font-family:'Noto Sans Thai', sans-serif;font-weight:600}

.footer__certs{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:48px;padding:24px 0;border-top:1px solid #2E2E38;
}
.footer__certs-k{font-family:'Noto Sans Thai', sans-serif;font-size:15px;font-weight:600;line-height:24px;color:var(--white)}
.footer__certs-list{display:flex;gap:10px;flex-wrap:wrap}
.cert-chip{
  border:1px solid #2E2E38;border-radius:999px;padding:8px 18px;
  font-size:14px;line-height:22px;color:#C9C9D0;
}

.slogan{text-align:center;padding-bottom:64px}
/* slogan ย้ายลงมาอยู่ในคอลัมน์ footer แทนการอยู่หัวสุด — footer จะบาลานซ์ขึ้น */
.slogan--footer{text-align:left;padding-bottom:0;margin-top:40px;
  padding-top:32px;border-top:1px solid #2E2E38}
.slogan--footer .slogan__th{font-size:22px;line-height:34px}
.slogan--footer .slogan__en{font-size:15px;line-height:24px;margin-top:4px}
.slogan__th{font-family:'Noto Sans Thai', sans-serif;font-size:32px;font-weight:700;line-height:48px;color:var(--white)}
.slogan__en{font-size:18px;line-height:30px;color:var(--primary);letter-spacing:1px;margin-top:8px}

/* ---------- Floating buttons ---------- */
/* แถบไอคอนด้านขวา : ชิดขอบจอ กว้าง 48px เท่ากับ padding ของ container
   จึงไม่ทับเนื้อหาในทุกขนาดจอ */
.floats{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:200;
  display:flex;flex-direction:column;gap:1px;
  background:var(--ink);border-radius:var(--r-md) 0 0 var(--r-md);overflow:hidden;
  box-shadow:0 8px 28px rgba(23,23,31,.22);
}
.float{
  width:48px;height:48px;border-radius:0;background:var(--ink);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:20px;
  border:0;cursor:pointer;transition:background-color .2s ease;
}
.float:hover{background:var(--primary)}
.float svg{width:23px;height:23px}
.float--top{display:none;border-top:1px solid rgba(255,255,255,.14)}
.float--top.is-visible{display:flex}
.float--top:hover{background:var(--primary)}

/* ปุ่มโทร : ลอยมุมขวาล่าง แยกจากแถบไอคอน */
.float-call{
  position:fixed;right:24px;bottom:24px;z-index:201;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:56px;padding:0 24px;border:0;border-radius:28px;
  background:var(--primary);color:var(--white);
  font-family:'Noto Sans Thai', sans-serif;font-size:16px;font-weight:600;
  line-height:56px;white-space:nowrap;cursor:pointer;
  box-shadow:0 8px 28px rgba(244,78,30,.32);transition:background-color .2s ease;
}
.float-call svg{width:22px;height:22px}
.float-call:hover{background:var(--primary-dark)}

/* ============================================================
   TABLET  (max 1024px)
   ============================================================ */
@media (max-width:1024px){
  body{font-size:16px;line-height:30px}
  h1{font-size:48px;line-height:60px}
  h2{font-size:36px;line-height:48px}
  h3{font-size:26px;line-height:38px}
  h4{font-size:22px;line-height:34px}
  .container{padding-left:32px;padding-right:32px}
  .section{padding-top:48px;padding-bottom:48px}
  .nav{display:none}
  .burger{display:flex}
  .header .btn{display:none}
  .hero{min-height:88vh;background-position:center center}
  .hero__overlay{background:linear-gradient(90deg,rgba(12,12,18,.9) 0%,rgba(12,12,18,.78) 55%,rgba(12,12,18,.4) 100%)}
  .hero__inner{max-width:none;padding-top:152px;padding-bottom:140px}
  .hero__sub{font-size:22px;line-height:36px}
  .hero__facts .container{grid-template-columns:repeat(2,1fr);gap:16px;padding-top:20px;padding-bottom:20px}
  .hero__facts .container{padding-right:32px}
  .hero__fact strong{font-size:20px;line-height:30px}
  .hero__scroll{display:none}
  .standards__grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .split{grid-template-columns:1fr;gap:48px}
  .section--person-gap{padding-bottom:120px}
  .cta-band .container{grid-template-columns:auto 1fr;gap:32px}
  .cta-band .btn{grid-column:2}
  .cta-person{width:280px;margin-top:-170px}
  .biz-grid{grid-template-columns:repeat(2,1fr)}
  .biz__media img{height:240px}
  .biz-cta{margin-top:48px;gap:16px}
  .svc-tabs{grid-template-columns:1fr;gap:32px}
  .svc-stage{min-height:0}
  .svc-panel img{height:420px}
  .svc-panel__body{padding:32px}
  /* ซ้อนกันแล้วภาพจะทับตัวหนังสือ — ย้ายภาพมาเป็นบล็อกด้านบนแทน */
  .numbers{background-image:none;background-color:#1C1C1E}
  .numbers__grid{grid-template-columns:1fr;gap:32px;min-height:0}
  .numbers__panel{
    min-height:0;height:300px;border-radius:var(--r-md);
    background:url('../images/numbers.jpg') left center/cover no-repeat;
  }
  .numbers__title{font-size:48px;line-height:60px}
  .numbers__list{margin-top:32px}
  .numbers__years b{font-size:72px;line-height:66px}
  .numbers__clients b{font-size:36px;line-height:44px}
  .num__val{font-size:40px;line-height:52px}
  .num__label{font-size:16px;line-height:28px}
  .branch-panel.is-active{grid-template-columns:1fr}
  .branch-panel__map{border-right:0;border-bottom:1px solid var(--line);position:relative;min-height:0;aspect-ratio:1.6}
  .branch-panel__map img{position:absolute;inset:0}
  .branch-panel__info{padding:32px}
  .trust__grid{grid-template-columns:1fr;gap:56px}
  .trust__media img{min-height:420px}
  .trust__badge{right:24px;bottom:24px;padding:20px 24px}
  .trust__badge strong{font-size:44px;line-height:48px}
  .card-grid-3,.review-grid{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .clients-grid{grid-template-columns:repeat(4,1fr)}
  .form-grid{grid-template-columns:1fr;gap:48px;align-items:start}
  .quote-media{min-height:0;height:320px}
  .form-card{padding:32px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  /* แท็บเล็ต : แถวบน [โลโก้][ติดต่อเรา] แถวล่าง [เมนู 2 คอลัมน์ + สโลแกน] เต็มความกว้าง */
  .footer__mid{grid-column:1 / -1;order:3;gap:40px}
  .footer__grid > div:last-child{order:2;padding-left:0}
  .footer__certs{gap:16px}
}

/* ============================================================
   MOBILE  (max 767px)
   ============================================================ */
@media (max-width:767px){
  body{font-size:16px;line-height:30px}
  h1{font-size:34px;line-height:48px}
  h2{font-size:28px;line-height:40px}
  h3{font-size:22px;line-height:34px}
  h4{font-size:19px;line-height:30px}
  .container{padding-left:20px;padding-right:20px}
  .section{padding-top:40px;padding-bottom:40px}
  .section--tight{padding-top:32px;padding-bottom:32px}
  .section--scan{padding-top:32px;padding-bottom:32px}
  .section-head{margin-bottom:32px}
  .head-row{margin-bottom:32px;gap:20px;align-items:flex-start}
  .section-head--flush{margin-bottom:0}
  .section-head p{font-size:16px;line-height:30px}
  .topbar{display:none}
  .header{top:0}
  .header .container{height:72px}
  .brand img{height:30px}
  .hero{min-height:0}
  .hero__inner{padding-top:112px;padding-bottom:152px}
  .hero__sub{font-size:19px;line-height:32px;margin-bottom:16px}
  .hero__lead{font-size:16px;line-height:30px;margin-bottom:24px}
  .hero__quote{font-size:18px;line-height:30px;margin-bottom:24px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{justify-content:center}
  .hero__facts .container{grid-template-columns:1fr;gap:4px;padding-top:16px;padding-bottom:16px}
  .hero__fact{font-size:14px;line-height:24px}
  .hero__fact strong{font-size:17px;line-height:26px}
  .standards__grid{grid-template-columns:repeat(2,1fr);gap:24px;padding-top:32px;padding-bottom:32px}
  .standard img{height:56px}
  .business__kicker{letter-spacing:4px}
  .biz-grid{grid-template-columns:1fr;gap:16px}
  .biz__media img{height:220px}
  .biz__body{padding:44px 20px 0}
  .biz__en{font-size:21px;line-height:32px}
  .biz-cta{margin-top:32px;flex-direction:column;align-items:stretch}
  .biz-cta__item,.biz-cta__line{justify-content:center}
  .svc-tabs{gap:24px}
  .svc-tab{padding:16px 12px;gap:12px}
  .svc-tab.is-active{padding-left:16px}
  .svc-tab__name{font-size:16px;line-height:26px}
  .svc-panel img{height:300px}
  .svc-panel__body{padding:24px}
  .svc-panel__body p{font-size:16px;line-height:28px;margin-bottom:16px}
  .svc-panel__body .btn{width:100%;justify-content:center}
  .numbers__grid{gap:24px}
  .numbers__panel{height:200px}
  .numbers__head{gap:20px}
  .numbers__title{font-size:34px;line-height:46px}
  .numbers__quote{font-size:15px;line-height:28px;margin-top:16px}
  .numbers__meta{gap:20px;margin-top:24px}
  .numbers__years b{font-size:56px;line-height:52px;letter-spacing:-2px}
  .numbers__years i{font-size:15px;line-height:24px}
  .numbers__clients{font-size:15px;line-height:24px}
  .numbers__clients b{font-size:30px;line-height:38px}
  .numbers__list{grid-template-columns:1fr;column-gap:0}
  .num{padding:20px 0 16px}
  .num:nth-child(2){padding-top:20px}
  .num__val{font-size:34px;line-height:46px}
  .num__val em{font-size:19px;line-height:30px}
  .num__label{font-size:16px;line-height:28px}
  .trust__copy p{font-size:16px;line-height:30px}
  .trust__media{flex-direction:column}
  .trust__media img{min-height:280px}
  .trust__badge{position:static;margin-top:16px;max-width:none;padding:16px 20px}
  .trust__badge strong{font-size:36px;line-height:40px}
  .pillar{gap:16px;padding:16px 0}
  .pillar__ic{width:46px;height:46px}
  .pillar__t{font-size:16px;line-height:26px}
  .pillar__d{font-size:15px;line-height:26px}
  .trust__close{font-size:16px;line-height:28px;margin-top:24px}
  .trust__actions{flex-direction:column;align-items:stretch}
  .trust__actions .btn{justify-content:center}
  .branch-tabs{gap:8px;margin-bottom:16px}
  .branch-tab{flex:1;padding:12px 16px;text-align:center}
  .branch-tab__n{font-size:16px;line-height:26px}
  .branch-panel__info{padding:24px}
  .branch-panel__actions{padding-top:20px;flex-direction:column;align-items:stretch}
  .branch-panel__actions .btn{justify-content:center}
  .card-grid-3,.review-grid{grid-template-columns:1fr;gap:16px}
  .proj-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .news__body{padding:20px}
  .review{padding:24px}

  .clients-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .section--person-gap{padding-bottom:96px}
  .cta-band .container{grid-template-columns:1fr;padding-top:24px;padding-bottom:40px;gap:20px;text-align:center}
  .cta-person{width:200px;margin:-120px auto -40px;justify-self:center}
  .cta-band .btn{grid-column:1;width:100%;justify-content:center}
  .form-card{padding:24px}
  .field-row{grid-template-columns:1fr;gap:0}
  .hours{padding:24px}
  .footer{padding-top:48px}
  .footer__grid{grid-template-columns:1fr;gap:32px;padding-bottom:32px}
  .footer__mid{grid-template-columns:1fr;gap:32px}
  .f-stats{gap:10px}
  .f-stat{padding:14px 8px}
  .f-stat b{font-size:24px;line-height:32px}
  .footer__certs{margin-top:32px;gap:12px}
  .slogan__th{font-size:24px;line-height:38px}
  .footer__bottom{flex-direction:column;gap:12px}
  .float-call{right:16px;bottom:16px;padding:0;width:48px;height:48px;border-radius:50%}
  .float-call .float__label{display:none}
}

/* ============================================================
   ABOUT PAGE — อิงเลย์เอาต์จาก ref (skd-service.co.th/about.html)
   ============================================================ */

/* hero หน้าใน — ไม่มี breadcrumb, ไม่มี eyebrow (Global Design Rules 4.3) */
.page-hero{position:relative;background:var(--ink);overflow:hidden;background-position:center;background-size:cover;
  min-height:580px;display:flex;align-items:stretch;padding-top:129px}  /* 129px = เว้นที่ให้ header ที่ลอยทับ เพื่อให้ข้อความอยู่กึ่งกลางพื้นที่ที่มองเห็น */
.page-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,18,.9) 0%,rgba(12,12,18,.72) 55%,rgba(12,12,18,.35) 100%)}
.page-hero .container{position:relative;z-index:2;width:100%}
.page-hero__inner{max-width:840px}
.page-hero h1{color:var(--white);font-size:56px;line-height:72px;margin-bottom:16px}
.page-hero p{font-size:18px;line-height:34px;color:#C9C6C1}
.page-hero .container{display:flex;align-items:center;justify-content:space-between;gap:40px}
.page-hero__figure{position:relative;z-index:2;flex:none;align-self:flex-end}
.page-hero__figure img{height:400px;width:auto;display:block;margin-left:auto}

/* ---- วิสัยทัศน์ & พันธกิจ : รูปทีมซ้าย + การ์ดขวา ---- */
.vm-split{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:stretch}
.vm-media{position:relative;border-radius:var(--r-lg);overflow:hidden}
.vm-media img{width:100%;height:100%;min-height:520px;object-fit:cover;display:block}
.vm-media__cap{position:absolute;left:0;right:0;bottom:0;padding:32px 28px 24px;background:linear-gradient(180deg,rgba(12,12,18,0) 0%,rgba(12,12,18,.86) 70%)}
.vm-media__cap b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:24px;font-weight:700;line-height:38px;color:var(--white)}
.vm-media__cap span{display:block;font-size:18px;line-height:30px;color:var(--primary);font-weight:600}

/* หัวเรื่องกลาง + ป้ายเล็ก + ขีดใต้ (ตาม ref) */
.sec-head{text-align:center;max-width:none;margin:0 auto 56px}
.sec-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:8px 18px;margin-bottom:20px;
  font-family:'Noto Sans Thai', sans-serif;font-size:13px;font-weight:600;line-height:20px;
  color:var(--primary);letter-spacing:2px;
}
.sec-badge svg{width:18px;height:18px;fill:currentColor}
.sec-head h2{margin-bottom:20px}
.sec-head h2 em{font-style:normal;color:var(--primary)}
.sec-rule{width:72px;height:3px;background:var(--primary);border-radius:2px;margin:0 auto 20px}
.sec-head p{font-size:17px;line-height:32px;color:var(--muted)}
.on-dark .sec-badge{background:#22222C;border-color:#2E2E38}
.on-dark .sec-head h2{color:var(--white)}
.on-dark .sec-head p{color:#A9A9B2}
/* กันพลาด : ทุกหัวข้อ/ข้อความบนพื้นเข้มต้องเป็นสีขาวเสมอ */
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark h5,.on-dark b,.on-dark strong{color:var(--white)}
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em,.on-dark h4 em{font-style:normal;color:var(--primary)}
.on-dark p,.on-dark li,.on-dark span,.on-dark td,.on-dark dd{color:#A9A9B2}
.on-dark .sec-badge,.on-dark .btn--primary,.on-dark .btn--primary span{color:var(--white)}

/* ---- OUR STORY ---- */
.story__intro{max-width:none;margin:0 0 56px}
.story__intro p{font-size:17px;line-height:34px;color:var(--body);margin-bottom:20px}
.story__grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.story__media{position:sticky;top:120px;border-radius:var(--r-lg);overflow:hidden}
.story__media img{width:100%;height:500px;object-fit:cover;object-position:center top;display:block}

/* timeline แนวตั้ง */
.vtl{position:relative;padding-left:36px}
.vtl::before{content:'';position:absolute;left:12px;top:10px;bottom:10px;width:2px;background:var(--line)}
.vtl__item{position:relative;margin-bottom:20px}
.vtl__item:last-child{margin-bottom:0}
.vtl__item::before{
  content:'';position:absolute;left:-33px;top:26px;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:3px solid var(--primary);
}
.vtl__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 28px;
  display:flex;align-items:flex-start;gap:16px;transition:border-color .2s ease;
}
.vtl__card:hover{border-color:var(--primary)}
.vtl__ic{width:50px;height:50px;flex:none;border-radius:var(--r-sm);background:var(--bg);display:flex;align-items:center;justify-content:center}
.vtl__ic svg{width:26px;height:26px;fill:var(--primary)}
.vtl__body{flex:1}
.vtl__t{font-family:'Noto Sans Thai', sans-serif;font-size:19px;font-weight:600;line-height:30px;color:var(--ink)}
.vtl__d{font-size:18px;line-height:30px;color:var(--muted);margin-top:2px}
.vtl__y{
  flex:none;background:var(--primary);color:var(--white);border-radius:999px;padding:6px 16px;
  font-family:'Noto Sans Thai', sans-serif;font-size:14px;font-weight:700;line-height:22px;white-space:nowrap;
}

/* แถวการ์ดไอคอนกลม */
.iconrow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.icard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:36px 28px;text-align:center}
.icard__ic{width:76px;height:76px;margin:0 auto 20px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center}
.icard__ic svg{width:36px;height:36px;fill:var(--primary)}
.icard b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:40px;font-weight:700;line-height:52px;color:var(--primary);letter-spacing:-1px}
.icard__t{font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:30px;color:var(--ink);margin-top:4px}
.icard__d{font-size:17px;line-height:30px;color:var(--muted);margin-top:4px}
.icard__pic{width:100%;height:96px;margin:0 0 16px;display:flex;align-items:center;justify-content:center}
.icard__pic img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* ---- การ์ดใหญ่ (วิสัยทัศน์ / พันธกิจ / นโยบาย) ---- */
.bigcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bigcards.bigcards--stack{grid-template-columns:1fr}
.bigcard{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px;overflow:hidden;
}
.bigcard__wm{position:absolute;right:-20px;top:-20px;width:160px;height:160px;opacity:.06}
.bigcard__wm svg{width:100%;height:100%;fill:var(--ink)}
.bigcard__head{display:flex;align-items:center;gap:14px;margin-bottom:20px;position:relative}
.bigcard__ic{width:56px;height:56px;flex:none;border-radius:var(--r-md);background:var(--bg);display:flex;align-items:center;justify-content:center}
.bigcard__ic svg{width:30px;height:30px;fill:var(--primary)}
.bigcard h3{font-size:26px;line-height:40px}
.bigcard__q{font-family:'Noto Sans Thai', sans-serif;font-size:26px;font-weight:700;line-height:44px;color:var(--primary);position:relative}
.bigcard__q small{display:block;font-size:17px;font-weight:500;line-height:26px;color:var(--muted);letter-spacing:.5px;margin-top:6px}
.bigcard ul{display:flex;flex-direction:column;gap:12px;position:relative}
.bigcard li{display:flex;gap:12px;font-size:18px;line-height:32px;color:var(--body)}
.bigcard li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:10px}

/* ---- นโยบายแบบรายการเลข ---- */
.rules{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:stretch}
.rules__copy{display:flex;flex-direction:column}
.rules__list{display:flex;flex-direction:column;gap:12px}
.rules__item{display:flex;gap:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px}
.rules__n{font-family:'Noto Sans Thai', sans-serif;font-size:14px;font-weight:700;line-height:30px;color:var(--primary);flex:none;width:28px}
.rules__t{font-size:18px;line-height:32px;color:var(--body)}
.rules__h{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:30px;color:var(--ink);margin-bottom:4px}
.motto{background:var(--primary);color:var(--white);border-radius:var(--r-md);padding:32px;margin-top:24px}
.rules__media{flex:1 1 0;min-height:340px;position:relative;margin-top:24px;border-radius:var(--r-lg);overflow:hidden}
.rules__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.motto__k{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:13px;font-weight:700;line-height:22px;color:#FFD4C5;letter-spacing:1.5px;margin-bottom:10px}
.motto b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:22px;font-weight:700;line-height:36px;margin-bottom:4px}
.motto span{font-size:18px;line-height:30px;color:#FFE0D6}

/* ---- รางวัลการันตี — การ์ดเรียงลง (ตาม ref) ---- */
.awards{display:flex;flex-direction:column;gap:24px}
.acard{
  display:grid;grid-template-columns:4fr 8fr;gap:40px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;
  transition:border-color .2s ease;
}
.acard:hover{border-color:var(--primary)}
.acard__media{display:flex;flex-direction:column;gap:12px}
.acard__img{
  position:relative;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:zoom-in;transition:border-color .2s ease;
}
.acard__img:hover{border-color:var(--primary)}
.acard__img img{width:100%;height:100%;object-fit:contain;display:block}
.acard__img--wide{aspect-ratio:3/1}
.acard__zoom{
  position:absolute;right:12px;bottom:12px;width:46px;height:46px;border-radius:50%;
  background:var(--primary);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;
}
.acard__img:hover .acard__zoom{opacity:1;transform:translateY(0)}
.acard__zoom svg{width:24px;height:24px;fill:var(--white)}
.acard__thumbs{display:flex;gap:12px;flex-wrap:wrap}
.acard__thumb{
  width:72px;height:72px;flex:none;padding:0;cursor:pointer;background:var(--bg);
  border:2px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .2s ease;
}
.acard__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.acard__thumb:hover{border-color:var(--muted)}
.acard__thumb.is-active{border-color:var(--primary)}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(12,12,18,.94);
  display:flex;align-items:center;justify-content:center;gap:24px;padding:40px;
}
.lightbox[hidden]{display:none}
.lightbox__stage{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:1100px;max-height:100%}
.lightbox__img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-md);background:var(--white)}
.lightbox__cap{font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:500;line-height:28px;color:var(--white);text-align:center}
.lightbox__close{
  position:absolute;top:24px;right:24px;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;
}
.lightbox__nav{
  width:56px;height:56px;flex:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;
}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--primary);border-color:var(--primary)}
.lightbox__close svg,.lightbox__nav svg{width:26px;height:26px;fill:var(--white)}
.lightbox.is-single .lightbox__nav{display:none}
body.no-scroll{overflow:hidden}
.acard__badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:var(--white);
  border-radius:999px;padding:6px 16px;margin-bottom:14px;
  font-family:'Noto Sans Thai', sans-serif;font-size:13px;font-weight:700;line-height:20px;letter-spacing:1px;
}
.acard h3{margin-bottom:10px}
.acard h3 em{font-style:normal;color:var(--primary)}
.acard p{font-size:18px;line-height:32px;color:var(--body);margin-bottom:14px}
.acard ul{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.acard li{display:flex;gap:12px;font-size:18px;line-height:32px;color:var(--body)}
.acard li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--primary);margin-top:11px}
.acard__meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;background:var(--bg);border-radius:var(--r-sm);padding:20px 24px}
.acard__meta div{font-size:15px;line-height:26px;color:var(--body)}
.acard__meta strong{color:var(--ink)}
.acard__note{font-size:14px;line-height:24px;color:var(--muted);margin-top:12px}

.acard__en{font-size:15px;line-height:26px;color:var(--muted);margin-bottom:12px}
.acard__sub{font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:30px;color:var(--ink);margin:0 0 10px}
/* หัวข้อย่อยที่ตามหลังกล่อง/ย่อหน้า ต้องเว้นระยะ ไม่งั้นติดกล่องข้างบน */
.acard__body > * + .acard__sub{margin-top:32px}
@media (max-width:767px){.acard__body > * + .acard__sub{margin-top:24px}}
.awards-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 40px;margin-top:24px;
}
.awards-cta h3{font-size:24px;line-height:38px;margin:0}
@media (max-width:767px){.awards-cta{padding:24px;flex-direction:column;align-items:flex-start}.awards-cta h3{font-size:20px;line-height:32px}}

/* ---- ร่วมงานกับเรา ---- */
/* section นี้พื้นสีเดียวกับ section ก่อนหน้า — ลดช่องว่างและใส่เส้นคั่นให้เห็นขอบเขต */
.jobs{background:var(--bg);border-top:1px solid var(--line);padding-top:64px}
#awards{padding-bottom:64px}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:56px}
.perk{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;align-items:center;gap:16px}
.perk__ic{width:52px;height:52px;flex:none;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center}
.perk__ic svg{width:28px;height:28px;fill:var(--primary)}
.perk span{font-family:'Noto Sans Thai', sans-serif;font-size:17px;font-weight:600;line-height:28px;color:var(--ink)}
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
.zone{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.zone__a{font-size:18px;line-height:30px;color:var(--body)}
.zone__a b{display:block;font-family:'Noto Sans Thai', sans-serif;font-weight:600;color:var(--ink)}
.zone__tel{display:inline-flex;align-items:center;gap:8px;font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:28px;color:var(--primary);white-space:nowrap}
.zone__tel svg{width:20px;height:20px;fill:currentColor}

@media (max-width:1024px){
  .page-hero .container{display:block}
  .page-hero__figure{display:none}
  .vm-split{grid-template-columns:1fr;gap:24px}
  .vm-media img{height:300px}
  .page-hero{padding-top:40px;align-items:center}  /* container เป็น block แล้ว จึงจัดกลางที่ section */
  .page-hero h1{font-size:42px;line-height:58px}
  .sec-head{margin-bottom:40px}
  .story__grid{grid-template-columns:1fr;gap:40px}
  .story__media{position:static}
  .story__media img{height:420px}
  .iconrow{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .bigcards{grid-template-columns:1fr;gap:16px}
  .bigcard{padding:32px}
  .rules{grid-template-columns:1fr;gap:32px}
  .rules__media{flex:none;min-height:0;height:340px}
  .acard{grid-template-columns:1fr;gap:24px;padding:24px}
  .acard__media{max-width:340px}
  .acard__media:has(.acard__img--wide){max-width:none}
  .perks{grid-template-columns:repeat(2,1fr)}
  .zones{grid-template-columns:1fr}
}

@media (max-width:767px){
  .vm-media img{height:220px}
  .vm-media__cap{padding:24px 20px 18px}
  .vm-media__cap b{font-size:20px;line-height:32px}
  .page-hero{padding-top:0}
  .page-hero h1{font-size:32px;line-height:46px}
  .page-hero p{font-size:16px;line-height:30px}
  .sec-badge{letter-spacing:1.5px;padding:6px 14px}
  .story__intro p{font-size:16px;line-height:30px}
  .story__media img{height:300px}
  .vtl{padding-left:28px}
  .vtl::before{left:8px}
  .vtl__card{flex-wrap:wrap;padding:20px}
  .vtl__item::before{left:-27px;top:22px;width:16px;height:16px}
  .vtl__y{order:-1}
  .icard{padding:28px 20px}
  .icard b{font-size:34px;line-height:44px}
  .bigcard{padding:24px}
  .bigcard__q{font-size:21px;line-height:36px}
  .rules__item{padding:16px 20px;gap:14px}
  .rules__media{height:240px}
  .motto{padding:24px}
  .motto b{font-size:19px;line-height:32px}
  .acard__meta{grid-template-columns:1fr}
  .acard__thumb{width:56px;height:56px}
  .lightbox{padding:16px;gap:8px}
  .lightbox__nav{width:44px;height:44px}
  .lightbox__close{top:12px;right:12px;width:44px;height:44px}
  .lightbox__img{max-height:66vh}
  .lightbox__cap{font-size:14px;line-height:24px}
  .perks{grid-template-columns:1fr}
  .zone{align-items:flex-start;flex-direction:column}
}

/* ============================================================
   SERVICES PAGE — หน้ารวมบริการ
   ============================================================ */
.srv-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.srv-nav__item{
  display:flex;align-items:flex-start;gap:20px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;
  transition:border-color .2s ease,transform .2s ease;
}
.srv-nav__item:hover{border-color:var(--primary);transform:translateY(-4px)}
.srv-nav__n{
  flex:none;width:52px;height:52px;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:700;line-height:28px;color:var(--primary);
}
.srv-nav__item:hover .srv-nav__n{background:var(--primary);color:var(--white)}
.srv-nav__t b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:22px;font-weight:700;line-height:34px;color:var(--ink)}
.srv-nav__t span{display:block;font-size:14px;line-height:24px;color:var(--muted);letter-spacing:1.5px;margin-top:2px}

.srv-split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.srv-split--rev .srv-media{order:2}
.srv-media{position:relative;border-radius:var(--r-lg);overflow:hidden}
.srv-media img{width:100%;height:560px;object-fit:cover;display:block}
.srv-media__n{
  position:absolute;left:24px;top:24px;width:64px;height:64px;border-radius:50%;
  background:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center;
  font-family:'Noto Sans Thai', sans-serif;font-size:24px;font-weight:700;line-height:36px;
}
.srv-body .sec-badge{margin-bottom:16px}
.srv-body h2{margin-bottom:16px}
.srv-body h2 em{font-style:normal;color:var(--primary)}
.srv-lead{
  font-family:'Noto Sans Thai', sans-serif;font-size:20px;font-weight:600;line-height:34px;color:var(--ink);
  border-left:3px solid var(--primary);padding-left:16px;margin-bottom:20px;
}
.srv-desc{font-size:18px;line-height:34px;color:var(--body);margin-bottom:32px}
.srv-sub{font-family:'Noto Sans Thai', sans-serif;font-size:18px;font-weight:600;line-height:30px;color:var(--ink);margin:0 0 16px}
.srv-tags{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.srv-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 20px;
  font-size:17px;line-height:28px;color:var(--body);
}
.srv-tag::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.bg-white .srv-tag{background:var(--bg)}
.srv-actions{display:flex;flex-wrap:wrap;gap:16px}

@media (max-width:1024px){
  .srv-nav{grid-template-columns:1fr;gap:16px}
  .srv-nav__item{padding:24px}
  .srv-split{grid-template-columns:1fr;gap:32px}
  .srv-split--rev .srv-media{order:0}
  .srv-media img{height:360px}
}

@media (max-width:767px){
  .srv-nav__item{gap:16px;padding:20px}
  .srv-nav__n{width:44px;height:44px;font-size:16px}
  .srv-nav__t b{font-size:19px;line-height:30px}
  .srv-media img{height:240px}
  .srv-media__n{left:16px;top:16px;width:48px;height:48px;font-size:19px}
  .srv-lead{font-size:18px;line-height:32px}
  .srv-desc{font-size:16px;line-height:30px;margin-bottom:24px}
  .srv-tag{font-size:16px;line-height:26px;padding:8px 16px}
  .srv-actions .btn{width:100%;justify-content:center}
}

/* ============================================================
   SERVICE DETAIL PAGE — หน้ารายละเอียดบริการ
   ============================================================ */
.crumb{font-size:15px;line-height:26px;color:#C9C6C1;margin-bottom:16px}
.crumb a:hover{color:var(--primary)}
.crumb span{color:var(--primary)}

.lead-quote{
  font-family:'Noto Sans Thai', sans-serif;font-size:20px;font-weight:600;line-height:34px;
  color:var(--ink);
}

/* ---- บทนำ 2 คอลัมน์ ---- */
.intro-split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.intro-split__head .sec-badge{margin-bottom:20px}
.intro-split__head h2{margin-bottom:20px}
.intro-split__head h2 em{font-style:normal;color:var(--primary)}
.intro-split__rule{width:72px;height:3px;background:var(--primary);border-radius:2px;margin-bottom:20px}
.intro-split__lead{font-family:'Noto Sans Thai', sans-serif;font-size:20px;font-weight:600;line-height:34px;color:var(--ink)}
.intro-split__body p{font-size:18px;line-height:36px;color:var(--body)}
.intro-split__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.intro-split__facts b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:40px;font-weight:700;line-height:52px;color:var(--primary);letter-spacing:-1px}
.intro-split__facts span{display:block;font-size:16px;line-height:28px;color:var(--muted)}

/* ---- สถานที่ให้บริการ ---- */
.places-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.places-head .sec-badge{margin-bottom:16px}
.places-head h2{margin:0}
.places-head h2 em{font-style:normal;color:var(--primary)}
.places-head p{font-size:18px;line-height:32px;color:var(--muted);max-width:none;white-space:nowrap}
.place-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ptile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);display:block;text-decoration:none}
.ptile__media{aspect-ratio:3/4;overflow:hidden}
.ptile__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,opacity .3s ease;opacity:.92}
.ptile:hover .ptile__media img{transform:scale(1.06);opacity:1}
.ptile__body{
  position:absolute;left:0;right:0;bottom:0;padding:32px 24px 24px;
  background:linear-gradient(180deg,rgba(12,12,18,0) 0%,rgba(12,12,18,.9) 65%);
  display:flex;flex-direction:column;gap:6px;
}
.ptile__n{
  font-family:'Noto Sans Thai', sans-serif;font-size:13px;font-weight:700;line-height:22px;
  color:var(--primary);letter-spacing:2px;
}
.ptile__t{font-family:'Noto Sans Thai', sans-serif;font-size:19px;font-weight:600;line-height:30px;color:var(--white);overflow-wrap:anywhere}

.profile-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.profile-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.profile-cap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:24px}
.profile-cap b{font-family:'Noto Sans Thai', sans-serif;font-size:20px;font-weight:700;line-height:32px;color:var(--ink)}
.profile-bar{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 32px;
}
.profile-bar__ic{width:56px;height:56px;flex:none;border-radius:var(--r-md);background:var(--bg);display:flex;align-items:center;justify-content:center}
.profile-bar__ic svg{width:26px;height:26px;stroke:var(--primary);fill:none;stroke-width:1.7}
.profile-bar__t{flex:1;min-width:240px}
.profile-bar__t b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:20px;font-weight:700;line-height:32px;color:var(--ink)}
.profile-bar__t span{display:block;font-size:17px;line-height:28px;color:var(--muted)}

/* ---- โลโก้แบรนด์เล็กใต้เนื้อหา ---- */
.brand-mark{margin-top:24px}
.brand-mark img{height:52px;width:auto;display:block}

/* ---- แถวโลโก้พันธมิตร ---- */
.logo-row{margin-top:64px;border-top:1px solid var(--line);padding-top:40px}
.logo-row__k{font-family:'Noto Sans Thai', sans-serif;font-size:14px;font-weight:700;line-height:24px;color:var(--muted);letter-spacing:2px;text-align:center;margin-bottom:28px}
.logo-row__list{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.ltile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .2s ease,transform .2s var(--ease-out)}
.ltile:hover{border-color:var(--primary);transform:translateY(-4px)}
.ltile img{height:48px;width:auto;max-width:100%;object-fit:contain;display:block}
.ltile span{font-family:'Noto Sans Thai', sans-serif;font-size:15px;font-weight:600;line-height:24px;color:var(--ink)}

/* ---- รางวัลการันตี (พื้นเข้ม) ---- */
.awards-dark{background:var(--ink)}
.awards-dark__grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.awards-dark__copy h2{color:var(--white);margin-bottom:20px}
.awards-dark__copy h2 em{font-style:normal;color:var(--primary)}
.awards-dark__copy p{font-size:18px;line-height:34px;color:#A9A9B2;margin-bottom:32px}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cert{background:var(--white);border-radius:var(--r-md);padding:24px 16px;text-align:center;transition:transform .2s var(--ease-out)}
.cert:hover{transform:translateY(-4px)}
.cert__img{height:92px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cert__img img{max-height:100%;max-width:100%;object-fit:contain;display:block}
.cert b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:17px;font-weight:700;line-height:28px;color:var(--ink)}
.cert span{display:block;font-size:14px;line-height:24px;color:var(--muted);margin-top:2px}

/* ---- ลูกค้าของเรา ---- */
.cust{background:var(--bg);position:relative;overflow:hidden}
.cust .container{position:relative;z-index:2}
.cust__grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:stretch}
.cust__head{display:flex;flex-direction:column}
.cust__head .sec-badge{align-self:flex-start;margin-bottom:20px}
.cust__head h2{margin-bottom:20px}
.cust__head h2 em{font-style:normal;color:var(--primary)}
.cust__head .sec-rule{margin:0 0 24px}
.cust__media{flex:1 1 0;min-height:0;position:relative;margin-top:32px;border-radius:var(--r-lg);overflow:hidden}
.cust__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cust__pull{
  font-family:'Noto Sans Thai', sans-serif;font-size:24px;font-weight:600;line-height:42px;
  color:var(--ink);
}
.cust__body{display:flex;flex-direction:column;gap:20px;align-self:start}
.cust__item{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 36px 32px 88px;transition:border-color .2s ease;
}
.cust__item:hover{border-color:var(--primary)}
.cust__n{
  position:absolute;left:32px;top:32px;
  font-family:'Noto Sans Thai', sans-serif;font-size:15px;font-weight:700;line-height:26px;
  color:var(--primary);letter-spacing:1px;
}
.cust__item p{font-size:18px;line-height:34px;color:var(--body)}

.promise{background:var(--primary);color:var(--white)}
.promise__inner{text-align:center;max-width:900px;margin:0 auto}
.promise__q{font-family:'Noto Sans Thai', sans-serif;font-size:24px;font-weight:600;line-height:42px;color:var(--white)}
.promise__th{font-family:'Noto Sans Thai', sans-serif;font-size:26px;font-weight:700;line-height:40px;color:var(--white);margin-top:24px}
.promise__en{font-size:18px;line-height:30px;color:#FFE0D6;letter-spacing:1px;margin-top:4px}

.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.rel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.rel:hover{border-color:var(--primary);transform:translateY(-4px)}
.rel__media{aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.rel__media img{width:100%;height:100%;object-fit:cover;display:block}
.rel__body{padding:24px 28px 28px}
.rel__body h3{font-size:22px;line-height:34px;margin-bottom:10px}
.rel__more{font-family:'Noto Sans Thai', sans-serif;font-size:16px;font-weight:600;line-height:26px;color:var(--primary)}

@media (max-width:1024px){
  .intro-split{grid-template-columns:1fr;gap:32px}
  .intro-split__facts{gap:16px}
  .intro-split__facts b{font-size:32px;line-height:44px}
  .places-head{margin-bottom:32px}
  .places-head p{white-space:normal;max-width:420px}
  .place-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .logo-row__list{grid-template-columns:repeat(3,1fr)}
  .awards-dark__grid{grid-template-columns:1fr;gap:40px}
  .cust__grid{grid-template-columns:1fr;gap:32px}
  .cust__media{min-height:280px;margin-top:24px;flex:none}
  .cust::before{font-size:300px;top:-80px}
  .cert-grid{grid-template-columns:repeat(3,1fr)}
  .profile-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.profile-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.profile-cap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:24px}
.profile-cap b{font-family:'Noto Sans Thai', sans-serif;font-size:20px;font-weight:700;line-height:32px;color:var(--ink)}
.profile-bar{padding:24px}
  .promise__q{font-size:21px;line-height:38px}
}

@media (max-width:767px){
  .place-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .intro-split__lead{font-size:18px;line-height:32px}
  .intro-split__body p{font-size:16px;line-height:30px}
  /* มือถือ : ตัวเลข 3 ตัวเดิมเรียงเป็นบรรทัดเปล่า ๆ ดูไม่เป็นกลุ่ม
     เปลี่ยนเป็นการ์ดพื้นครีม 3 ช่องเรียงแถวเดียว */
  .intro-split__facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center;
    margin-top:32px;padding-top:0;border-top:0}
  .intro-split__facts > div{background:var(--bg);border:1px solid var(--line);
    border-radius:var(--r-md);padding:16px 6px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;min-height:104px}
  .intro-split__facts b{font-size:26px;line-height:34px;margin-bottom:2px}
  .intro-split__facts span{font-size:13px;line-height:19px;color:var(--body)}
  .places-head p{font-size:16px;line-height:28px}
  .ptile__body{padding:24px 14px 14px}
  .ptile__t{font-size:15px;line-height:24px}
  .ptile__n{font-size:12px}
  .logo-row{margin-top:40px;padding-top:32px}
  .logo-row__list{grid-template-columns:repeat(2,1fr);gap:12px}
  .ltile{padding:20px 12px;gap:10px}
  .ltile img{height:36px}
  .ltile span{font-size:14px}
  .cert-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cert{padding:20px 12px}
  .cert__img{height:68px}
  .awards-dark__copy p{font-size:16px;line-height:30px}
  .cust__media{flex:1 1 0;min-height:0;position:relative;margin-top:32px;border-radius:var(--r-lg);overflow:hidden}
.cust__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cust__pull{font-size:19px;line-height:34px}
  .cust__item{padding:24px 20px 24px 20px}
  .cust__n{position:static;display:block;margin-bottom:8px}
  .cust__item p{font-size:16px;line-height:30px}
  .cust::before{font-size:200px;top:-50px;left:-12px}
  .icard__pic{width:100%;height:72px}
  .profile-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.profile-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.profile-cap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:24px}
.profile-cap b{font-family:'Noto Sans Thai', sans-serif;font-size:20px;font-weight:700;line-height:32px;color:var(--ink)}
.profile-bar{padding:20px}
  .profile-bar .btn{width:100%;justify-content:center}
  .lead-quote{font-size:18px;line-height:32px}
  .promise__q{font-size:18px;line-height:32px}
  .promise__th{font-size:21px;line-height:34px}
  .promise__en{font-size:16px;line-height:28px}
  .rel-grid{grid-template-columns:1fr}
}

/* ============================================================
   หน้าในบริการ (สถานที่) — เมนูข้าง + เนื้อหา
   ============================================================ */
.detail-layout{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:start}

/* --- เมนูสถานที่ 8 ประเภท --- */
.sidenav{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.sidenav__box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column}
.sidenav__k{font-family:'Noto Sans Thai', sans-serif;font-size:14px;line-height:24px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:0 0 16px;border-bottom:1px solid var(--line);margin:0 0 8px}
.sidenav__item{display:block;position:relative;font-family:'Noto Sans Thai', sans-serif;font-size:17px;line-height:26px;font-weight:500;color:var(--ink);text-decoration:none;padding:14px 32px 14px 16px;border-radius:var(--r-sm);transition:background .2s,color .2s}
.sidenav__item::after{content:'→';position:absolute;right:14px;top:14px;font-size:16px;color:var(--muted);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.sidenav__item:hover{background:var(--white);color:var(--primary)}
.sidenav__item:hover::after{opacity:1;transform:translateX(0);color:var(--primary)}
.sidenav__item.is-active{background:var(--primary);color:var(--white)}
.sidenav__item.is-active::after{opacity:1;transform:translateX(0);color:var(--white)}
.sidenav__cta{background:var(--ink);border-radius:var(--r-lg);padding:32px 24px;display:flex;flex-direction:column;gap:8px}
.sidenav__cta b{font-family:'Noto Sans Thai', sans-serif;font-size:22px;line-height:34px;font-weight:600;color:var(--white);margin:0 0 8px}
.sidenav__cta a,.sidenav__cta span{font-size:16px;line-height:28px;color:rgba(255,255,255,.72);text-decoration:none}
.sidenav__cta a:hover{color:var(--white)}
.sidenav__cta .btn{margin-top:16px;justify-content:center}

/* --- เนื้อหาฝั่งขวา --- */
.detail-main h2{margin:12px 0 16px}
.dtl-h{position:relative;font-family:'Noto Sans Thai', sans-serif;font-size:30px;line-height:42px;font-weight:600;color:var(--ink);margin:64px 0 24px;padding-left:20px}
.dtl-h::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;background:var(--primary);border-radius:2px}
.detail-main .srv-desc{margin:0 0 24px}
.inline-link{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* --- รูปแถวบน 3 ใบ --- */
.hero-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0 0}
.hero-shots .gitem{aspect-ratio:4/3}

/* --- ทำไมต้องเลือกโอวาทแม่บ้าน --- */
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.wcard{counter-increment:wc;position:relative;background:var(--alt);border:1px solid var(--line);border-radius:var(--r-md);padding:32px 32px 32px 80px}
.wcard::before{content:counter(wc,decimal-leading-zero);position:absolute;left:32px;top:30px;font-family:'Noto Sans Thai', sans-serif;font-size:22px;line-height:28px;font-weight:700;color:var(--primary)}
.wgrid{counter-reset:wc}
.wcard b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:19px;line-height:30px;font-weight:600;color:var(--ink);margin:0 0 8px}
.wcard span{display:block;font-size:17px;line-height:30px;color:var(--body)}
.wgrid .wcard:last-child:nth-child(odd){grid-column:1 / -1}

/* --- รายละเอียดงาน --- */
.jobbox{background:var(--ink);border-radius:var(--r-lg);padding:48px;margin:64px 0 0}
.jobbox .dtl-h{color:var(--white);margin-bottom:32px}
.joblist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 32px}
.joblist li{position:relative;font-size:17px;line-height:30px;color:rgba(255,255,255,.82);padding:0 0 0 32px}
.joblist li::before{content:'';position:absolute;left:0;top:11px;width:10px;height:10px;border-radius:50%;border:2px solid var(--primary)}
.jobnote{font-size:14px;line-height:24px;color:rgba(255,255,255,.55);margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}

/* --- บริการย่อย 01-03 --- */
.subsvc{display:grid;grid-template-columns:96px 1fr;gap:24px;padding:32px 0;border-top:1px solid var(--line)}
.subsvc__n{font-family:'Noto Sans Thai', sans-serif;font-size:56px;line-height:56px;font-weight:700;color:var(--primary)}
.subsvc h3{font-size:24px;line-height:36px;font-weight:600;color:var(--ink);margin:0 0 12px}
.subsvc p{font-size:17px;line-height:32px;color:var(--body);margin:0}

/* --- แกลเลอรีผลงาน --- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gitem{display:block;padding:0;margin:0;border:0;background:var(--bg);border-radius:var(--r-md);overflow:hidden;cursor:pointer;aspect-ratio:1/1;position:relative}
.gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.gitem::after{content:'';position:absolute;inset:0;background:rgba(12,12,18,.28);opacity:0;transition:opacity .25s}
.gitem:hover img{transform:scale(1.06)}
.gitem:hover::after{opacity:1}
.gitem--wide{grid-column:span 2;aspect-ratio:2/1}

/* --- ประโยชน์ที่ได้รับ --- */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bcard{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--r-md);padding:32px}
.bcard b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:19px;line-height:30px;font-weight:600;color:var(--ink);margin:0 0 8px}
.bcard p{font-size:17px;line-height:30px;color:var(--body);margin:0}

/* --- คำถามที่พบบ่อย --- */
.faqs{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;font-family:'Noto Sans Thai', sans-serif;font-size:19px;line-height:32px;font-weight:600;color:var(--ink);padding:24px 56px 24px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:16px;top:36px;width:12px;height:12px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform .25s}
.faq[open] summary::after{transform:rotate(-135deg);top:40px}
.faq summary:hover{color:var(--primary)}
.faq p{font-size:17px;line-height:32px;color:var(--body);margin:0;padding:0 56px 24px 0}

/* --- กล่องปิดท้าย --- */
.endcta{background:var(--bg);border-radius:var(--r-lg);padding:48px;margin:64px 0 0}
.endcta h3{font-size:26px;line-height:38px;font-weight:600;color:var(--ink);margin:0 0 16px}
.endcta p{font-size:17px;line-height:32px;color:var(--body);margin:0 0 32px}

@media (max-width:1024px){
  .detail-layout{grid-template-columns:1fr;gap:48px}
  .sidenav{position:static;flex-direction:row;flex-wrap:wrap;gap:24px}
  .sidenav__box{flex:1 1 380px}
  .sidenav__cta{flex:1 1 280px}
  .sidenav__item{font-size:16px;line-height:26px;padding:12px 32px 12px 16px}
  .dtl-h{font-size:26px;line-height:38px;margin:48px 0 24px}
  .hero-shots{gap:16px}
  .wgrid,.bgrid{grid-template-columns:1fr}
  .wcard{padding:24px 24px 24px 72px}
  .wcard::before{left:24px;top:22px}
  .jobbox{padding:32px;margin-top:48px}
  .joblist{grid-template-columns:1fr;gap:12px}
  .subsvc{grid-template-columns:72px 1fr;gap:16px}
  .subsvc__n{font-size:44px;line-height:44px}
  .subsvc h3{font-size:22px;line-height:34px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gitem--wide{grid-column:span 3;aspect-ratio:3/1}
  .endcta{padding:32px;margin-top:48px}
  .endcta h3{font-size:22px;line-height:34px}
}
@media (max-width:767px){
  .detail-layout{gap:32px}
  /* กลับมาเรียงลงล่าง : flex-basis 380/280px ที่ตั้งไว้ตอนเรียงแนวนอน
     จะกลายเป็น "ความสูงขั้นต่ำ" ทำให้เหลือช่องว่างท้ายกล่อง ต้องล้าง */
  .sidenav{flex-direction:column;gap:16px}
  .sidenav__box,.sidenav__cta{flex:none}
  .sidenav__box{padding:16px}
  .sidenav__cta{padding:24px 16px}
  .sidenav__cta b{font-size:19px;line-height:30px}
  .dtl-h{font-size:22px;line-height:34px;margin:40px 0 16px;padding-left:16px}
  .hero-shots{grid-template-columns:1fr;gap:12px}
  .wgrid,.bgrid{gap:16px}
  .wcard{padding:20px 20px 20px 20px}
  .wcard::before{position:static;display:block;margin:0 0 8px}
  .bcard{padding:20px}
  .jobbox{padding:24px 20px;margin-top:40px}
  .subsvc{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .subsvc__n{font-size:34px;line-height:34px}
  .subsvc h3{font-size:19px;line-height:30px}
  .gal{grid-template-columns:repeat(2,1fr);gap:12px}
  .gitem--wide{grid-column:span 2;aspect-ratio:2/1}
  .faq summary{font-size:17px;line-height:30px;padding:20px 40px 20px 0}
  .faq summary::after{right:8px;top:32px;width:10px;height:10px}
  .faq[open] summary::after{top:36px}
  .faq p{padding-right:0;padding-bottom:20px}
  .endcta{padding:24px 20px;margin-top:40px}
  .endcta h3{font-size:19px;line-height:30px}
}

/* ไอคอนบริการย่อย */
.subsvc__ic{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.subsvc__ic img{width:72px;height:72px;object-fit:contain;display:block}
@media (max-width:1024px){.subsvc__ic img{width:56px;height:56px}}
@media (max-width:767px){.subsvc__ic{flex-direction:row;align-items:center;gap:16px}.subsvc__ic img{width:48px;height:48px}}

/* ============================================================
   หน้าสินค้า — หมวดหมู่ด้านซ้าย + กริดสินค้า
   ============================================================ */
.page-hero--sm{min-height:46vh}
.shop-layout{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}

/* --- แถบหมวดหมู่ --- */
.catnav{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.catnav__bar{display:flex;align-items:center;gap:12px;background:var(--primary);color:var(--white);
  font-family:'Noto Sans Thai', sans-serif;font-size:18px;line-height:28px;font-weight:600;
  padding:18px 24px;border-radius:var(--r-md) var(--r-md) 0 0}
.catnav__bar svg{width:22px;height:22px;flex:none;fill:var(--white)}
.catnav__list{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);overflow:hidden;background:var(--white)}
.catnav__item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font-family:'Noto Sans Thai', sans-serif;font-size:16px;line-height:26px;font-weight:500;
  color:var(--body);text-decoration:none;text-align:left;background:none;border:0;cursor:pointer;
  padding:14px 20px;border-bottom:1px solid var(--line);transition:background .2s,color .2s}
.catnav__list > *:last-child .catnav__item,.catnav__list > a:last-child{border-bottom:0}
.catnav__item:hover{background:var(--alt);color:var(--primary);padding-left:26px}
.catnav__item.is-active{background:var(--bg);color:var(--primary);font-weight:600;box-shadow:inset 3px 0 0 var(--primary)}
.catnav__caret{width:8px;height:8px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .25s}
.catnav__item[aria-expanded="true"] .catnav__caret{transform:rotate(45deg)}
.catnav__sub{display:none;background:var(--alt);border-bottom:1px solid var(--line);padding:8px 0}
.catnav__item[aria-expanded="true"] + .catnav__sub{display:block}
.catnav__sub a{display:block;font-size:15px;line-height:24px;color:var(--muted);text-decoration:none;padding:8px 20px 8px 36px}
.catnav__sub a:hover{color:var(--primary)}
.catnav__cta{background:var(--ink);border-radius:var(--r-lg);padding:32px 24px;display:flex;flex-direction:column;gap:8px}
.catnav__cta b{font-family:'Noto Sans Thai', sans-serif;font-size:22px;line-height:34px;font-weight:600;color:var(--white);margin:0 0 8px}
.catnav__cta a,.catnav__cta span{font-size:16px;line-height:28px;color:rgba(255,255,255,.72);text-decoration:none}
.catnav__cta a:hover{color:var(--white)}
.catnav__cta .btn{margin-top:16px;justify-content:center}

/* --- แถบเครื่องมือ --- */
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:0 0 24px;margin:0 0 32px;border-bottom:1px solid var(--line)}
.shop-bar__count{font-size:16px;line-height:28px;color:var(--muted)}
.shop-bar__count b{color:var(--ink);font-weight:600}
.shop-sort{display:flex;align-items:center;gap:12px}
.shop-sort span{font-size:16px;line-height:28px;color:var(--muted)}
.shop-sort select{font-family:'Noto Sans Thai',sans-serif;font-size:16px;line-height:28px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;cursor:pointer}

/* --- กริดสินค้า --- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;text-decoration:none;transition:border-color .25s ease,transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.prod:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 12px 32px rgba(23,23,31,.08)}
.prod__media{background:var(--bg);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:24px}
.prod__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transition:transform .35s var(--ease-out)}
.prod:hover .prod__media img{transform:scale(1.05)}
.prod__body{flex:1 1 auto;display:flex;flex-direction:column;padding:20px}
.prod__name{font-family:'Noto Sans Thai',sans-serif;font-size:16px;line-height:26px;font-weight:500;overflow-wrap:anywhere;
  color:var(--ink);margin:0 0 16px;flex:1 1 auto}
.prod:hover .prod__name{color:var(--primary)}
.prod__foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid var(--line)}
.prod__price{font-family:'Noto Sans Thai', sans-serif;font-size:19px;line-height:30px;font-weight:700;color:var(--primary)}
.prod__more{font-size:14px;line-height:24px;color:var(--muted)}
.prod:hover .prod__more{color:var(--ink)}
.shop-note{margin:40px 0 0;padding:20px 24px;background:var(--bg);border-radius:var(--r-md);
  font-size:15px;line-height:26px;color:var(--muted)}

@media (max-width:1024px){
  .page-hero--sm{min-height:38vh}
  .shop-layout{grid-template-columns:1fr;gap:40px}
  .catnav{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:24px}
  .catnav__wrap{flex:1 1 360px}
  .catnav__cta{flex:1 1 280px}
  .prod-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .prod__media{padding:16px}
  .shop-note{margin-top:32px}
}
@media (max-width:767px){
  .page-hero--sm{min-height:34vh}
  .shop-layout{gap:32px}
  .catnav{flex-direction:column;gap:16px}
  .catnav__bar{font-size:17px;line-height:28px;padding:14px 16px}
  .catnav__item{font-size:15px;line-height:24px;padding:12px 16px}
  .catnav__item:hover{padding-left:20px}
  .catnav__cta{padding:24px 16px}
  .catnav__cta b{font-size:19px;line-height:30px}
  .shop-bar{gap:12px;padding-bottom:16px;margin-bottom:24px}
  .shop-bar__count,.shop-sort span,.shop-sort select{font-size:15px;line-height:26px}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .prod__body{padding:14px}
  .prod__name{font-size:15px;line-height:24px;margin-bottom:12px}
  .prod__foot{padding-top:12px;flex-direction:column;align-items:flex-start;gap:4px}
  .prod__price{font-size:17px;line-height:28px}
  .shop-note{padding:16px;font-size:14px;line-height:24px}
}

/* ============================================================
   หน้าพื้นที่ให้บริการ — ชลบุรี / EEC
   ============================================================ */
.area-hero__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.btn--ghost-light{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.55)}
.btn--ghost-light:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary)}

/* --- ตัวเลข --- */
.area-stats{background:var(--ink)}
.area-stats .container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:48px;padding-bottom:48px}
.astat{text-align:center;position:relative}
.astat + .astat::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.16)}
.astat b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:44px;line-height:56px;font-weight:700;color:var(--primary)}
.astat span{display:block;font-size:17px;line-height:30px;color:rgba(255,255,255,.7)}

/* --- แนะนำ + แกลเลอรี --- */
.area-intro{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.area-intro .sec-rule{margin:0 0 24px}
.area-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.area-gal .gitem{aspect-ratio:1/1}

/* --- บริการเด่น 3 อันดับ --- */
.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.t3{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 32px;position:relative;overflow:hidden}
.t3__n{position:absolute;right:20px;top:12px;font-family:'Noto Sans Thai', sans-serif;font-size:64px;line-height:76px;font-weight:700;color:#E0DCD2}
.t3 h3{position:relative;font-size:24px;line-height:36px;font-weight:600;color:var(--ink);margin:0 0 12px;padding-right:72px}
.t3 p{font-size:17px;line-height:30px;color:var(--body);margin:0}
.topzone{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;margin:32px 0 0;padding:28px 32px;
  background:var(--primary);border-radius:var(--r-lg)}
.topzone__k{font-size:16px;line-height:28px;color:rgba(255,255,255,.85)}
.topzone b{font-family:'Noto Sans Thai', sans-serif;font-size:26px;line-height:38px;font-weight:700;color:var(--white)}
.topzone__link{margin-left:auto;font-size:16px;line-height:28px;font-weight:600;color:var(--white);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.topzone__link:hover{border-color:var(--white)}

/* --- บริการหลัก --- */
.sec-head__lead{font-size:18px;line-height:32px;color:var(--muted);margin:16px 0 0}
.sec-head--gap{margin-top:96px}
.core3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ccard{background:var(--alt);border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:var(--r-md);padding:32px}
.ccard h3{font-size:24px;line-height:36px;font-weight:600;color:var(--ink);margin:0 0 20px}
.ccard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ccard li{position:relative;font-size:17px;line-height:30px;color:var(--body);padding-left:28px}
.ccard li::before{content:'';position:absolute;left:0;top:12px;width:8px;height:8px;border-radius:50%;background:var(--primary)}

/* --- ทำไม EEC --- */
.eec-dark{background:var(--ink)}
.eec-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:stretch}
.eec-copy{display:flex;flex-direction:column;align-items:flex-start}
.eec-copy .btn{margin-top:32px}
/* รูปยืดเต็มพื้นที่ที่เหลือ ให้คอลัมน์ซ้าย-ขวาจบที่บรรทัดเดียวกัน */
.eec-media{margin:40px 0 0;width:100%;flex:1 1 0;min-height:0;position:relative;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.eec-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.eec-list{list-style:none;counter-reset:ec;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.eec-list li{counter-increment:ec;position:relative;padding:20px 0 20px 72px;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:17px;line-height:30px;color:rgba(255,255,255,.82)}
.eec-list li:last-child{border-bottom:0}
.eec-list li::before{content:counter(ec,decimal-leading-zero);position:absolute;left:0;top:20px;
  font-family:'Noto Sans Thai', sans-serif;font-size:22px;line-height:30px;font-weight:700;color:var(--primary)}

/* --- ขอบเขตงาน --- */
.scope-grid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
.scopebox{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px}
.ticklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.ticklist li{position:relative;font-size:17px;line-height:30px;color:var(--body);padding-left:36px}
.ticklist li::before{content:'';position:absolute;left:0;top:9px;width:12px;height:7px;
  border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg)}

/* --- 6 ขั้นตอน --- */
.steps6{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps6 li{display:flex;gap:16px;align-items:flex-start;background:var(--alt);border:1px solid var(--line);
  border-radius:var(--r-md);padding:28px 24px}
.steps6__n{font-family:'Noto Sans Thai', sans-serif;font-size:24px;line-height:30px;font-weight:700;color:var(--primary);flex:none}
.steps6__t{font-size:17px;line-height:30px;color:var(--body)}
.work3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.w3{position:relative;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--primary);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:32px}
.w3 h3{font-size:20px;line-height:32px;font-weight:600;color:var(--ink);margin:0 0 16px;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.w3 p{font-size:16px;line-height:28px;color:var(--body);margin:0 0 8px}
.w3 p:last-child{margin-bottom:0}

/* --- ราคา --- */
.pricebox{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:56px}
.pricebox__head h2{margin:12px 0 16px}
.pricebox__head p{font-size:17px;line-height:32px;color:var(--body);margin:0}
.pricebox__list{display:flex;flex-direction:column;gap:20px}
.pline{padding:20px 24px;background:var(--bg);border-radius:var(--r-md);border-left:4px solid var(--primary)}
.pline b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:19px;line-height:30px;font-weight:600;color:var(--ink);margin:0 0 4px}
.pline span{display:block;font-size:17px;line-height:30px;color:var(--body)}

/* --- พื้นที่ให้บริการ --- */
#areas .zone + .zone{margin-top:48px}
.zone__k{display:flex;align-items:center;gap:16px;font-family:'Noto Sans Thai', sans-serif;
  font-size:26px;line-height:38px;font-weight:600;color:var(--ink);margin:0 0 24px}
.zone__k span{font-family:'Noto Sans Thai',sans-serif;font-size:15px;line-height:24px;font-weight:500;color:var(--muted);
  background:var(--bg);border-radius:100px;padding:4px 14px}
.zone__chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{font-size:16px;line-height:26px;color:var(--body);background:var(--alt);
  border:1px solid var(--line);border-radius:100px;padding:8px 18px}
.chip.is-top{background:var(--primary);border-color:var(--primary);color:var(--white);font-weight:600}

/* --- ลูกค้า + รีวิว --- */
.clogos{display:grid;grid-template-columns:repeat(7,1fr);gap:20px}
.clogo{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:16px}
.clogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{margin:0;position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:56px 32px 32px}
.rev::before{content:'"';position:absolute;left:28px;top:16px;font-family:'Noto Sans Thai', sans-serif;
  font-size:72px;line-height:72px;color:var(--primary);opacity:.25}
.rev p{font-size:17px;line-height:32px;color:var(--body);margin:0}

/* --- FAQ กว้าง + ผลงาน --- */
.faqs--wide{max-width:1000px;margin:0 auto}
.port-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* --- แผนที่ --- */
.mapbox{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.mapbox__copy h2{margin:12px 0 24px}
.mapbox__addr{font-size:18px;line-height:32px;color:var(--ink);font-weight:600;margin:0 0 12px}
.mapbox__line{font-size:17px;line-height:30px;color:var(--body);margin:0 0 32px}
.mapbox__cta{display:flex;flex-wrap:wrap;gap:16px}
.mapbox__map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.mapbox__map img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.quote-line{font-size:17px;line-height:30px;color:var(--body);margin:0 0 32px;
  padding:16px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.quote-line b{color:var(--primary);font-weight:700}

@media (max-width:1024px){
  .area-stats .container{padding-top:32px;padding-bottom:32px}
  .astat b{font-size:34px;line-height:48px}
  .area-intro,.eec-grid,.pricebox,.mapbox{grid-template-columns:1fr;gap:40px}
  .area-hero{min-height:620px}
  .hero-trust{flex-wrap:wrap}
  .eec-media{max-width:520px;flex:none;aspect-ratio:16/10;min-height:0}
  .pricebox{padding:40px}
  .area-gal{grid-template-columns:repeat(4,1fr);gap:12px}
  .top3,.core3,.revs{grid-template-columns:1fr;gap:20px}
  .t3{padding:32px 24px}
  .topzone{padding:24px}
  .topzone__link{margin-left:0}
  .sec-head--gap{margin-top:64px}
  .scope-grid{grid-template-columns:1fr}
  .scopebox{padding:32px}
  .steps6,.work3{grid-template-columns:1fr;gap:16px}
  .clogos{grid-template-columns:repeat(4,1fr);gap:16px}
  .port-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:767px){
  .area-hero__cta{gap:12px;margin-top:24px}
  .area-stats .container{grid-template-columns:1fr;gap:20px;padding-top:24px;padding-bottom:24px}
  .astat + .astat::before{display:none}
  .astat + .astat{padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
  .astat b{font-size:30px;line-height:42px}
  .astat span{font-size:16px;line-height:28px}
  .area-intro,.eec-grid,.pricebox,.mapbox{gap:32px}
  .area-gal{grid-template-columns:repeat(2,1fr)}
  .t3{padding:24px 20px}
  .t3__n{font-size:56px;line-height:64px;right:12px}
  .t3 h3{font-size:19px;line-height:30px;padding-right:44px}
  .topzone{padding:20px;gap:8px;flex-direction:column;align-items:flex-start}
  .topzone b{font-size:22px;line-height:34px}
  .ccard{padding:24px 20px}
  .ccard h3{font-size:19px;line-height:30px}
  .eec-list li{padding:16px 0 16px 48px}
  .eec-list li::before{font-size:19px;top:16px}
  .scopebox{padding:24px 20px}
  .steps6 li{padding:20px 16px}
  .pricebox{padding:24px 20px}
  .pline{padding:16px}
  #areas .zone + .zone{margin-top:32px}
  .zone__k{font-size:22px;line-height:34px;margin-bottom:16px}
  .zone__chips{gap:8px}
  .chip{font-size:15px;line-height:24px;padding:6px 14px}
  .clogos{grid-template-columns:repeat(3,1fr);gap:12px}
  .rev{padding:48px 20px 24px}
  .port-grid{grid-template-columns:1fr;gap:16px}
  .mapbox__addr{font-size:17px;line-height:30px}
  .quote-line{margin-bottom:24px;padding:14px 16px;font-size:16px;line-height:28px}
}

/* --- hero ชลบุรี : ให้คนอยู่ฝั่งขวา ข้อความอยู่ฝั่งซ้าย --- */
.area-hero{background-position:65% center}
.area-hero .page-hero__overlay{background:linear-gradient(90deg,rgba(12,12,18,.92) 0%,rgba(12,12,18,.78) 38%,rgba(12,12,18,.42) 66%,rgba(12,12,18,.25) 100%)}
.area-hero{min-height:760px}
.area-hero .page-hero__inner{max-width:1040px}
@media (max-width:1024px){
  .area-hero{background-position:70% center}
  .area-hero .page-hero__overlay{background:linear-gradient(180deg,rgba(12,12,18,.72) 0%,rgba(12,12,18,.86) 100%)}
}
@media (max-width:767px){
  .area-hero{background-position:72% center}
}

/* ============================================================
   หน้าลูกค้าของเรา — กำแพงโลโก้
   ============================================================ */
.cust-hero{min-height:460px}
.logo-wall{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
.lw{position:relative;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14px;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.lw img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.68;transition:filter .3s,opacity .3s}
.lw:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,23,31,.08)}
.lw:hover img{filter:none;opacity:1}

@media (max-width:1400px){.logo-wall{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (max-width:1024px){
  .cust-hero{min-height:360px}
  .logo-wall{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .lw{padding:12px}
  .lw img{filter:none;opacity:1}
}
@media (max-width:767px){
  .cust-hero{min-height:300px}
  .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .lw{padding:10px;border-radius:var(--r-sm)}
}

/* ============================================================
   หน้าบทความ
   ============================================================ */
.art-hero{min-height:460px}
.art-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;
  padding:0 0 24px;margin:0 0 40px;border-bottom:1px solid var(--line)}
.art-tabs{display:flex;gap:8px}
.art-tab{font-family:'Noto Sans Thai', sans-serif;font-size:17px;line-height:28px;font-weight:600;
  color:var(--body);text-decoration:none;padding:10px 24px;border:1px solid var(--line);
  border-radius:100px;background:var(--white);transition:background .2s,color .2s,border-color .2s}
.art-tab:hover{border-color:var(--primary);color:var(--primary)}
.art-tab.is-active{background:var(--primary);border-color:var(--primary);color:var(--white)}
.art-grid{transition:opacity .22s var(--ease-out),translate .22s var(--ease-out)}
.art-grid--switching{opacity:0;translate:0 10px}
.art-tools{display:flex;align-items:center;gap:20px}
.art-search{position:relative;display:flex;align-items:center}
.art-search svg{position:absolute;left:16px;width:20px;height:20px;fill:var(--muted);pointer-events:none}
.art-search input{font-family:'Noto Sans Thai',sans-serif;font-size:16px;line-height:28px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:100px;padding:10px 20px 10px 44px;width:300px}
.art-search input:focus{outline:none;border-color:var(--primary)}
.art-count{font-size:16px;line-height:28px;color:var(--muted);white-space:nowrap}
.art-count b{color:var(--ink);font-weight:600}

/* การ์ดบทความ/ผลงาน : 3 ช่องต่อแถว ทุกใบกล่องเดียวกัน ไม่มีใบไหนกินพื้นที่ 2 ช่อง */
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.art{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;text-decoration:none;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.art:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 12px 32px rgba(23,23,31,.08)}
.art__media{aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.art__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.art:hover .art__media img{transform:scale(1.05)}
.art__body{flex:1 1 auto;display:flex;flex-direction:column;padding:20px}
.art__title{font-family:'Noto Sans Thai', sans-serif;font-size:17px;line-height:28px;font-weight:600;
  color:var(--ink);margin:0 0 16px;flex:1 1 auto}
.art:hover .art__title{color:var(--primary)}
.art__more{font-size:14px;line-height:24px;font-weight:600;color:var(--primary)}

.art[hidden]{display:none}
.art-empty{margin:48px 0 0;text-align:center;font-size:18px;line-height:32px;color:var(--muted)}
.art-empty[hidden]{display:none}

@media (max-width:1024px){
  .art-hero{min-height:360px}
  .art-bar{gap:16px;margin-bottom:32px}
  .art-search input{width:240px}
  .art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (max-width:767px){
  .art-hero{min-height:300px}
  .art-bar{flex-direction:column;align-items:stretch;gap:16px}
  .art-tabs{gap:8px}
  .art-tab{flex:1 1 0;text-align:center;font-size:16px;line-height:26px;padding:10px 16px}
  .art-tools{flex-direction:column;align-items:stretch;gap:12px}
  .art-search input{width:100%}
  .art-count{text-align:right}
  .art-grid{grid-template-columns:1fr;gap:16px}
  .art__body{padding:16px}
  .art__title{font-size:16px;line-height:26px;margin-bottom:12px}
}
button.art-tab{cursor:pointer;font-family:'Noto Sans Thai', sans-serif}
.art-tabs{flex-wrap:wrap}

/* --- hero หน้าผลงาน : คนอยู่ฝั่งขวา ข้อความอยู่ฝั่งซ้าย --- */
.port-hero{min-height:560px;background-position:60% center}
.port-hero .page-hero__overlay{background:linear-gradient(90deg,rgba(12,12,18,.90) 0%,rgba(12,12,18,.74) 36%,rgba(12,12,18,.38) 64%,rgba(12,12,18,.20) 100%)}
@media (max-width:1024px){
  .port-hero{min-height:420px;background-position:66% center}
  .port-hero .page-hero__overlay{background:linear-gradient(180deg,rgba(12,12,18,.66) 0%,rgba(12,12,18,.86) 100%)}
}
@media (max-width:767px){.port-hero{min-height:340px;background-position:70% center}}
@media (max-width:767px){
  .art-tabs--filters .art-tab{flex:0 0 auto;padding:8px 16px;font-size:15px;line-height:24px}
  .art-tabs--filters{gap:8px;justify-content:flex-start}
}

/* ============================================================
   หน้า Download Catalog
   ============================================================ */
.cat-hero{min-height:420px}
.cat-top{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.cat-cover{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);min-height:360px;display:flex;align-items:center;justify-content:center}
.cat-cover img{width:100%;height:auto;display:block}
.cat-copy h2{margin:12px 0 0}
.cat-copy .srv-desc{margin:0 0 32px}
.cat-dl{display:flex;flex-wrap:wrap;gap:16px}

.store-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.store{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 24px;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.store:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 12px 32px rgba(23,23,31,.08)}
.store__img{width:100%;height:120px;display:flex;align-items:center;justify-content:center}
.store__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.store__n{font-family:'Noto Sans Thai', sans-serif;font-size:18px;line-height:28px;font-weight:600;color:var(--ink)}
.store:hover .store__n{color:var(--primary)}

.cat-pages{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.catpg{aspect-ratio:1/1.414;background:var(--bg);border:1px solid var(--line)}
.catpg img{object-fit:contain}

@media (max-width:1024px){
  .cat-hero{min-height:340px}
  .cat-top{grid-template-columns:1fr;gap:32px}
  .store-row{grid-template-columns:repeat(2,1fr);gap:20px}
  .store__img{height:96px}
  .cat-pages{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:767px){
  .cat-hero{min-height:280px}
  .cat-cover{min-height:260px}
  .cat-top{gap:24px}
  .cat-dl{gap:12px}
  .cat-dl .btn{width:100%;justify-content:center}
  .store-row{gap:12px}
  .store{padding:20px 14px;gap:12px}
  .store__img{height:72px}
  .store__n{font-size:16px;line-height:26px}
  .cat-pages{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* --- หน้าดาวน์โหลด : แท็บ 3 เอกสาร --- */
.dl-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 56px}
.dl-tab{display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 28px;
  transition:background .2s,border-color .2s,transform .2s}
.dl-tab:hover{border-color:var(--primary);transform:translateY(-2px)}
.dl-tab__k{font-family:'Noto Sans Thai', sans-serif;font-size:13px;line-height:20px;font-weight:500;letter-spacing:1px;color:var(--muted)}
.dl-tab__n{font-family:'Noto Sans Thai', sans-serif;font-size:22px;line-height:34px;font-weight:700;color:var(--ink)}
.dl-tab.is-active{background:var(--primary);border-color:var(--primary)}
.dl-tab.is-active .dl-tab__k{color:#FFE3D8}
.dl-tab.is-active .dl-tab__n{color:var(--white)}
.dl-panel{display:none}
.dl-panel.is-active{display:block}
.dtl-h__en{font-family:'Noto Sans Thai',sans-serif;font-size:15px;line-height:24px;font-weight:500;
  color:var(--muted);background:var(--bg);border-radius:100px;padding:4px 14px;margin-left:12px;vertical-align:middle}
.dl-panel .dtl-h{margin-top:64px}

@media (max-width:1024px){
  .dl-tabs{grid-template-columns:1fr;gap:12px;margin-bottom:40px}
  .dl-tab{padding:18px 20px}
  .dl-tab__n{font-size:19px;line-height:30px}
  .dl-panel .dtl-h{margin-top:48px}
}
@media (max-width:767px){
  .dl-tab{padding:16px}
  .dl-tab__n{font-size:17px;line-height:28px}
  .dtl-h__en{display:block;margin:6px 0 0;width:max-content}
  .dl-panel .dtl-h{margin-top:40px}
}

/* ============================================================
   หน้าติดต่อเรา
   ============================================================ */
.ct-hero{min-height:420px}
.branch-panel__map--live{min-height:480px;padding:0}
.branch-panel__map--live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ct-addr{font-size:17px;line-height:30px;color:var(--body);margin:0 0 24px}
.ct-list{list-style:none;margin:0;padding:0}
.ct-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ct-list li:last-child{border-bottom:0}
.ct-ic{flex:none;width:42px;height:42px;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center}
.ct-ic svg{width:22px;height:22px;fill:var(--primary)}
.ct-ic--line svg{fill:var(--primary);stroke:none}
.ct-k{flex:none;width:104px;font-size:15px;line-height:26px;color:var(--muted)}
.ct-v{font-size:17px;line-height:28px;font-weight:500;color:var(--ink);text-decoration:none;word-break:break-word}
.ct-v:hover{color:var(--primary)}

.sales-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sales{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 20px;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.sales:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 12px 32px rgba(23,23,31,.08)}
.sales__img{width:100%;height:190px;border-radius:var(--r-md);overflow:hidden;background:var(--bg);
  display:flex;align-items:center;justify-content:center}
.sales__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.sales__n{font-family:'Noto Sans Thai', sans-serif;font-size:19px;line-height:30px;font-weight:600;color:var(--ink)}
.sales__p{font-family:'Noto Sans Thai', sans-serif;font-size:20px;line-height:30px;font-weight:700;color:var(--primary)}

@media (max-width:1024px){
  .ct-hero{min-height:340px}
  .branch-panel__map--live{min-height:0;aspect-ratio:1.4}
  .sales-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .sales__img{height:160px}
}
@media (max-width:767px){
  .ct-hero{min-height:280px}
  .branch-panel__map--live{aspect-ratio:1.1}
  .ct-list li{flex-wrap:wrap;gap:8px 12px}
  .ct-k{width:auto;flex:1 1 100%;padding-left:48px;margin-top:-6px;order:3}
  .sales-grid{grid-template-columns:1fr;gap:16px}
  .sales{flex-direction:row;align-items:center;text-align:left;padding:16px;gap:16px}
  .sales__img{width:96px;height:96px;flex:none}
  .sales__n{font-size:17px;line-height:28px}
  .sales__p{font-size:18px;line-height:28px;margin-left:auto}
}

/* ============================================================
   หน้า Owatman
   ============================================================ */
.om-hero{min-height:560px;background-position:62% center}
.om-hero .page-hero__overlay{background:linear-gradient(90deg,rgba(12,12,18,.92) 0%,rgba(12,12,18,.76) 38%,rgba(12,12,18,.40) 66%,rgba(12,12,18,.22) 100%)}
.om-intro{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:center}
.om-intro h2{margin:12px 0 0}
.om-intro .sec-rule{margin:16px 0 24px}
.om-intro .srv-desc{margin:0 0 20px}
.om-intro__media{border-radius:var(--r-lg);overflow:hidden;background:var(--bg);border:1px solid var(--line);aspect-ratio:4/3}
.om-intro__media img{width:100%;height:100%;object-fit:cover;display:block}

.om-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.omc{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.omc:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 12px 32px rgba(23,23,31,.08)}
.omc__media{aspect-ratio:3/2;overflow:hidden;background:var(--bg)}
.omc__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.omc:hover .omc__media img{transform:scale(1.05)}
.omc__body{flex:1 1 auto;padding:28px 24px}
.omc__body h3{font-size:22px;line-height:34px;font-weight:600;color:var(--ink);margin:0 0 12px}
.omc__body p{font-size:17px;line-height:30px;color:var(--body);margin:0}

.eec-list li b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:19px;line-height:30px;font-weight:600;color:var(--white);margin:0 0 4px}

.om-team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.omt{position:relative;background:var(--alt);border:1px solid var(--line);border-top:4px solid var(--primary);
  border-radius:var(--r-md);padding:32px 24px}
.omt__n{font-family:'Noto Sans Thai', sans-serif;font-size:32px;line-height:40px;font-weight:700;color:var(--primary)}
.omt h3{font-size:20px;line-height:32px;font-weight:600;color:var(--ink);margin:8px 0 16px}
.omt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.omt li{position:relative;font-size:16px;line-height:28px;color:var(--body);padding-left:24px}
.omt li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--primary)}

.om-steps-wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.om-steps-media{border-radius:var(--r-lg);overflow:hidden;background:var(--white);border:1px solid var(--line);
  aspect-ratio:3/4;position:sticky;top:96px}
.om-steps-media img{width:100%;height:100%;object-fit:cover;display:block}
.steps6--stack{grid-template-columns:1fr;gap:16px}
.steps6--stack li{background:var(--white)}
.steps6__t b{font-family:'Noto Sans Thai', sans-serif;font-weight:600;color:var(--ink)}
.jobnote--light{color:var(--muted);border-top-color:var(--line);margin-top:24px;padding-top:20px}

@media (max-width:1024px){
  .om-hero{min-height:420px;background-position:68% center}
  .om-hero .page-hero__overlay{background:linear-gradient(180deg,rgba(12,12,18,.68) 0%,rgba(12,12,18,.88) 100%)}
  .om-intro,.om-steps-wrap{grid-template-columns:1fr;gap:32px}
  .om-steps-media{position:static;aspect-ratio:16/9}
  .om-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .om-team{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:767px){
  .om-hero{min-height:340px;background-position:72% center}
  .om-grid,.om-team{grid-template-columns:1fr;gap:16px}
  .omc__body{padding:20px}
  .omc__body h3{font-size:19px;line-height:30px}
  .omt{padding:24px 20px}
}

/* --- ตัวเลือกภาษาบนแถบด้านบน --- */
.lang--top{font-size:14px;line-height:22px;font-weight:600;color:#CFCFD4;
  padding-left:20px;margin-left:-8px;border-left:1px solid rgba(255,255,255,.22)}
.lang--top .is-active{color:var(--white)}
.lang--top a{color:#CFCFD4;text-decoration:none}
.lang--top a:hover{color:var(--white)}
@media (max-width:1024px){
  .lang--top{padding-left:0;margin-left:0;border-left:0}
}

/* --- เมนูแคบลงอีกสเต็ปก่อนยุบเป็น burger --- */
@media (max-width:1250px){
  .nav{gap:13px}
  .nav__link{font-size:14px}
  .header .btn{padding:10px 14px;font-size:14px}
}

/* --- เมนูมือถือ (กด burger) --- */
@media (max-width:1024px){
  .nav{opacity:0;transform:translateY(-8px);
    transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),display 200ms allow-discrete}
  .nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;opacity:1;transform:translateY(0);
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 18px 40px rgba(23,23,31,.14);padding:12px 0;max-height:calc(100vh - 120px);overflow-y:auto}
  @starting-style{
    .nav.is-open{opacity:0;transform:translateY(-8px)}
  }
  .nav.is-open .nav__item{display:block;border-bottom:1px solid var(--line)}
  .nav.is-open .nav__item:last-child{border-bottom:0}
  .nav.is-open .nav__link{display:block;color:var(--ink);font-size:17px;line-height:28px;padding:14px 32px}
  .nav.is-open .nav__caret{float:right;color:var(--muted)}
  .nav.is-open .dropdown{position:static;display:block;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;background:var(--alt);padding:4px 0;min-width:0}
  .nav.is-open .dropdown a{padding:10px 32px 10px 52px;font-size:16px;line-height:26px}
  .burger.is-active{background:var(--primary);border-color:var(--primary)}
  .burger.is-active span{background:var(--white)}
  .header{position:relative}

  /* จอแคบไม่มีช่องว่างข้างให้ชิดขอบ — กลับไปเป็นปุ่มกลมมุมขวาล่าง */
  .floats{
    right:16px;bottom:88px;top:auto;transform:none;
    background:none;box-shadow:none;border-radius:0;overflow:visible;gap:10px;
  }
  .float{width:48px;height:48px;border-radius:50%}
  .float--top{border-top:0;background:var(--white);color:var(--ink);border:1px solid var(--line)}
  .float--top:hover{background:var(--ink);color:var(--white)}
}
@media (max-width:767px){
  .nav.is-open .nav__link{padding:12px 20px}
  .nav.is-open .dropdown a{padding:10px 20px 10px 40px}
}
.nav__item--mobile{display:none}
@media (max-width:1024px){.nav.is-open .nav__item--mobile{display:block}}

/* มือถือ : ซ่อนแถบบนแต่ยังให้เลือกภาษาได้ในเมนู */
@media (max-width:767px){
  .nav.is-open .lang--mob{display:flex;gap:6px;justify-content:center;
    padding:16px 20px;border-top:1px solid var(--line);font-size:16px;line-height:26px;color:var(--muted)}
  .nav.is-open .lang--mob .is-active{color:var(--ink);font-weight:700}
  .nav.is-open .lang--mob a{color:var(--muted);text-decoration:none;font-weight:600}
}
.lang--mob{display:none}

/* ============================================================
   หน้ารายละเอียดสินค้า
   ============================================================ */
.pd-top{background:var(--ink);padding-top:157px;padding-bottom:28px}
.pd-top .crumb{margin-bottom:0}
.crumb--dark{color:rgba(255,255,255,.62)}
.crumb--dark a{color:rgba(255,255,255,.62)}
.crumb--dark a:hover{color:var(--white)}
.crumb--dark span{color:var(--white)}

.pd{display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:stretch}
.pd__media{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:48px;display:flex;align-items:center;justify-content:center;min-width:0}
.pd__img{width:100%;height:100%;min-width:0;min-height:0;background:transparent;border:0;display:flex;align-items:center;justify-content:center;border-radius:0}
.pd__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pd__img::after{display:none}

.pd__eyebrow{font-size:15px;line-height:26px;color:var(--muted);margin:0 0 20px}
.pd__k{font-size:15px;line-height:26px;color:var(--muted)}
.pd__name{font-size:34px;line-height:50px;font-weight:700;color:var(--ink);margin:4px 0 32px}
.pd__row{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0 0 24px}
.pd__label{flex:none;width:80px;font-size:16px;line-height:28px;color:var(--muted)}
.pd__sizes{display:flex;gap:12px;flex-wrap:wrap}
.pd__size{font-family:'Noto Sans Thai', sans-serif;font-size:16px;line-height:26px;font-weight:600;
  color:var(--body);background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:10px 24px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pd__size:hover{border-color:var(--primary);color:var(--primary)}
.pd__size.is-active{background:var(--primary);border-color:var(--primary);color:var(--white)}
.pd__price{font-family:'Noto Sans Thai', sans-serif;font-size:40px;line-height:56px;font-weight:700;
  color:var(--primary);margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.pd__qty{display:flex;align-items:center;gap:12px}
.pd__step{width:42px;height:42px;font-size:20px;line-height:1;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.pd__step:hover{border-color:var(--primary);color:var(--primary)}
.pd__qty input{width:72px;height:42px;text-align:center;font-family:'Noto Sans Thai', sans-serif;
  font-size:17px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.pd__unit{font-size:16px;line-height:28px;color:var(--muted)}
.pd__buy{margin:8px 0 32px}
.pd__share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 28px;border-bottom:1px solid var(--line)}
.pd__share-k{font-family:'Noto Sans Thai', sans-serif;font-size:13px;line-height:22px;font-weight:600;
  letter-spacing:1px;color:var(--muted);margin-right:4px}
.pd__sh{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--white);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.pd__sh svg{width:18px;height:18px;fill:none;stroke:var(--body);stroke-width:1.8}
.pd__sh:hover{border-color:var(--primary);background:var(--primary)}
.pd__sh:hover svg{stroke:var(--white)}
.pd__notice{list-style:none;margin:28px 0 0;padding:20px 24px;background:var(--bg);border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:10px}
.pd__notice li{position:relative;font-size:15px;line-height:26px;color:var(--muted);padding-left:22px}
.pd__notice li::before{content:'*';position:absolute;left:0;top:2px;color:var(--primary);font-weight:700}

.pd-detail-banner{background:var(--bg);position:relative;overflow:hidden;padding:0}
.pd-detail-banner .container{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.pd-detail-banner__body{max-width:520px}
.pd-detail-banner__body h2{margin:12px 0 16px}
.pd-detail-banner__body .ticklist{margin-top:28px}
.pd-detail-banner__media{position:absolute;top:0;right:0;bottom:0;width:64%;
  background-size:cover;background-position:center;background-repeat:no-repeat}
.pd-detail-banner__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 22%,rgba(246,245,241,.55) 55%,rgba(246,245,241,0) 100%)}
.pd-meta{display:flex;flex-direction:column;gap:12px;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.pd-meta__row{font-size:17px;line-height:30px;color:var(--body)}
.pd-meta__row span{color:var(--muted);margin-right:8px}
.pd-meta__row a{color:var(--primary);font-weight:600;text-decoration:none}
.pd-meta__row a:hover{text-decoration:underline}
.prod-grid--3{grid-template-columns:repeat(3,1fr)}

@media (max-width:1024px){
  .pd-top{padding-top:68px;padding-bottom:28px}
  .pd{grid-template-columns:1fr;gap:32px}
  .pd__media{padding:32px}
  .pd__img{aspect-ratio:1/1;height:auto}
  .pd__name{font-size:28px;line-height:42px}
  .pd__price{font-size:32px;line-height:46px}
  .pd-detail-banner__media{display:none}
  .pd-detail-banner__body{max-width:none}
  .prod-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .pd-top{padding-top:24px;padding-bottom:24px}
  .pd__media{padding:20px}
  .pd__name{font-size:24px;line-height:38px}
  .pd__price{font-size:28px;line-height:42px}
  .pd__row{gap:12px}
  .pd__label{width:auto;flex:1 1 100%}
  .pd__buy{width:100%;justify-content:center}
  .prod-grid--3{grid-template-columns:1fr}
}
.pd__size b{font-weight:700;color:var(--primary);margin-left:6px}
.pd__size.is-active b{color:var(--white)}
.pd__size i{display:none}
/* กันป้ายหัวข้อยืดเต็มความกว้างเวลาอยู่ในกล่อง flex column */
.sec-badge{align-self:flex-start}

/* ============================================================
   หน้า Owatman : section "เราดูแลให้ครบทุกขั้นตอน"
   ภาพคน PNG ซ้าย + ข้อความและไอคอนขวา
   ============================================================ */
.scope9{background:var(--alt)}
.scope9__grid{display:grid;grid-template-columns:6fr 7fr;gap:56px;align-items:end}

.scope9__media{display:flex;justify-content:center;align-items:flex-end}
.scope9__media img{width:100%;height:auto;max-width:520px;display:block;
  filter:drop-shadow(0 28px 44px rgba(23,23,31,.20))}

.scope9__copy{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:16px}
.scope9__lead{font-size:18px;line-height:34px;color:var(--body);margin:0 0 40px;max-width:640px}

.scope9__feat{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px;
  width:100%;margin-bottom:40px}
.afeat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.afeat img{width:52px;height:52px;object-fit:contain;display:block}
.afeat span{font-size:15px;line-height:24px;font-weight:600;color:var(--ink)}

@media (max-width:1024px){
  .scope9__grid{grid-template-columns:1fr;gap:40px;align-items:center}
  .scope9__media img{max-width:440px}
  .scope9__copy{align-items:center;text-align:center;padding-bottom:0}
  .scope9__lead{margin-left:auto;margin-right:auto;margin-bottom:32px}
  .scope9__feat{margin-bottom:32px}
}
@media (max-width:767px){
  .scope9__media img{max-width:320px}
  .scope9__lead{font-size:16px;line-height:30px;margin-bottom:24px}
  .scope9__feat{gap:24px 12px;margin-bottom:24px}
  .afeat img{width:44px;height:44px}
  .afeat span{font-size:13px;line-height:20px}
}

/* หน้า Owatman : section ขั้นตอนการทำงาน
   จอคอม/แท็บเล็ต = ภาพอินโฟกราฟิก | มือถือ = ข้อความ (ตัวหนังสือในภาพเล็กเกินอ่าน) */
.om-info__fig{margin:0}
.om-info__fig img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.om-info__text{display:none}
.om-info__note{margin-top:24px;text-align:center}
@media (max-width:767px){
  .om-info__fig{display:none}
  .om-info__text{display:block}
  .om-info__note{margin-top:24px;text-align:left}
}

/* ============================================================
   หน้าสาขา (ชลบุรี) : โหมด Landing page ที่พร้อมปิดการขาย
   ============================================================ */

/* --- ปุ่ม LINE --- */
.btn--line{background:#06C755;color:var(--white);border:1px solid #06C755;gap:8px}
.btn--line:hover{background:#05a948;border-color:#05a948}
.btn--line svg{width:18px;height:18px;flex:none}

/* --- แถบความน่าเชื่อถือใน hero --- */
.hero-trust{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:nowrap;gap:12px}
.hero-trust li{display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:14px;line-height:22px;font-weight:600;color:var(--white);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:8px 16px}
.hero-trust li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;
  background:var(--primary)}

/* --- แถบ CTA คั่นระหว่าง section --- */
.ctastrip{position:relative;overflow:hidden;
  background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:64px;padding-bottom:64px}
/* ภาพพื้นหลังจาง ๆ — ทำไฟล์ให้จางมาแล้วในตัวไฟล์ ไม่ต้องมี overlay ซ้อน
   (ไฟล์ cta-bg-*.jpg ผสมกับสีพื้น 88-90% + เบลอ 3px มาแล้ว) */
.ctastrip .container{position:relative;z-index:2}
.ctastrip--bg1{background:url('../images/cta-bg-01.jpg') center/cover no-repeat, var(--white)}
.ctastrip--bg2{background:url('../images/cta-bg-02.jpg') center/cover no-repeat, var(--ink)}
.ctastrip--bg3{background:url('../images/cta-bg-03.jpg') center/cover no-repeat, var(--white)}
.ctastrip .container{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.ctastrip__k{display:inline-block;font-size:13px;line-height:20px;font-weight:700;
  letter-spacing:1.4px;color:var(--primary);margin-bottom:12px}
.ctastrip h2{font-size:40px;line-height:56px;margin:0 0 16px}
.ctastrip p{font-size:17px;line-height:32px;color:var(--body);margin:0;max-width:640px}
.ctastrip__btns{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.ctastrip__btns .btn{justify-content:center}
.ctastrip .btn--ghost{border-color:var(--ink)}

.ctastrip--dark{background-color:var(--ink);border-color:#2A2A36}
.ctastrip--dark h2{color:var(--white)}
.ctastrip--dark h2 em{color:var(--primary)}
.ctastrip--dark p{color:#A9A9B2}
.ctastrip--dark .btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.34)}
.ctastrip--dark .btn--ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* --- ใต้ฟอร์ม --- */
.form-assure{font-size:15px;line-height:24px;color:var(--muted);margin:16px 0 0;text-align:center}
.form-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;
  margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.form-alt span{font-size:15px;line-height:24px;color:var(--muted)}
.form-alt a{font-size:16px;line-height:26px;font-weight:600;color:var(--primary)}
.form-alt a:hover{text-decoration:underline}

/* --- แถบ CTA ติดล่างจอ : เฉพาะมือถือ --- */
.lpbar{display:none}

@media (max-width:1024px){
  .ctastrip .container{grid-template-columns:1fr;gap:32px}
  .ctastrip__btns{flex-direction:row;flex-wrap:wrap}
  .ctastrip__btns .btn{flex:1 1 220px}
  .ctastrip h2{font-size:32px;line-height:48px}
}
@media (max-width:767px){
  .hero-trust{gap:8px;margin-top:24px;flex-wrap:wrap}
  .hero-trust li{font-size:13px;line-height:20px;padding:6px 14px}
  .hero-trust li::before{width:12px;height:12px}
  .ctastrip{padding-top:48px;padding-bottom:48px}
  .ctastrip h2{font-size:26px;line-height:40px}
  .ctastrip p{font-size:16px;line-height:30px}
  .ctastrip__btns{flex-direction:column}
  .ctastrip__btns .btn{flex:none;width:100%}
  .area-hero__cta .btn{width:100%;justify-content:center}

  /* แถบล่างจอ แทนปุ่มลอยเดิม เพื่อไม่ให้ทับกัน */
  .lpbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(23,23,31,.14);padding:10px 12px;gap:10px;align-items:stretch}
  .lpbar__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    flex:0 0 68px;height:52px;border-radius:var(--r-sm);border:1px solid var(--line);
    background:var(--white);color:var(--ink);font-size:12px;line-height:16px;font-weight:600}
  .lpbar__a svg{width:20px;height:20px}
  .lpbar__a--main{flex:1 1 auto;flex-direction:row;background:var(--primary);color:var(--white);
    border-color:var(--primary);font-size:16px;line-height:24px;font-weight:600}
  body.lp .floats,body.lp .float-call{display:none}
  body.lp .footer{padding-bottom:88px}
}

/* หน้าสาขา : ปรับความสูง hero ตามขนาดจอ (ต้องอยู่ท้ายไฟล์เพื่อให้ทับค่าฐาน) */
@media (max-width:1024px){
  .area-hero{min-height:620px}
  .hero-trust{flex-wrap:wrap}
  .hero-trust li{white-space:normal}
}
@media (max-width:767px){
  .area-hero{min-height:560px}
  .eec-media{margin-top:32px;max-width:none;flex:none;aspect-ratio:16/10;min-height:0}
}

/* ===== ปรับพื้นที่กดบนมือถือ ให้ลิงก์ที่ต้องแตะได้สูงพอ (จากการตรวจ responsive) ===== */
@media (max-width:767px){
  .ct-v{display:inline-flex;align-items:center;min-height:40px}
  .pd-meta__row a{display:inline-flex;align-items:center;min-height:40px}
}

/* ============================================================
   จอ <=1024px : header ไม่ได้ลอยทับ hero แล้ว จึงต้องเป็นแถบขาวทึบ
   (เดิมโลโก้กับปุ่มเบอร์เกอร์ถูกบังคับเป็นสีขาวเพื่อวางบน hero สีเข้ม
    พอ header มาอยู่บนพื้นขาว เลยกลายเป็นขาวบนขาว = มองไม่เห็น)
   ============================================================ */
@media (max-width:1024px){
  .header{position:relative;top:0;background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:0 2px 16px rgba(23,23,31,.06)}
  .header .brand img{filter:none}
  .header .burger{background:var(--white);border-color:var(--line)}
  .header .burger span{background:var(--ink)}
  .header.is-solid{position:relative;top:0}
  .page-hero{padding-top:0}
  .hero{padding-top:0}
}

/* ============================================================
   มือถือ : ปรับ 3 จุดที่ดูไม่เรียบร้อย
   ============================================================ */
@media (max-width:767px){

  /* 1) แถบตัวเลขใต้ hero — เดิมเรียงชิดซ้าย 4 บรรทัดติดกัน ดูรก
        เปลี่ยนเป็นการ์ด 2x2 ตัวเลขเด่น คำอธิบายอยู่ใต้ */
  .hero__facts .container{grid-template-columns:repeat(2,1fr);gap:1px;
    padding:0;max-width:none;background:rgba(255,255,255,.12)}
  .hero__fact{flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ink);padding:14px 20px;font-size:12px;line-height:18px;color:#A9A9B2}
  .hero__fact strong{font-size:20px;line-height:28px;color:var(--primary)}
  /* แถบตัวเลขสูงขึ้นกว่าเดิม ต้องเผื่อที่ให้ปุ่มใน hero ไม่ถูกทับ */
  .hero__inner{padding-bottom:210px}

  /* 2) ป้าย "27 ปี" ในหน้าแรก — เดิมเป็นบล็อกส้มเต็มความกว้างใต้รูป ดูหลุดจากดีไซน์
        เปลี่ยนเป็นป้ายวางซ้อนมุมล่างซ้ายของรูป เหมือนบนจอคอม */
  .trust__media{position:relative;display:block}
  .trust__badge{position:absolute;left:16px;bottom:16px;right:auto;
    margin-top:0;width:auto;max-width:calc(100% - 32px);
    padding:12px 18px;gap:12px;border-radius:var(--r-md);
    box-shadow:0 10px 28px rgba(23,23,31,.28)}
  .trust__badge strong{font-size:32px;line-height:36px}
  .trust__badge span{font-size:13px;line-height:18px}

  /* 3) แถบ CTA ท้ายหน้า — รูปพนักงานทับข้อความ
        ให้รูปอยู่แถวบนของตัวเอง ไม่ดึงขึ้นไปทับ และไม่ถูกตัดหัว
        พอไม่ดึงขึ้นแล้ว ที่ว่างที่เผื่อไว้ให้รูปใน section ก่อนหน้าก็ไม่ต้องใช้
     4) สลับให้ข้อความ+ปุ่มขึ้นก่อน รูปอยู่ท้ายสุดและชิดขอบล่างพอดี
        (ตัด padding-bottom ออก ให้ท้ายรูปชนกับ section ถัดไปพอดี) */
  .section--person-gap{padding-bottom:48px}
  .cta-band .container{padding-top:32px;padding-bottom:0;gap:16px}
  .cta-copy{margin-top:0;order:1}
  .cta-band .btn{order:2}
  .cta-person{width:170px;margin:0 auto;order:3}
}

@media (max-width:400px){ .hero__inner{padding-bottom:230px} }
@media (max-width:340px){ .hero__inner{padding-bottom:260px} }

/* ===== หมวดหมู่สินค้า : ปุ่มพับเก็บบนมือถือ ===== */
.catnav__bar{width:100%;border:0;cursor:default;text-align:left;font-family:'Noto Sans Thai', sans-serif}
.catnav__bar span:first-of-type{flex:1 1 auto}
.catnav__bar-caret{display:none;width:9px;height:9px;flex:none;
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(45deg);transition:transform .25s ease;margin-right:4px}

@media (max-width:767px){
  /* คอลัมน์เดียวแล้ว ต้องกว้างเต็ม และ flex-basis จากจอแท็บเล็ตกลายเป็น "ความสูง" ต้องล้าง */
  .catnav{align-items:stretch}
  .catnav__wrap,.catnav__cta{flex:none}
  /* รายการ 21 หมวดยาวเต็มจอก่อนถึงสินค้า — พับเก็บไว้ กดเปิดเมื่อต้องการ */
  .catnav__bar{cursor:pointer;border-radius:var(--r-md)}
  .catnav__bar-caret{display:block}
  .catnav__bar[aria-expanded="true"]{border-radius:var(--r-md) var(--r-md) 0 0}
  .catnav__bar[aria-expanded="true"] .catnav__bar-caret{transform:rotate(-135deg)}
  .catnav__bar[aria-expanded="false"] + .catnav__list{display:none}
}

/* มือถือ : hero ที่เนื้อหายาว (หัวข้อ 4 บรรทัด + ปุ่ม + ชิป) จะสูงเท่า section พอดี
   ทำให้ breadcrumb ชนขอบล่างของ header — ใส่ padding กันไว้ให้มีระยะห่างเสมอ */
@media (max-width:767px){
  .page-hero{padding-top:40px;padding-bottom:40px}
}

/* footer 4 คอลัมน์ในช่วง 1025-1200px คอลัมน์แคบ การ์ดตัวเลขต้องย่อตาม */
@media (min-width:1025px) and (max-width:1200px){
  .f-stats{gap:8px}
  .f-stat{padding:14px 6px}
  .f-stat b{font-size:23px;line-height:32px;letter-spacing:-0.5px}
  .f-stat span{font-size:12px;line-height:18px}
}

/* คำไทยที่ไม่ใช่คำในพจนานุกรม เบราว์เซอร์จะตัดกลางคำ — ล็อกไม่ให้ขาด */
.nb{white-space:nowrap}

/* =====================================================================
   หน้าบริการจัดหาแรงงาน (owatman.html) — โทนสีฟ้า + เลย์เอาต์เฉพาะหน้า
   ===================================================================== */

/* เปลี่ยนค่าตัวแปรสีหลักที่ <body> ทุกส่วนที่เคยเป็นสีส้มกลายเป็นฟ้าทั้งหน้า */
.theme-blue{
  --primary:#1D6FE0;
  --primary-dark:#1557B0;
  --blue-deep:#0C2F63;
  --blue-tint:#EAF2FD;
}
.theme-blue .cta-band p{color:#D8E7FB}
.theme-blue .cta-copy__k,
.theme-blue .cta-copy__en{color:#C6DCF9}
.theme-blue .float-call{box-shadow:0 8px 28px rgba(29,111,224,.32)}
.theme-blue .f-stat:hover{background:#12274A;border-color:#2F5C9E}

/* ---------- ส่วนหัวของ section ---------- */
.lb-eyebrow{
  display:inline-block;font-family:'Noto Sans Thai', sans-serif;
  font-size:14px;line-height:24px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--primary);margin-bottom:16px
}
.lb-eyebrow--light{color:#9DC4F5}
.lb-head{text-align:center;max-width:900px;margin:0 auto 48px}
.lb-head h2{font-size:44px;line-height:62px;font-weight:700;color:var(--ink);margin:0}
.lb-head h2 em{font-style:italic;color:var(--primary)}
.lb-head::after{content:'';display:block;width:64px;height:4px;border-radius:2px;background:var(--primary);margin:24px auto 0}

/* ---------- เส้นโค้งคั่น section ---------- */
.lb-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;pointer-events:none}
.lb-wave svg{display:block;width:100%;height:90px}
.lb-wave path{fill:var(--bg)}
.lb-wave--up{top:-1px;bottom:auto;transform:none}
.lb-wave--up path{fill:var(--white)}

/* ---------- HERO ---------- */
.lb-hero{
  position:relative;background:var(--ink);background-size:cover;background-position:center;
  padding:224px 0 144px;overflow:hidden;text-align:center
}
.lb-hero__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,18,38,.78) 0%,rgba(6,18,38,.58) 45%,rgba(6,18,38,.86) 100%)}
.lb-hero .container{position:relative;z-index:2}
.lb-hero__inner{max-width:880px;margin:0 auto}
.lb-hero .crumb{justify-content:center;margin-bottom:24px;color:rgba(255,255,255,.6)}
.lb-hero .crumb a{color:rgba(255,255,255,.6)}
.lb-hero .crumb a:hover{color:var(--white)}
.lb-hero .crumb span{color:var(--white);font-weight:600}
.lb-hero .lb-kicker{
  display:inline-block;font-family:'Noto Sans Thai', sans-serif;font-size:14px;line-height:24px;
  font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#9DC4F5;
  border:1px solid #6F9FDC;border-radius:999px;padding:8px 24px;margin-bottom:24px
}
.lb-hero h1{font-size:68px;line-height:92px;font-weight:700;color:var(--white);margin:0}
.lb-hero__lead{font-size:20px;line-height:36px;color:#D5DEEA;margin:16px auto 0;max-width:680px}
.lb-hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:32px}

/* ---------- แถวตำแหน่งงาน (การ์ดวงกลม) ---------- */
.lb-roles-sec{position:relative;z-index:3;background:var(--bg);padding:64px 0 96px}
.lb-roles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.lb-roles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lb-role{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 16px;text-align:center;
  box-shadow:0 12px 32px rgba(12,47,99,.08);transition:transform .25s ease,box-shadow .25s ease
}
.lb-role:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(12,47,99,.14)}
.lb-role__ring{
  width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;background:var(--blue-tint);border:2px solid var(--primary)
}
.lb-role__ring svg{width:40px;height:40px;fill:var(--primary)}
.lb-role b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:17px;line-height:28px;
  font-weight:600;color:var(--ink)}

/* 1025-1200px : 6 คอลัมน์แคบเกิน ลดเหลือ 3 คอลัมน์ 2 แถว */
@media (min-width:1025px) and (max-width:1200px){
  .lb-roles{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}

/* ---------- ประโยคนำ + ย่อหน้าแนะนำ ---------- */
.lb-intro{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.lb-quote{
  margin:0;padding:32px;
  background:var(--blue-tint);border-radius:var(--r-md);
  font-family:'Noto Sans Thai', sans-serif;font-size:22px;line-height:40px;font-weight:600;color:var(--blue-deep)
}
.lb-lead{margin:0;font-size:18px;line-height:36px;color:var(--body)}

/* ---------- ตัวเลข + ภาพเต็มพื้นหลัง ---------- */
.lb-figures{position:relative;background:var(--blue-deep);background-size:cover;background-position:center;
  padding:96px 0;overflow:hidden}
.lb-figures__veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,47,99,.18) 0%,rgba(12,47,99,.55) 34%,rgba(12,47,99,.93) 56%,rgba(12,47,99,.97) 100%)}
.lb-figures .container{position:relative;z-index:2}
.lb-figures__nums{width:54%;margin-left:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.lb-num b{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:44px;line-height:60px;
  font-weight:700;color:var(--white);letter-spacing:-1px}
.lb-num span{display:block;font-size:17px;line-height:28px;color:#BBD4F3;
  border-top:1px solid #4E739F;padding-top:16px;margin-top:8px}

/* ---------- รายละเอียดงาน (การ์ดมีเลข) ---------- */
.lb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lb-step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;transition:border-color .2s ease,transform .2s ease}
.lb-step:hover{border-color:var(--primary);transform:translateY(-4px)}
.lb-step__n{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--white);
  font-family:'Noto Sans Thai', sans-serif;font-size:17px;font-weight:700;line-height:44px;margin-bottom:16px}
.lb-step p{font-size:17px;line-height:30px;color:var(--body);margin:0}
.lb-note{font-size:14px;line-height:24px;color:var(--muted);text-align:center;margin:32px 0 0}

/* ---------- รายละเอียดงาน — แบนเนอร์เข้ม + ภาพประกอบ ---------- */
.scope-banner{background:var(--blue-deep);position:relative;overflow:hidden;padding:0}
.scope-banner .container{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.scope-banner__body{max-width:680px}
.scope-banner__media{
  position:absolute;top:0;right:0;bottom:0;width:46%;
  background-size:cover;background-position:center;
}
.scope-banner__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--blue-deep) 0%,rgba(12,47,99,.25) 35%,rgba(12,47,99,0) 100%);
}
.scope-banner .lb-head{text-align:left;max-width:none;margin:0 0 32px}
.scope-banner .lb-head::after{margin:24px 0 0}
.scope-banner .lb-head h2{color:var(--white)}
.scope-banner .lb-head h2 em{color:#9DC4F5}
.lb-steps--banner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.lb-steps--banner .lb-step{
  background:none;border:0;border-radius:0;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  display:flex;align-items:flex-start;gap:16px;
}
.lb-steps--banner .lb-step:hover{transform:none;border-bottom-color:rgba(255,255,255,.14)}
.lb-steps--banner .lb-step__n{
  background:var(--primary);color:var(--white);
  width:36px;height:36px;line-height:36px;font-size:14px;margin-bottom:0;flex:none}
.lb-steps--banner .lb-step p{color:#D8E7FB;font-size:16px;line-height:26px}
.lb-note--light{color:#9DC4F5;text-align:left}
@media (max-width:1024px){
  .scope-banner__media{display:none}
  .scope-banner__body{max-width:none}
}
@media (max-width:640px){
  .lb-steps--banner{grid-template-columns:1fr}
}

/* ---------- แถบติดต่อ ---------- */
.lb-contact{background:var(--blue-deep);padding:48px 0;border-top:1px solid rgba(255,255,255,.14)}
.lb-contact__inner{display:grid;grid-template-columns:auto 1fr auto;gap:64px;align-items:center}
.lb-contact__k h2{font-size:32px;line-height:46px;font-weight:700;color:var(--white);margin:0}
.lb-contact__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.lb-ci{display:flex;align-items:center;gap:16px;text-decoration:none}
.lb-ci__ic{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:#1C3F76;color:var(--white)}
.lb-ci__ic svg{width:22px;height:22px;fill:currentColor}
.lb-ci b{font-family:'Noto Sans Thai', sans-serif;font-size:17px;line-height:28px;font-weight:500;
  color:rgba(255,255,255,.88);transition:color .2s}
.lb-ci:hover b{color:var(--white)}
.lb-ci:hover .lb-ci__ic{background:var(--primary)}
.lb-contact__btn{flex:none;white-space:nowrap}

/* ---------- section สีฟ้าเต็มจอ ---------- */
.lb-blue{position:relative;background:var(--primary);padding:144px 0;overflow:hidden}
.lb-blue .container{position:relative;z-index:2}
.lb-blue__grid{display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:center}
.lb-blue__copy h2{font-size:40px;line-height:58px;font-weight:700;color:var(--white);margin:0 0 24px}
.lb-blue__copy p{font-size:18px;line-height:34px;color:var(--white);margin:0 0 32px}
.lb-blue__media{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 60px rgba(8,32,72,.28)}
.lb-blue__media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.lb-blue .lb-wave path{fill:var(--white)}
.lb-blue .lb-wave--up path{fill:var(--blue-deep)}

/* ---------- ทำไมต้องใช้บริการฯ ---------- */
.lb-whys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lb-why{position:relative;background:var(--alt);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;border-top:4px solid var(--primary)}
.lb-why__n{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:36px;line-height:44px;
  font-weight:700;color:var(--primary);letter-spacing:-1px;margin-bottom:16px}
.lb-why h3{font-size:28px;line-height:40px;font-weight:600;color:var(--ink);margin:0 0 16px}
.lb-why p{font-size:17px;line-height:32px;color:var(--body);margin:0}

/* แกลเลอรีหน้างาน 5 รูป เต็มความกว้าง */
.lb-gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:64px}
.lb-gal .gitem{aspect-ratio:1/1}
.lb-gal .gitem:nth-child(1),
.lb-gal .gitem:nth-child(2){grid-column:span 3;aspect-ratio:16/9}
.lb-gal .gitem:nth-child(3),
.lb-gal .gitem:nth-child(4),
.lb-gal .gitem:nth-child(5){grid-column:span 2;aspect-ratio:4/3}

/* ---------- รายละเอียดบริการ : แผงสเปกพื้นน้ำเงิน ---------- */
.spec-panel{margin:0;background:var(--blue-deep);border-radius:var(--r-lg);overflow:hidden}
.spec-panel__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 32px;background:rgba(255,255,255,.06);border-bottom:1px solid #2F5C9E}
.spec-panel__k{font-family:'Noto Sans Thai', sans-serif;font-size:14px;line-height:24px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:#BBD4F3}
.spec-panel__n{font-family:'Noto Sans Thai', sans-serif;font-size:16px;line-height:24px;font-weight:700;
  color:var(--white);background:var(--primary);border-radius:999px;padding:8px 16px}
.spec-panel__rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.spec-row{display:grid;grid-template-columns:32px 36px 1fr;gap:16px;align-items:start;padding:24px 32px}
.spec-row:nth-child(4n+1),.spec-row:nth-child(4n+2){background:rgba(255,255,255,.04)}
.spec-row__no{font-family:'Noto Sans Thai', sans-serif;font-size:16px;line-height:32px;font-weight:700;
  color:#6F9FDC;letter-spacing:.5px}
.spec-row__chk{width:36px;height:36px;border-radius:50%;background:var(--primary);flex:none;
  display:flex;align-items:center;justify-content:center}
.spec-row__chk svg{width:20px;height:20px;fill:var(--white)}
.spec-row dt{font-family:'Noto Sans Thai', sans-serif;font-size:18px;line-height:32px;font-weight:600;
  color:var(--white)}
.spec-row dd{margin:8px 0 0;font-size:16px;line-height:28px;color:#BBD4F3}
.spec-panel__rows .spec-row:last-child:nth-child(odd){grid-column:1 / -1}
.spec-panel + .lb-note{color:var(--muted)}

/* ---------- เหมาะสำหรับธุรกิจ : 5 เสา คั่นด้วยเส้นตั้ง ---------- */
.fitcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:2px solid var(--primary);background:var(--white)}
.fitcol{display:block;position:relative;padding:40px 24px 48px;text-align:center;border-left:1px solid var(--line)}
.fitcol:first-child{border-left:0}
.fitcol__n{display:block;font-family:'Noto Sans Thai', sans-serif;font-size:40px;line-height:48px;
  font-weight:700;color:#6B9BD8;letter-spacing:-1px;margin-bottom:16px}
.fitcol__ic{position:relative;width:72px;height:72px;border-radius:50%;background:var(--primary);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.fitcol__ic svg{width:34px;height:34px;fill:var(--white)}
.fitcol__t{position:relative;display:block;font-family:'Noto Sans Thai', sans-serif;
  font-size:18px;line-height:30px;font-weight:700;color:var(--ink)}
.fitcol__t span{display:block;font-size:16px;line-height:28px;font-weight:400;color:var(--body);margin-top:8px}

/* ---------- ย่อหน้าปิดท้าย ---------- */
.lb-close{max-width:none;margin:64px auto 0;text-align:center}
.lb-close p{font-size:18px;line-height:34px;color:var(--body);margin:0 0 16px}
.lb-close__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:32px}

/* ================= แท็บเล็ต (<=1024px) ================= */
@media (max-width:1024px){
  .lb-head{margin-bottom:32px}
  .lb-head h2{font-size:34px;line-height:50px}
  .lb-hero{padding:64px 0 96px}
  .lb-hero h1{font-size:46px;line-height:66px}
  .lb-hero__lead{font-size:18px;line-height:32px}
  .lb-wave svg{height:60px}

  .lb-roles-sec{padding:48px 0 64px}
  .lb-roles{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .lb-roles--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lb-role{padding:24px 16px}
  .lb-role__ring{width:70px;height:70px}
  .lb-role__ring svg{width:32px;height:32px}
  .lb-role b{font-size:16px;line-height:26px}

  .lb-quote{font-size:19px;line-height:34px;padding:24px}
  .lb-lead{font-size:17px;line-height:32px}
  .lb-lead{font-size:17px;line-height:32px}

  .lb-figures{padding:64px 0}
  .lb-figures__nums{width:100%;gap:32px}
  .lb-figures__veil{background:linear-gradient(180deg,rgba(12,47,99,.55) 0%,rgba(12,47,99,.92) 46%,rgba(12,47,99,.97) 100%)}
  .lb-num b{font-size:34px;line-height:48px}
  .lb-num span{font-size:16px;line-height:26px}

  .lb-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-panel__bar{padding:24px}
  .spec-row{padding:24px;grid-template-columns:24px 32px 1fr}
  .spec-row dt{font-size:17px;line-height:30px}
  .fitcols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fitcol{padding:32px 16px;border-top:1px solid var(--line)}
  .fitcol:nth-child(-n+3){border-top:0}
  .fitcol:nth-child(3n+1){border-left:0}
  .fitcol__n{font-size:32px;line-height:40px;margin-bottom:8px}
  .fitcol__ic{width:62px;height:62px;margin-bottom:16px}
  .fitcol__t{font-size:17px;line-height:28px}

  .lb-contact{padding:48px 0}
  .lb-contact__inner{grid-template-columns:1fr;gap:32px}
  .lb-contact__k h2{font-size:28px;line-height:42px}
  .lb-contact__btn{justify-self:start}

  .lb-blue{padding:96px 0}
  .lb-blue__grid{grid-template-columns:1fr;gap:32px}
  .lb-blue__copy h2{font-size:30px;line-height:46px}
  .lb-blue__copy p{font-size:17px;line-height:32px}

  .lb-intro{grid-template-columns:1fr;gap:32px}
  .lb-whys{grid-template-columns:1fr;gap:16px}
  .lb-why{padding:32px 24px}
  .lb-why h3{font-size:24px;line-height:36px}
  .lb-why p{font-size:16px;line-height:30px}
  .lb-gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
  .lb-gal .gitem:nth-child(1),
  .lb-gal .gitem:nth-child(2){grid-column:span 2}
  .lb-gal .gitem:nth-child(3),
  .lb-gal .gitem:nth-child(4),
  .lb-gal .gitem:nth-child(5){grid-column:span 2;aspect-ratio:4/3}

  .lb-close{margin-top:48px}
  .lb-close p{font-size:17px;line-height:32px}
}

/* ================= มือถือ (<=767px) ================= */
@media (max-width:767px){
  .lb-head{margin-bottom:32px}
  .lb-head h2{font-size:27px;line-height:42px}
  .lb-head::after{margin-top:16px}
  .lb-eyebrow{font-size:13px;line-height:22px;letter-spacing:1.5px}

  .lb-hero{padding:48px 0 64px}
  .lb-hero h1{font-size:34px;line-height:52px}
  .lb-hero__lead{font-size:16px;line-height:30px;margin-top:16px}
  .lb-hero .lb-kicker{font-size:13px;letter-spacing:2px;padding:8px 16px;margin-bottom:16px}
  .lb-hero__cta{gap:16px;margin-top:32px}
  .lb-hero__cta .btn{width:100%;justify-content:center}
  .lb-wave svg{height:36px}

  .lb-roles-sec{padding:32px 0 48px}
  .lb-roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

  .lb-role{padding:24px 16px}
  .lb-role__ring{width:62px;height:62px;margin-bottom:16px}
  .lb-role__ring svg{width:28px;height:28px}
  .lb-role b{font-size:15px;line-height:24px}

  .lb-quote{font-size:17px;line-height:30px;padding:24px}
  .lb-lead{font-size:16px;line-height:30px}

  .lb-figures{padding:48px 0}
  .lb-figures__nums{grid-template-columns:1fr;gap:24px}
  .lb-num b{font-size:30px;line-height:42px}
  .lb-num span{font-size:15px;line-height:24px;padding-top:16px}

  .lb-steps{grid-template-columns:1fr;gap:16px}
  .lb-step{padding:24px}
  .lb-step__n{width:40px;height:40px;line-height:40px;font-size:16px;margin-bottom:16px}
  .lb-step p{font-size:16px;line-height:28px}

  .lb-contact{padding:48px 0}
  .lb-contact__k h2{font-size:24px;line-height:38px}
  .lb-contact__list{grid-template-columns:1fr;gap:8px}
  /* พื้นที่กดบนมือถือต้องไม่ต่ำกว่า 44px */
  .lb-ci{padding:8px 0}
  .lb-ci__ic{width:48px;height:48px}
  .lb-contact__btn{width:100%;justify-content:center}

  .lb-blue{padding:64px 0}
  .lb-blue__copy h2{font-size:25px;line-height:40px}
  .lb-blue__copy p{font-size:16px;line-height:30px}
  .lb-blue__copy .btn{width:100%;justify-content:center}

  .lb-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .lb-gal .gitem{grid-column:span 1;aspect-ratio:4/3}
  .lb-gal .gitem:nth-child(1){grid-column:span 2;aspect-ratio:16/9}
  .lb-why__n{font-size:30px;line-height:38px}

  .spec-panel__bar{padding:16px 24px}
  .spec-panel__k{font-size:13px;letter-spacing:1.5px}
  .spec-panel__n{font-size:15px;padding:8px}
  .spec-panel__rows{grid-template-columns:1fr}
  .spec-row{padding:16px 24px;grid-template-columns:24px 32px 1fr;gap:16px}
  .spec-row:nth-child(4n+1),.spec-row:nth-child(4n+2){background:none}
  .spec-row:nth-child(odd){background:rgba(255,255,255,.04)}
  .spec-row dt{font-size:16px;line-height:28px}
  .spec-row dd{font-size:15px;line-height:26px}
  .fitcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fitcol{padding:24px 16px}
  .fitcol:nth-child(-n+3){border-top:1px solid var(--line)}
  .fitcol:nth-child(-n+2){border-top:0}
  .fitcol:nth-child(3n+1){border-left:1px solid var(--line)}
  .fitcol:nth-child(odd){border-left:0}
  .fitcol:last-child:nth-child(odd){grid-column:1 / -1}
  .fitcol__n{font-size:28px;line-height:36px;margin-bottom:8px}
  .fitcol__ic{width:54px;height:54px;margin-bottom:16px}
  .fitcol__ic svg{width:28px;height:28px}
  .fitcol__t{font-size:16px;line-height:26px}
  .fitcol__t span{font-size:15px;line-height:24px}



  .lb-close{margin-top:48px}
  .lb-close p{font-size:16px;line-height:30px}
  .lb-close__cta .btn{width:100%;justify-content:center}
}

/* จอเล็กมาก (<=400px) : การ์ดวงกลม 2 คอลัมน์แคบจนอ่านไม่สะดวก เหลือคอลัมน์เดียว */
@media (max-width:400px){
  .lb-roles{grid-template-columns:1fr}
  /* จอ 320px : 2 คอลัมน์แคบเกินอ่าน เหลือคอลัมน์เดียว */
  .fitcols{grid-template-columns:1fr}
  .fitcol{border-left:0;border-top:1px solid var(--line)}
  .fitcol:first-child{border-top:0}
  .fitcol:last-child:nth-child(odd){grid-column:auto}
  .lb-role{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 24px}
  .lb-role__ring{margin:0}
}

/* =====================================================================
   การเข้าถึง (WCAG 2.1 AA) — เพิ่มเข้ามา ไม่กระทบเนื้อหาหรือเลย์เอาต์
   ===================================================================== */

/* ข้ามไปที่เนื้อหา : ซ่อนไว้ โผล่เมื่อกด Tab ปุ่มแรก */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--white);font-family:'Noto Sans Thai', sans-serif;
  font-size:16px;font-weight:600;line-height:24px;padding:16px 24px;
  border-radius:0 0 var(--r-md) 0;text-decoration:none}
.skip-link:focus{left:0}

/* ขอบโฟกัสคีย์บอร์ด : เดิมมีแค่ในช่องกรอกฟอร์ม ทำให้กด Tab แล้วไม่รู้ว่าอยู่ตรงไหน */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.on-dark a:focus-visible,.on-dark button:focus-visible,
.footer a:focus-visible,.topbar a:focus-visible,.floats a:focus-visible,
.floats button:focus-visible,.lb-hero a:focus-visible,.lb-blue a:focus-visible,
.lb-contact a:focus-visible,.cta-band a:focus-visible{outline-color:var(--white)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--primary);outline-offset:2px}

/* contrast : สีที่ต่ำกว่า 4.5 ตามผล audit */
.theme-blue .lb-eyebrow{color:#0F4FA8}                 /* บนครีม 4.37 -> 7.12 */
.theme-blue .lb-eyebrow--light{color:#9DC4F5}          /* บนพื้นเข้ม 7.3-9.9 */
.theme-blue .lb-blue .lb-eyebrow--light{color:var(--white)}  /* บนฟ้า 2.65 -> 4.77 */
.theme-blue .cta-band p,
.theme-blue .cta-copy__k,
.theme-blue .cta-copy__en{color:var(--white)}          /* บนฟ้า 3.4-3.8 -> 4.77 */
.theme-blue .slogan__en{color:#7FB3F2}                 /* บน ink 3.73 -> 8.17 */
.float-call-wrap{display:contents}

/* ---------- footer : สโลแกนเป็นแถวเต็มความกว้าง ---------- */
/* วางในช่องว่างใต้คอลัมน์เมนู กว้างเต็มสองคอลัมน์ */
.slogan--band{grid-column:1 / -1;text-align:left;padding:32px 0 0;margin:8px 0 0;
  border-top:1px solid #2E2E38}
.slogan--band .slogan__th{font-family:'Noto Sans Thai', sans-serif;font-size:24px;line-height:38px;
  font-weight:700;color:var(--white)}
.slogan--band .slogan__en{font-size:16px;line-height:28px;color:var(--primary);letter-spacing:.5px;margin-top:8px}

/* ---------- หัวข้อรีวิว : ข้อความซ้าย โลโก้ขวา ---------- */
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:48px;
  flex-wrap:wrap;margin-bottom:48px}
.rv-head__copy{max-width:720px}
.rv-head__copy h2{margin:0}
.rv-head__copy p{font-size:18px;line-height:32px;color:var(--muted);margin:12px 0 0}
.rv-head__g{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none;text-decoration:none}
.rv-head__logo{width:260px;height:auto}
.rv-score{display:flex;align-items:baseline;gap:8px}
.rv-score b{font-family:'Noto Sans Thai', sans-serif;font-size:28px;line-height:36px;font-weight:700;color:var(--ink)}
.rv-score__stars{font-size:17px;line-height:26px;color:#B87A00;letter-spacing:1px}
.rv-score__n{font-size:15px;line-height:24px;color:var(--muted)}

/* ---------- หน้าสินค้า : ปุ่มโทร / ไลน์ แทนช่องจำนวนกับปุ่มสั่งซื้อ ---------- */
.pd-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 0}
.pd-cta__item{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;
  column-gap:16px;align-items:center;text-decoration:none;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;
  transition:border-color .2s ease,transform .2s ease}
.pd-cta__item:hover{border-color:var(--primary);transform:translateY(-2px)}
.pd-cta__item--line:hover{border-color:#06C755}
.pd-cta__ic{grid-row:1 / span 2;width:54px;height:54px;border-radius:50%;
  background:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center}
.pd-cta__ic svg{width:26px;height:26px;fill:currentColor}
.pd-cta__ic--line{background:#06C755}
.pd-cta__ic--line svg{width:30px;height:30px;fill:currentColor}
.pd-cta__t{font-size:15px;line-height:24px;color:var(--muted)}
.pd-cta__b{font-family:'Noto Sans Thai', sans-serif;font-size:20px;line-height:30px;
  font-weight:700;color:var(--ink)}

@media (max-width:1024px){
  .slogan--band{margin:0;padding-top:24px}
  .slogan--band .slogan__th{font-size:21px;line-height:34px}
  .rv-head{gap:32px;margin-bottom:32px}
  .rv-head__logo{width:200px}
  .rv-score b{font-size:24px;line-height:32px}
  .pd-cta{gap:12px}
  .pd-cta__item{padding:16px 20px;column-gap:12px;grid-template-columns:44px 1fr}
  .pd-cta__ic{width:48px;height:48px}
  .pd-cta__b{font-size:18px;line-height:28px}
}
@media (max-width:767px){
  .slogan--band{margin:0;padding-top:24px}
  .slogan--band .slogan__th{font-size:19px;line-height:30px}
  .slogan--band .slogan__en{font-size:15px;line-height:26px}
  .rv-head{gap:24px}
  .rv-head__copy p{font-size:16px;line-height:28px}
  .rv-head__g{align-items:flex-start}
  .rv-head__logo{width:168px}
  .rv-score b{font-size:22px;line-height:30px}
  .pd-cta{grid-template-columns:1fr}
}

/* ============================================================
   ทั้งเว็บ — เข้าเว็บแล้วเล่น animation (load) + เลื่อนดูแล้วค่อยๆ ปรากฏ (scroll)
   ============================================================ */
@keyframes heroUp{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}

/* หน้าแรก */
body.home #hero h1{animation:heroUp .8s var(--ease-out) both}
body.home #hero .hero__sub{animation:heroUp .8s var(--ease-out) .1s both}
body.home #hero .hero__lead{animation:heroUp .8s var(--ease-out) .2s both}
body.home #hero .hero__quote{animation:heroUp .8s var(--ease-out) .3s both}
body.home #hero .hero__actions{animation:heroUp .8s var(--ease-out) .4s both}
body.home #hero .hero__facts{animation:heroUp .8s var(--ease-out) .5s both}

/* หน้าใน — page-hero / lb-hero (owatman) */
.page-hero__inner>*,.lb-hero__inner>*{animation:heroUp .8s var(--ease-out) both}
.page-hero__inner>*:nth-child(2),.lb-hero__inner>*:nth-child(2){animation-delay:.1s}
.page-hero__inner>*:nth-child(3),.lb-hero__inner>*:nth-child(3){animation-delay:.2s}
.page-hero__inner>*:nth-child(4),.lb-hero__inner>*:nth-child(4){animation-delay:.3s}
.lb-hero__inner>*:nth-child(5){animation-delay:.4s}
.page-hero__figure{animation:heroUp .8s var(--ease-out) .3s both}

/* หัวข้อ section / บล็อกเดี่ยว — fade ทีเดียวตอนเลื่อนถึง */
.sec-head,.section-head,.rv-head,.cta-copy,.cta-person,.quote-intro,.form-card,
body.home .business__head,body.home .trust__copy,body.home .trust__media{
  opacity:0;translate:0 28px;
  transition:opacity .6s var(--ease-out),translate .6s var(--ease-out);
}
.sec-head.is-visible,.section-head.is-visible,.rv-head.is-visible,.cta-copy.is-visible,
.cta-person.is-visible,.quote-intro.is-visible,.form-card.is-visible,
body.home .business__head.is-visible,body.home .trust__copy.is-visible,body.home .trust__media.is-visible{
  opacity:1;translate:0 0;
}

/* กลุ่มการ์ด/รายการทั้งเว็บ — ทยอยปรากฏทีละใบตอนเลื่อนถึง */
.standards__grid>*,.biz-grid>*,.proj-grid>*,.review-grid>*,.card-grid-3>*,.clients-grid>*,.pillars>*,
.art-grid>*,.awards-dark__grid>*,.bgrid>*,.cert-grid>*,.cust__grid>*,.eec-grid>*,.lb-blue__grid>*,
.place-grid>*,.port-grid>*,.prod-grid>*,.sales-grid>*,.rel-grid>*,.scope-grid>*,.story__grid>*,.wgrid>*,.awards>*,.perks>*,.zones>*{
  opacity:0;translate:0 24px;
  transition:opacity .5s var(--ease-out),translate .5s var(--ease-out);
}
.standards__grid.is-visible>*,.biz-grid.is-visible>*,.proj-grid.is-visible>*,.review-grid.is-visible>*,
.card-grid-3.is-visible>*,.clients-grid.is-visible>*,.pillars.is-visible>*,
.art-grid.is-visible>*,.awards-dark__grid.is-visible>*,.bgrid.is-visible>*,.cert-grid.is-visible>*,
.cust__grid.is-visible>*,.eec-grid.is-visible>*,.lb-blue__grid.is-visible>*,
.place-grid.is-visible>*,.port-grid.is-visible>*,.prod-grid.is-visible>*,.sales-grid.is-visible>*,
.rel-grid.is-visible>*,.scope-grid.is-visible>*,.story__grid.is-visible>*,.wgrid.is-visible>*,.awards.is-visible>*,.perks.is-visible>*,.zones.is-visible>*{
  opacity:1;translate:0 0;
}
.standards__grid.is-visible>*:nth-child(2),.biz-grid.is-visible>*:nth-child(2),.proj-grid.is-visible>*:nth-child(2),
.review-grid.is-visible>*:nth-child(2),.card-grid-3.is-visible>*:nth-child(2),.clients-grid.is-visible>*:nth-child(2),
.pillars.is-visible>*:nth-child(2),.art-grid.is-visible>*:nth-child(2),.awards-dark__grid.is-visible>*:nth-child(2),
.bgrid.is-visible>*:nth-child(2),.cert-grid.is-visible>*:nth-child(2),.cust__grid.is-visible>*:nth-child(2),
.eec-grid.is-visible>*:nth-child(2),.lb-blue__grid.is-visible>*:nth-child(2),.place-grid.is-visible>*:nth-child(2),
.port-grid.is-visible>*:nth-child(2),.prod-grid.is-visible>*:nth-child(2),.sales-grid.is-visible>*:nth-child(2),
.rel-grid.is-visible>*:nth-child(2),.scope-grid.is-visible>*:nth-child(2),.story__grid.is-visible>*:nth-child(2),
.wgrid.is-visible>*:nth-child(2),.awards.is-visible>*:nth-child(2),.perks.is-visible>*:nth-child(2),.zones.is-visible>*:nth-child(2){transition-delay:.08s}
.standards__grid.is-visible>*:nth-child(3),.biz-grid.is-visible>*:nth-child(3),.proj-grid.is-visible>*:nth-child(3),
.review-grid.is-visible>*:nth-child(3),.card-grid-3.is-visible>*:nth-child(3),.clients-grid.is-visible>*:nth-child(3),
.pillars.is-visible>*:nth-child(3),.art-grid.is-visible>*:nth-child(3),.awards-dark__grid.is-visible>*:nth-child(3),
.bgrid.is-visible>*:nth-child(3),.cert-grid.is-visible>*:nth-child(3),.cust__grid.is-visible>*:nth-child(3),
.eec-grid.is-visible>*:nth-child(3),.lb-blue__grid.is-visible>*:nth-child(3),.place-grid.is-visible>*:nth-child(3),
.port-grid.is-visible>*:nth-child(3),.prod-grid.is-visible>*:nth-child(3),.sales-grid.is-visible>*:nth-child(3),
.rel-grid.is-visible>*:nth-child(3),.scope-grid.is-visible>*:nth-child(3),.story__grid.is-visible>*:nth-child(3),
.wgrid.is-visible>*:nth-child(3),.awards.is-visible>*:nth-child(3),.perks.is-visible>*:nth-child(3),.zones.is-visible>*:nth-child(3){transition-delay:.16s}
.standards__grid.is-visible>*:nth-child(4),.biz-grid.is-visible>*:nth-child(4),.proj-grid.is-visible>*:nth-child(4),
.review-grid.is-visible>*:nth-child(4),.card-grid-3.is-visible>*:nth-child(4),.clients-grid.is-visible>*:nth-child(4),
.pillars.is-visible>*:nth-child(4),.art-grid.is-visible>*:nth-child(4),.awards-dark__grid.is-visible>*:nth-child(4),
.bgrid.is-visible>*:nth-child(4),.cert-grid.is-visible>*:nth-child(4),.cust__grid.is-visible>*:nth-child(4),
.eec-grid.is-visible>*:nth-child(4),.lb-blue__grid.is-visible>*:nth-child(4),.place-grid.is-visible>*:nth-child(4),
.port-grid.is-visible>*:nth-child(4),.prod-grid.is-visible>*:nth-child(4),.sales-grid.is-visible>*:nth-child(4),
.rel-grid.is-visible>*:nth-child(4),.scope-grid.is-visible>*:nth-child(4),.story__grid.is-visible>*:nth-child(4),
.wgrid.is-visible>*:nth-child(4){transition-delay:.24s}
.awards.is-visible>*:nth-child(4),.perks.is-visible>*:nth-child(4),.zones.is-visible>*:nth-child(4){transition-delay:.24s}
.standards__grid.is-visible>*:nth-child(5),.clients-grid.is-visible>*:nth-child(5),
.wgrid.is-visible>*:nth-child(5),.bgrid.is-visible>*:nth-child(5),.perks.is-visible>*:nth-child(5),.zones.is-visible>*:nth-child(5){transition-delay:.32s}
.clients-grid.is-visible>*:nth-child(6),.perks.is-visible>*:nth-child(6),.zones.is-visible>*:nth-child(6){transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  body.home #hero h1,body.home #hero .hero__sub,body.home #hero .hero__lead,
  body.home #hero .hero__quote,body.home #hero .hero__actions,body.home #hero .hero__facts,
  .page-hero__inner>*,.lb-hero__inner>*,.page-hero__figure{animation:none}
  .sec-head,.section-head,.rv-head,.cta-copy,.cta-person,.quote-intro,.form-card,
  body.home .business__head,body.home .trust__copy,body.home .trust__media,
  .standards__grid>*,.biz-grid>*,.proj-grid>*,.review-grid>*,.card-grid-3>*,.clients-grid>*,.pillars>*,
  .art-grid>*,.awards-dark__grid>*,.bgrid>*,.cert-grid>*,.cust__grid>*,.eec-grid>*,.lb-blue__grid>*,
  .place-grid>*,.port-grid>*,.prod-grid>*,.sales-grid>*,.rel-grid>*,.scope-grid>*,.story__grid>*,.wgrid>*,.awards>*,.perks>*,.zones>*{
    opacity:1;translate:0 0;transition:none;
  }
}