:root{
  /* Palette */
  --blue-grad: linear-gradient(180deg, #0c1320 0%, #0a1020 50%, #080f1c 100%);
  --ink:#0e1320;
  --gold:#D4AF37;
  --gold-strong:#B8860B;
  --gold-soft:#E8D28A;
  --ivory:#fff9ec;
  --porcelain:#f7f4ea;

  --bg:#0a0a0a;
  --text:#e8eaef;
  --muted:#20252f;

  --radius:18px;
  --container:1200px;

  /* Elevation (soft) */
  --shadow:0 10px 24px rgba(0,0,0,.18);
  --shadow-lg:0 16px 36px rgba(0,0,0,.22);

  --footer-bg:#07182d;

  /* Typefaces */
  --font-head:"Noto Serif Thai", ui-serif, "Sarabun", "Noto Serif", serif;
  --font-body:"Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Noto Sans", sans-serif;

  /* Hairlines */
  --hairline:1px solid rgba(255,255,255,.06);
  --hairline-gold:1px solid rgba(212,175,55,.35);
}

/* Reset & base */
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--footer-bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}
.container{width:min(100% - 2rem, var(--container));margin-inline:auto}
section{padding-block:clamp(2.2rem,6vw,4rem)}

/* DEV placeholders — OFF (ไม่แสดง) */
.ph{display:none}
.ph::after{display:none}

/* Headings */
.section__title{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.15px;
  font-size:clamp(1.7rem,3.2vw,2.3rem);
  margin:0 0 .7rem;
  color:#f7f7f8;
}
.section__lead{color:#90a3b8;max-width:65ch}

/* Header / Nav */
header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(12,19,32,.86), rgba(8,15,28,.76));
  backdrop-filter:saturate(130%) blur(8px);
  border-bottom:var(--hairline);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand__logo{
  inline-size:48px;block-size:48px;border-radius:12px;object-fit:contain;
  background:#0c1527;border:1px solid rgba(212,177,95,.35);padding:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.brand__name{
  font-family:var(--font-head);font-weight:800;letter-spacing:.25px;color:#ffe6a8;
}
#nav-toggle{display:none}
.nav__toggle{display:none;color:#fff;border:1px solid rgba(255,255,255,.18);padding:.45rem .75rem;border-radius:10px;cursor:pointer}
nav.primary{display:flex;align-items:center;gap:1.1rem}
nav.primary a{
  color:#cfe2ff;padding:.4rem .25rem;border-radius:6px;position:relative;
}
nav.primary a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:transparent;transition:background .2s ease;
}
nav.primary a:hover,
nav.primary a.active{color:#fff}
nav.primary a:hover::after,
nav.primary a.active::after{background:linear-gradient(90deg,#d9c06b,#b99433)}

@media (max-width:992px){
  .nav__toggle{display:inline-block}
  nav.primary{
    position:fixed;inset:64px 0 auto 0;display:grid;
    background:rgba(10,12,18,.96);padding:1rem;border-top:var(--hairline);
    transform:translateY(-120%);transition:transform .25s ease
  }
  #nav-toggle:checked ~ nav.primary{transform:translateY(0)}
}

/* Hero */
.hero{position:relative;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__bg{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(100%) contrast(102%)}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,10,14,.35) 0, rgba(8,10,14,.68) 40%, #0a0a0a 100%);
}
.hero__wrap{display:grid;align-items:end;min-block-size:72vh;padding-block:3.5rem}
.hero .container{padding-block:2rem}
.hero__subtitle{
  font-family:var(--font-head);color:#ffe3a4;font-weight:800;letter-spacing:1.2px;margin:0 0 .25rem
}
.hero__title{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(2.2rem,6vw,4.1rem);line-height:1.14;color:#fff;
}
.hero__accent{
  height:4px;width:100%;max-width:620px;border-radius:999px;
  background:linear-gradient(90deg,transparent,#d1b45a 35%,#f1e0a6 50%,#c6a75a 65%,transparent);
  margin:.7rem 0 1.1rem;
}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* Buttons (flat luxe) */
.btn{
  display:inline-block;background:#d9bd60;color:#1b1b1b;
  padding:.85rem 1.2rem;border-radius:999px;font-weight:800;
  border:1px solid rgba(255,239,179,.55);
  box-shadow:0 8px 18px rgba(184,137,34,.22);
  transition:transform .04s ease, filter .2s ease;
}
.btn:hover{filter:brightness(1.03);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:transparent;color:#fff;border:1px solid rgba(232,207,122,.5);
}

/* About */
.about{background:var(--footer-bg)}
.about__grid{display:grid;gap:2rem;grid-template-columns:1.1fr .9fr}
@media (max-width:992px){.about__grid{grid-template-columns:1fr}}

.frame{
  position:relative;background:#fffdf7;border-radius:16px;padding:2rem;color:#1f2937;
  border:1px solid #eadfbf;box-shadow:var(--shadow);
}
.frame::before{content:"";position:absolute;inset:-10px;border-radius:22px;border:1px solid #eddba5;pointer-events:none}
.frame::after{content:none} /* remove dashed outline (mockup vibe) */
.frame .section__title{color:#0d172a}
.frame p,.frame li{color:#334155;font-size:1.02rem}
.frame strong{color:#0b1020}

/* Image stack */
.stack{position:relative;display:grid;gap:1rem}
.stack img{
  border-radius:14px;box-shadow:0 16px 32px rgba(0,0,0,.22);
  width:100%;display:block;aspect-ratio:4/3;object-fit:cover
}
.stack .img2{position:absolute;right:6%;top:8%;width:48%}
.stack .img3{position:absolute;right:0;bottom:-8%;width:70%}
@media (max-width:992px){
  .stack{min-height:420px}
  .stack .img2,.stack .img3{position:relative;right:auto;top:auto;bottom:auto;width:100%}
}

/* Services */
.services{background:var(--footer-bg);color:#fff}
.split{display:grid;gap:2rem;align-items:center;grid-template-columns:1fr 1fr}
@media (max-width:992px){.split{grid-template-columns:1fr}}

.serv__title{font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2.1rem);margin-top:0}
.bullets{list-style:none;padding:0;margin:1rem 0 0}
.bullets li{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0;font-size:1.02rem}
.tick{
  inline-size:18px;block-size:18px;border-radius:5px;border:2px solid #d4af37;margin-top:.2rem;
  box-shadow:inset 0 0 0 4px rgba(212,175,55,.28);
}
.media-16x9{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);
  background:#0f1115;box-shadow:var(--shadow)
}
.serv__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Fleet / Cards (no gradients) */
.fleet{background:var(--footer-bg)}
.grid{display:grid;gap:1.2rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:992px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--3{grid-template-columns:1fr}}

.card{
  background:#ffffff;border:1px solid rgba(234,219,170,.6);
  border-radius:16px;overflow:hidden;box-shadow:0 12px 26px rgba(2,6,23,.08);
}
.card__media{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.card__body{padding:1rem 1.1rem;color:#1f2937}
.card__title{
  margin:.2rem 0 .55rem;font-size:1.08rem;font-weight:800;color:#0f172a;
  font-family:var(--font-head);letter-spacing:.15px;
}
.goldbar{
  height:4px;border-radius:999px;margin-bottom:.55rem;background:#d9c06b;
}
.meta{color:#374151;font-size:.98rem}

/* Notice (tone down) */
.notice{
  margin-top:1rem;padding:1rem;border:1px solid #eadfae;border-radius:12px;background:#fffdf0;color:#1f2937
}

/* Works / Gallery */
.works{background:var(--footer-bg)}
.works h2{color:#fff}
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:10px;margin-top:.9rem;
}
.tile{
  position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);
  box-shadow:0 8px 24px rgba(0,0,0,.24);transition:transform .18s ease, box-shadow .18s ease;
}
.tile:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.3)}
.tile__link{display:block;position:relative;color:inherit}
.tile__media{position:relative;aspect-ratio:4/3;width:100%;overflow:hidden}
.tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;transition:none}
.tile__caption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:0;transition:opacity .2s ease;pointer-events:none
}
.tile:hover .tile__caption{opacity:1}
.tile__caption-text{
  display:inline-block;font-size:.95rem;font-weight:700;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);max-width:95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
@media (max-width:768px){
  .gallery{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .tile__caption-text{font-size:.9rem}
}

/* CTA & Contact */
.cta{
  background:#fff9ea;border-radius:18px;padding:1.4rem;display:grid;gap:1rem;align-items:center;grid-template-columns:1fr auto;color:#1f2937;
  border:1px solid rgba(232,207,122,.5);box-shadow:var(--shadow)
}
.cta h3{font-family:var(--font-head);color:#0f172a;margin-top:0}
@media (max-width:560px){.cta{grid-template-columns:1fr;text-align:center}}

.contact{display:grid;gap:1.2rem;grid-template-columns:1fr 1fr}
.form{
  background:#0f1319;border:1px solid #222833;border-radius:16px;padding:1rem;color:#e8eaef;box-shadow:var(--shadow)
}
.form label{display:block;margin:.5rem 0 .2rem}
.form input,.form textarea{width:100%;padding:.8rem;border:1px solid var(--muted);border-radius:10px}

/* QR Card */
.qr-card{display:grid;gap:.8rem;align-content:start;justify-items:center;text-align:center}
.qr-box{background:#fff;padding:12px;border-radius:14px;box-shadow:var(--shadow);width:min(280px,100%)}
.qr-img{display:block;width:100%;height:auto;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}
.qr-meta a{color:#e8eaef;text-decoration:underline;text-underline-offset:2px}

/* Footer */
footer{
  background:var(--footer-bg);color:#cbd5e1;padding-block:3rem;margin-top:2rem;border-top:var(--hairline-gold)
}
.footer__grid{display:grid;gap:2rem;grid-template-columns:2fr 1fr 1fr}
@media (max-width:768px){.footer__grid{grid-template-columns:1fr}}
.copyright{
  border-top:1px solid rgba(255,255,255,.08);margin-top:1.2rem;padding-top:1rem;color:#cbd5e1;font-size:.95rem
}

/* Floating buttons */
.btn-line{
  position:fixed;right:14px;bottom:14px;display:inline-grid;place-items:center;width:52px;height:52px;background:#06c755;color:#fff;border-radius:999px;box-shadow:var(--shadow-lg)
}
.btn-top{
  position:fixed;right:18px;bottom:84px;width:44px;height:44px;border-radius:999px;background:#d9bd60;display:grid;place-items:center;
  box-shadow:var(--shadow);border:1px solid rgba(255,239,179,.55)
}

/* Service layout keep */
.services .split{grid-template-columns:1fr 1.6fr;gap:1.25rem;align-items:center}
.services .split--reverse{grid-template-columns:1.6fr 1fr}
@media (max-width:992px){
  .services .split,.services .split--reverse{grid-template-columns:1fr}
}
.services .bullets{max-width:56ch}

/* Media wrapper */
.media-16x9{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:#0f1115;box-shadow:var(--shadow)}
.serv__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}